|
|
【Data APIの使い方】
Google Data APIにはいろいろな形式があるが、JavaScriptでクロスドメインでデータを受け取るのに適したJSON形式を用いた。
まず、ブラウザのアドレス欄に『http://gdata.youtube.com/feeds/api/videos?alt=json&q=【動画ID】』と打ち込んでみてほしい。
【動画ID】とは、各動画ページのURL(例:http://www.youtube.com/watch?v=RvDLOeK5HRc&feature=feedrec_grec_index)の『watch?v=』の後に付いている11桁の半角英数字の事だ。
試しに、『http://gdata.youtube.com/feeds/api/videos?alt=json&q=RvDLOeK5HRc』と打ち込んでみる。
すると、テキストで
{"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/opensearchrss/1.0/","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$yt":"http://gdata.youtube.com/schemas/2007","id":{"$t":"http://gdata.youtube.com/feeds/api/videos"},"updated":{"$t":"2011-05-18T05:29:35.586Z"},"category":[{"scheme":"http://schemas.google.com/g/2005#kind","term":"http://gdata.youtube.com/schemas/2007#video"}],"title":{"$t":"YouTube Videos matching query: RvDLOeK5HRc","type":"text"},"logo":{"$t":"http://www.youtube.com/img/pic_youtubelogo_123x63.gif"},"link":[{"rel":"alternate","type":"text/html","href":"http://www.youtube.com"},{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos"},{"rel":"http://schemas.google.com/g/2005#batch","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/batch"},{"rel":"self","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos?alt\u003djson&q\u003dRvDLOeK5HRc&start-index\u003d1&max-results\u003d25"}],"author":[{"name":{"$t":"YouTube"},"uri":{"$t":"http://www.youtube.com/"}}],"generator":{"$t":"YouTube data API","version":"2.0","uri":"http://gdata.youtube.com/"},"openSearch$totalResults":{"$t":1},"openSearch$startIndex":{"$t":1},"openSearch$itemsPerPage":{"$t":25},"entry":[{"id":{"$t":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc"},"published":{"$t":"2010-09-01T16:37:13.000Z"},"updated":{"$t":"2011-03-28T12:41:30.000Z"},"category":[{"scheme":"http://schemas.google.com/g/2005#kind","term":"http://gdata.youtube.com/schemas/2007#video"},{"scheme":"http://gdata.youtube.com/schemas/2007/categories.cat","term":"Music","label":"Music"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"VOCALOID"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"ゆうゆP"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"マクー"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"はるよ"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"深海少女"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"ミクオリジナル曲"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"VOCALOID新曲リンク"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"初音ミク"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"VOCALOID-PV"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"うん、深いな"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"underwater diving"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"scuba"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"widescreen"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"synthesized singing"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"anime music"}],"title":{"$t":"【初音ミク】 深海少女 【オリジナル】[HD1080p]","type":"text"},"content":{"$t":"【初音ミク】 深海少女 【オリジナル】 NICONICODOUGA 2010年09月01日 ゆうゆ さんwww.nicovideo.jp 【作者のコメント】 Music : ゆうゆ(user/325945) Vocal : 初音ミクIllust : はるよ(mylist/3540872) Bg&Movie : マクー(mylist/12715161) 深海少女、どこまで沈む? ▼カラオケ音源はこちらです ⇒tsubu.ath.cx ■この度、日本クラウン様からアルバム「四季彩の星」を出していただける事になりまんた ⇒yuu-yu.jp","type":"text"},"link":[{"rel":"alternate","type":"text/html","href":"http://www.youtube.com/watch?v\u003dRvDLOeK5HRc&feature\u003dyoutube_gdata"},{"rel":"http://gdata.youtube.com/schemas/2007#video.responses","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc/responses"},{"rel":"http://gdata.youtube.com/schemas/2007#video.related","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc/related"},{"rel":"http://gdata.youtube.com/schemas/2007#mobile","type":"text/html","href":"http://m.youtube.com/details?v\u003dRvDLOeK5HRc"},{"rel":"self","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc"}],"author":[{"name":{"$t":"Miraclemilktea3"},"uri":{"$t":"http://gdata.youtube.com/feeds/api/users/miraclemilktea3"}}],"gd$comments":{"gd$feedLink":{"href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc/comments","countHint":1}},"media$group":{"media$category":[{"$t":"Music","label":"Music","scheme":"http://gdata.youtube.com/schemas/2007/categories.cat"}],"media$content":[{"url":"http://www.youtube.com/v/RvDLOeK5HRc?f\u003dvideos&app\u003dyoutube_gdata","type":"application/x-shockwave-flash","medium":"video","isDefault":"true","expression":"full","duration":218,"yt$format":5},{"url":"rtsp://v4.cache4.c.youtube.com/CiILENy73wIaGQkXHbniOcvwRhMYDSANFEgGUgZ2aWRlb3MM/0/0/0/video.3gp","type":"video/3gpp","medium":"video","expression":"full","duration":218,"yt$format":1},{"url":"rtsp://v2.cache7.c.youtube.com/CiILENy73wIaGQkXHbniOcvwRhMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp","type":"video/3gpp","medium":"video","expression":"full","duration":218,"yt$format":6}],"media$description":{"$t":"【初音ミク】 深海少女 【オリジナル】 NICONICODOUGA 2010年09月01日 ゆうゆ さんwww.nicovideo.jp 【作者のコメント】 Music : ゆうゆ(user/325945) Vocal : 初音ミクIllust : はるよ(mylist/3540872) Bg&Movie : マクー(mylist/12715161) 深海少女、どこまで沈む? ▼カラオケ音源はこちらです ⇒tsubu.ath.cx ■この度、日本クラウン様からアルバム「四季彩の星」を出していただける事になりまんた ⇒yuu-yu.jp","type":"plain"},"media$keywords":{"$t":"VOCALOID, ゆうゆP, マクー, はるよ, 深海少女, ミクオリジナル曲, VOCALOID新曲リンク, 初音ミク, VOCALOID-PV, うん、深いな, underwater diving, scuba, widescreen, synthesized singing, anime music"},"media$player":[{"url":"http://www.youtube.com/watch?v\u003dRvDLOeK5HRc&feature\u003dyoutube_gdata_player"}],"media$thumbnail":[{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/0.jpg","height":240,"width":320,"time":"00:01:49"},{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/1.jpg","height":90,"width":120,"time":"00:00:54.500"},{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/2.jpg","height":90,"width":120,"time":"00:01:49"},{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/3.jpg","height":90,"width":120,"time":"00:02:43.500"}],"media$title":{"$t":"【初音ミク】 深海少女 【オリジナル】[HD1080p]","type":"plain"},"yt$duration":{"seconds":"218"}},"gd$rating":{"average":5.0,"max":5,"min":1,"numRaters":15,"rel":"http://schemas.google.com/g/2005#overall"},"yt$recorded":{"$t":"2010-09-02"},"yt$statistics":{"favoriteCount":"34","viewCount":"7128"}}]}}
のように表示されたはずだ。これがJSONデータだ。
JavaScriptにはこのデータを構造体データとして受け取る仕組みが用意されていて、URLの後ろに『&callback=関数名』を付けておくと、データが返送されてきた時にその関数が呼ばれ、引数に構造体データとして値が引き渡される。下にコードサンプルを示す。使い方は簡単で、関数 RequestYouTubeMovieRecord('RvDLOeK5HRc'); を実行すれば、GetYouTubeMovieRecord(Feed)がcallbackされる。
サンプルでは引数FeedにJSONデータを代入している。どんなデータがあるのかは、Internet Explorer9に標準で装備されたF12 開発者ツール(L)を用いて、ブレークポイントを設定して、watch機能でFeedを登録して、階層構造を調べた。なので、Googleさんの仕様書は殆ど全く読んでおりませんのでご容赦ください。
【コードサンプル】
//【Public変数の登録】
var YT_AuthorName; //【動画所有者名】 = Feed.feed.entry[0].author[0].name.$t;
var YT_Published; //【アップロード日時】= Feed.feed.entry[0].published.$t;
var YT_Title; //【題名】 = Feed.feed.entry[0].title.$t;
var YT_ViewCount; //【再生回数】 = Feed.feed.entry[0].yt$statistics.viewCount;
//*******************************************************
//【Get YouTube Movie Record】【callback】
//*******************************************************
function RequestYouTubeMovieRecord(id) {
YT_AuthorName = ""; //【要求するデータの全項目をクリアする】
YT_Published = ""; //
YT_Title = ""; //
YT_ViewCount = 0; //
var STag = document.createElement("script"); //【scriptタグ要素を用意してJSONを要求するURLをsrcとする】
STag.charset = "utf-8"; // エンコードをutf-8とし、型をテキスト/JavaScriptとする
STag.type = "text/javascript"; // JSONデータ受取の為のfunction[GetYouTubeMovieRecord]をcallbackで定義する
STag.src = "http://gdata.youtube.com/feeds/api/videos?alt=json&q=" + id + "&callback=GetYouTubeMovieRecord";
document.body.appendChild(STag); //【上記JSONデータを要求する要素をbodyにappendする】
}
function GetYouTubeMovieRecord(Feed) { //【Googleから返送されたJSONデータを構造体データとして引き数Feedで受け取る】
YT_AuthorName = Feed.feed.entry[0].author[0].name.$t; //【動画所有者名】YouTubeチャンネルの名称
YT_Published = Feed.feed.entry[0].published.$t; //【アップロード日時】
YT_Title = Feed.feed.entry[0].title.$t; //【題名】
YT_ViewCount = Feed.feed.entry[0].yt$statistics.viewCount; //【再生回数】 (他に評価や動画説明等のデータもある。)
}
|