はじめに
この連載では、
JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装、
Ajaxってなに？
Ajaxとは、
Ajaxを使うと特別なプラグインなどを必要とせず、
ただ、
Ajaxを効果的に使ったWebアプリケーションの例として、
Webページ全体を再読み込みすることなく、
よって、
Ajaxは難しい？
Ajaxは既存の技術の組み合わせなので、
しかし最近では、
本連載では、
解説の進め方
本連載は、
基礎的な知識
YouTube APIってなに？
YouTube APIとは、
2007年8月28日に新しいYouTube APIがリリースされました。Google Data APIs
本連載ではこの新しいバージョンで実装します。詳細は、
ビデオを検索するAPI
YouTubeの検索結果はfeedとして返されます。ビデオを検索するためのvideo feed、
まずはビデオを検索するためのvideo feedを使ってみましょう。呼び出し方は以下のようになります。
http://gdata.youtube.com/feeds/api/videos上記にYoutube APIで使用できるパラメータを付与して問い合わせます。詳細はYouTube query parameters referenceを参照ください。
例えば、
http://gdata.youtube.com/feeds/api/videos?vq=cat&max-results=10データフォーマット
altパラメータに、
文字エンコーディング
応答データの文字エンコーディングはUTF-8です。ソースコードはUTF-8で作成してください。
YouTube APIを使ってみよう（1）
今回は、
機能としては、
- テキストボックスに文字列を入力して
「検索」 ボタンを押すと、 検索結果のサムネイル画像を10件表示する - サムネイル画像をクリックすると、
ビデオの再生ページに遷移する
キーワード入力、検索結果表示部分
まずは、
<form onsubmit="search(); return false;">
<input type="text" id="keyword">
<input type="submit" value="検索">
</form>
<div id="videos"></div>「検索」
検索結果の表示領域としてid=videosで定義されるdiv要素を作ります。
検索
検索が実行されたときに呼び出されるメソッドです
function search() {
// (1) 表示領域を初期化します。
var videos = document.getElementById("videos");
videos.innerHTML = "Loading...";
// (2) 入力されたキーワードを取得し、クエリを生成します。
var keyword = encodeURIComponent(document.getElementById("keyword").value);
var query = "http://gdata.youtube.com/feeds/api/videos?"
+ "vq=" + keyword
+ "&max-results=10"
+ "&alt=json-in-script"
+ "&callback=view";
// (3) script要素を生成します。
var script = document.createElement("script");
script.type = "text/javascript";
script.src = query;
// (4) script要素を追加し、リクエストします。
videos.appendChild(script);
}「検索」
入力されたキーワードを取得します。送信クエリに入力された文字列を含めるため、
var keyword = encodeURIComponent(document.getElementById("keyword").value);続けて、
jsonpを実行するscript要素を生成します
イメージとしては、
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos?vq=..."></script>最後に、
YouTube APIを使ってみよう（2）
JSONPコールバック関数
検索結果データを引数として実行する、
function view(data) {
// (1) 表示領域を初期化します。
var videos = document.getElementById("videos");
videos.innerHTML = '';
// (2) 検索結果のエントリのサムネイル画像に、プレーヤのページへリンクを張った要素を生成し、表示領域に追加します。
var es = data.feed.entry;
for (var i=0; i < es.length; i++) {
var group = es[i].media$group;
// (3) リンク要素の生成
var a = document.createElement("a");
a.href = group.media$player[0].url;
// サムネイル画像要素の生成
var img = document.createElement("img");
img.src = group.media$thumbnail[0].url;
// (4) 表示領域に追加
a.appendChild(img);
videos.appendChild(a);
}
}まず、
検索結果は、
feed.
各entryには、
ページのURLはmedia$playerという要素に格納されています
サムネイルの画像はmedia$thumbnailという要素に格納されています。media$thumbnailは配列です。media$thumbnail[0]として先頭要素を参照します。これを、
次に、
<a href="{media$player[0]}"><img src="{media$thumbnail[0]}" /></a>イメージとしては、
最後に、
以上で、
まとめ
今回は、