作っておいて後から気づいたんだけど、同じようなことしている人がいた。 けども、せっかくなので解説＆コード晒し。 Google Data API の中にYouTube Data API というのがある。 最近でたらしい。 Youtube API Blog によると来年あたりをめどに、 今までのAPIからGData形式のAPIに移行するとのこと。
このYouTube Data API、もちろんGData互換なので、 Atom、RSS、JSONという形式で検索結果などを取得できる。 例えば、以下のURLでは「cat」というキーワードでYouTubeの動画を検索し、 RSSフォーマットで取得することができる。
http://gdata.youtube.com/feeds/videos?vq=cat&start-index=10&max-results=20&orderby=viewCount&alt=rss
各種パラメータはリファレンスを参照していただくとして、 今回はJSONPでデータを取得し、JavaScriptのみでYouTube検索をするというスクリプトの例を紹介する。 実はそのリファレンスには正式に記載されていないが、 URLのaltパラメータにjson-in-script、callbackパラメータにメソッド名を指定すると、 JSONPで返してくれる。 例えばこのようなURLだ。
http://gdata.youtube.com/feeds/videos?format=1&vq=cat&max-results=20&alt=json-in-script&callback=functionName
返ってくるデータ構造、いろいろあるんだけどそのの中で興味深いのが、JSで書くと、
jsonData.feed.entry[0].content.$t
というもの。これはYouTube動画の情報をHTMLで書いてあるコンテンツが入ってる。 それを利用して検索結果をYouTubeの情報付きでhtmlという変数に入れるコールバック関数は以下ような感じだ。
function listVideos(data) {
var html = '';
if(data.feed.openSearch$totalResults.$t > 0){
var entries = data.feed.entry;
for(var i=0;i<entries.length;i++){
html += entries[i].content.$t;
}
}else{
html += "<p>not found</p>";
}
}
てなわけで、フォームにキーワードを入力して、 マッチしたYouTubeの検索結果を表示する簡単なHTML＋JSは以下の通り。
<html>
<head></head>
<body>
<p>
<input type="text" id="query" />
<input type="submit" value="search" onClick="onClick()"/>
</p>
<div id="result"></div>
<script type="text/javascript">
function onClick(){
document.getElementById("result").innerHTML = "loading...";
var query = document.getElementById("query").value;
query = encodeURIComponent(query);
var jsonpURL =
"http://gdata.youtube.com/feeds/videos?vq="
+ query + "&max-results=20&alt=json-in-script&callback=listVideos";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = jsonpURL;
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
}
function listVideos(data) {
var html = '';
if(data.feed.openSearch$totalResults.$t > 0){
var entries = data.feed.entry;
for(var i=0;i<entries.length;i++){
html += entries[i].content.$t;
}
}else{
html += "<p>not found</p>";
}
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>
以下が動いているサンプルです。 どうも、YouTubeのHPでの検索と比べると取得できるコンテンツの数が少ないようだ。 まだ、移行をしている最中かもしれない。 というわけで、JavaScriptだけで済ましたい時にとってはこのAPIは便利。
YouTube Data API 検索サンプル
| パーマリンク
| 
