Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

YouTube APIの覚え書き

YouTube APIを使ったサービスが今、仕事で必要になり研究中。
今日はその覚え書き。
一言断っておくと、私はプロジェクトマネージャであり、プログラマではない。APIXMLも意味は知っているが、使ったことはほとんどない。
基礎は知っているつもりだけど。

特定の「タグ」に引っかかるムービーを表示する


例えば、「金沢」というタグを埋められているムービーをYouTubeから別のウェブサイトで表示しようと考えました。

「金沢」による出力例


アドレスバーに「http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=[自分のDeveloper ID]&tag=金沢」とすると次のように出力されます。


<!--コード1-->
<ut_response status="ok">
<video_list>
<video>
<author/>
<id>f0slA7lMg-8</id>
<title>金沢デザイン研究の旅 町並み編</title>
<length_seconds>83</length_seconds>
<rating_avg>0.00</rating_avg>
<rating_count>0</rating_count>
<description>
金沢市の「暗がり坂」当たりお風情ある町並み。
1つ1つの調和による生じる「デザイン」もありかなと考え、映像をアップ。
</description>
<view_count>11</view_count>
<upload_time>1152863718</upload_time>
<comment_count>0</comment_count>
<tags>金沢 宮川 暗がり坂 japan japanese</tags>
<url>http://www.youtube.com/?v=f0slA7lMg-8
<thumbnail_url>
http://sjl-static10.sjl.youtube.com/vi/f0slA7lMg-8/2.jpg
</thumbnail_url>
</video>
    ・
    ・
</video_list>
</ut_response>


※出力結果はあくまでXML形式のため、XSLTスタイルシートを別途用意して表示する必要あり。
XSLTスタイルシートで表示するタグだけを指定します。
YouTube APIを使うには事前にデベロッパのIDを取得しておく必要があります。
ここから↓↓
http://www.youtube.com/dev

Embedのアドレスを作る


YouTube以外のサイト上でムービを再生させるためのタグはYouTube APIでは公開されていなかったので、XMLを駆使してコードを作り上げる必要がありました。

↓これがEmbedコード



↓ブログなどに貼付けるとムービとして表示される
[youtube=http://www.youtube.com/watch?v=f0slA7lMg-8&w=255&h=210]

例えば、コード1の『<url>http://www.youtube.com/?v=f0slA7lMg-8』はYouTubeの該当ページへのリンクになります。そして、同じくコード1の『<thumbnail_url>はサムネイル画像へのパスを表します。

この2つのURLとaタグとimgタグを利用して、YouTubeにリンクを貼るコードは生成できいますが、よくある再生ボタン付きのFlashObjectsにはできません。
リンクのURLもよく見ると違いました。

先に表示したAPIの出力結果(コード1)にある<url>内の「/?v=」この部分が「/v/』だと、ムービを表示するURLとして使えます。
コード1とコード2のURLをよく見比べると分かります。
なので、通常のEmbedコードと同じ表示にできるようにXMLのtranslate関数で置換しました。


<!--コード3-->


今回はXMLで置換をしましたが、PHPなどで置換してもいいんでしょうね。
多分。

今度はこれらをAjaxを使って動的に変化させる仕組みを考えなくては。
Ajaxも素人同然なんですけど。
まぁ、何でもプログラマ任せはいけないのでできるところまでトライしてみます。

今回はあくまで自分への覚え書きなので分かりづらい表現があるかもしれません。ご了承下さい。
質問があればコメントでどうぞ。