WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

YouTube Data APIとJavaScriptで試行錯誤してます

   

明けましておめでとうございます！　今年もJavaScriptでいろいろなことをしていきたいと思います。 youtube_comment さっそくですがjQueryプラグインのText on YouTubeのバージョンを更新しました。YouTubeのData APIを利用してコメント表示できるよう改良しています。 ⇒Text on YouTube　コメント表示機能のデモ また、長らく更新情報だけの寂しいホームページに彩りを与えるため、ホームページにも動画コーナーを置いてみました。ここではData APIの動画検索を使ってカテゴリ別に動画を取得するようにしています。こうしたマッシュアップ的な用途にもこのプラグインが使えると思います。 さて、YouTubeのData APIについて少々説明しますが、これは動画検索や関連動画などの情報をRSSフィードなどを通じて提供するサービスです。クライアントサイドのJavaScriptはクロスドメイン制約があるため、本来別ドメインのXMLファイルが取得できないですが、JSONPという裏技（すでに当たり前に使われてますが）を使って情報を引っ張ってくることができます。このとき取得できるファイル形式はJSON（JavaScript）形式のみですが、JavaScriptを使用する側から見ればXMLを渡されるよりも都合がよかったりします。 YouTube Data API　リファレンス ガイド リファレンスは長大なので全部把握するのはかなりしんどいです。ただし、ユーザーが必要とする内容のフィードは大抵限定されているので、すべてに目を通す必要はありません。どこに望む情報フィードを得る方法が書かれているかを探すこと方が早道でしょう。 たとえば、「動画カテゴリーが自動車で、日本の動画で、人気があって、今週アップされた動画」のフィードを得るには、次のようなURLに加工してフィードをリクエストします。このURLを実際にアドレスバーに打ち込んでエンターキーを押すとフィードが表示されます。なお、ブラウザがGoogle Chromeだとダウンロードを要求せず画面に直接表示してくれるので便利です。 
http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_popular_Autos?alt=json&prettyprint=true&time=this_week&v=2
このうち、取得するフィードに合わせて加工するのはhttp://gdata.youtube.com/feeds/api/以下の部分です。standardfeedsは標準フィード（人気動画やコメントの多い動画を検索するフィード）を意味し、JPは日本の動画を意味します。most_popularは人気の動画を意味し、アンダースコアでカテゴリを指定できます（ここでは自動車）。そして?alt以下はクエリパラメータで、日時を絞ったり（この例では今週）、フィードのフォーマットを指定します（当然JSONですが、Ajaxでリクエストするときはjson-in-scriptという値にします）。ただこのままではコードが整形されていない非常に見づらい内容になってしまうので、フィードの内容を確認したいときはprettyprintパラメータにtrueを指定します。 実際のフィード内容をのぞくと次のようになっています。 
{
 "version": "1.0",
 "encoding": "UTF-8",
 "feed": {
  "xmlns": "http://www.w3.org/2005/Atom",
  "xmlns$media": "http://search.yahoo.com/mrss/",
  "xmlns$openSearch": "http://a9.com/-/spec/opensearch/1.1/",
  "xmlns$gd": "http://schemas.google.com/g/2005",
  "xmlns$gml": "http://www.opengis.net/gml",
  "xmlns$yt": "http://gdata.youtube.com/schemas/2007",
  "xmlns$georss": "http://www.georss.org/georss",
  "gd$etag": "W/\"CkYBQH47eCp7ImA9Wx9QGE8.\"",
  "id": {
   "$t": "tag:youtube.com,2008:standardfeed:jp:most_popular_Autos"
  },
  "updated": {
   "$t": "2010-12-31T10:29:11.000-08:00"
  },
  "category": [
   {
    "scheme": "http://schemas.google.com/g/2005#kind",
    "term": "http://gdata.youtube.com/schemas/2007#video"
   }
......
......
このなかから動画タイトルの情報や、コメント情報の在りかをプロパティ名を頼りに探していくわけですが、XMLではなく、オブジェクトや配列というなじみ深いデータ形式になっているので、慣れてしまえばそれほど難しい作業というわけではありません。たとえば、動画検索フィードにはfeedプロパティというのがあって、さらにそのなかのentryという配列に検索結果の複数の動画情報がまとめて格納されています。そしてこの配列の最初の要素は、もっとも検索内容にマッチした動画情報ということになります。最初の動画情報のタイトルを取得したいというときの具体的な処理例を見てみますと、 
/* jQueryのAjaxメソッドを使用 */
jQuery.getJSON(
	'http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_popular_Autos'?callback=?',
	{
		'alt': 'json-in-script', //JSONPを利用するときの値
		'time': 'this_week' //今週の動画に限る
		'v': 2 //最新のAPIで取得
	},
/* フィード取得に成功したら呼び出すコールバック */
	function(data) {
		var feed = data.feed;
		var videoInfo = feed.entry[0];
		var videTitle = videoInfo.title.$t;
		alert( videTitle );
	}
);
このような感じになります。フィード内の動画情報やタイトル情報の階層・位置はリファレンスで確認できるので、これらをしっかり把握できれば、動画や再生リストの検索を自動化したりと、JavaScriptだけでもかなりの処理ができそうですね。

 - JavaScript/Ajax , , , ,