第1回　まずは実装してみよう

はじめに

この連載では、Javascriptは知っているけどAjaxは実装したことがないという方に向け、YouTube APIを利用したWebアプリケーションを題材に、実装の方法を解説します。

JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装、基本的な使い方、また、UIへの応用実装も合わせて解説します。

Ajaxってなに？

Ajaxとは、Asynchronous Javascript+XMLの略称です。Javascriptを使い、Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法を指します。

Ajaxを使うと特別なプラグインなどを必要とせず、Webページの必要な部分だけ必要に応じて書き換えることができるため、ユーザビリティの高いWebアプリケーションを作ることができます。また、異なるWebサービスをまとめたりすることもできるため、既存のWebサービスから別の価値を生み出すWebアプリケーションを作ることができます。

ただ、Ajaxは技術であり、より良いWebアプリケーションを作るのは「使い方次第」です。使い所やポイントについては、連載の最後に書きたいと思います。

Ajaxを効果的に使ったWebアプリケーションの例として、Google Mapsがあります。皆さんも一度は目にしたことがあると思います。

Webページ全体を再読み込みすることなく、地図をドラッグしたり、ズームしたりすることができます。これまでの地図は、上下左右をクリックして地図を「切り替えて」いましたが、Google Mapsではドラッグして地図を「ずらす」ことができます。

よって、頭の中で図面のつながりを保ったまま、地図を移動させることができます。 Ajaxがとても効果的に使われています。

Ajaxは難しい？

Ajaxは既存の技術の組み合わせなので、それぞれはそう難しくありませんが、1から実装すると、複数のブラウザの対応、クロスドメインアクセス、セキュリティの問題など、いろいろと頭を悩ますことになります。

しかし最近では、Ajaxを簡単に使うためのライブラリ、また、開発ツールにもAjaxを使う仕組みが標準で組み込まれ、Ajaxを扱うための環境が揃いつつあります。

本連載では、jQueryというJavascriptライブラリを使い、簡単にAjaxを実装する方法を解説します。

解説の進め方

本連載は、Ajaxの実装をしたことがない人に向けたものですので、完成されたアプリケーションを解説するのではなく、少しずつ実装を加えながら解説するというように進めます。

基礎的な知識

YouTube APIってなに？

YouTube APIとは、YouTubeが提供しているWebサービスを、プログラムから利用できるように公開されたAPIです。YouTubeの様々な機能を利用したり、他のWebサービスや自作のプログラムと組み合わせることができます。

2007年8月28日に新しいYouTube APIがリリースされました。Google Data APIs（GData）に準拠して新しく実装されています。また、2007年1月現在では認証は不要です。Youtubeのアカウントを取得する必要はありません（現段階では読み取り専用のため⁠）⁠。

本連載ではこの新しいバージョンで実装します。詳細は、Reference Guide-YouTube Data APIを参照してください。本連載でも実装に必要なところは随時解説します。

ビデオを検索するAPI

YouTubeの検索結果はfeedとして返されます。ビデオを検索するためのvideo feed、評価の高いものや最も表示されたものなど、主要なリストを返すstandard feeds、ユーザのプレイリストを返すplaylist feedなどいくつかの種類が用意されています。

まずはビデオを検索するためのvideo feedを使ってみましょう。呼び出し方は以下のようになります。

http://gdata.youtube.com/feeds/api/videos

上記にYoutube APIで使用できるパラメータを付与して問い合わせます。詳細はYouTube query parameters referenceを参照ください。

例えば、catというキーワードで、最大件数を10件として検索するには以下のようにリクエストします。

http://gdata.youtube.com/feeds/api/videos?vq=cat&max-results=10

データフォーマット

altパラメータに、応答データのフォーマットを指定することができます。何も指定しないとatom（Atomフォーマット）になります。その他、rss、JSON、json-in-script（JSONP）を指定することができます。今回は、JSON-in-script（JSONP）を使用します。JSON、JSONPおよびクロスドメインアクセスに伴う問題については次回説明します。

文字エンコーディング

応答データの文字エンコーディングはUTF-8です。ソースコードはUTF-8で作成してください。

YouTube APIを使ってみよう（1）

今回は、Ajax実装を理解するため、jQueryなどライブラリを使わずにYouTube APIを使用した簡単なビデオ検索を実装してみましょう。

機能としては、次のものを実装します。

テキストボックスに文字列を入力して「検索」ボタンを押すと、検索結果のサムネイル画像を10件表示する
サムネイル画像をクリックすると、ビデオの再生ページに遷移する

キーワード入力、検索結果表示部分

まずは、検索キーワードを入力するためのテキストボックスを作ります。また、検索を実行する「検索」ボタンを作ります（リスト1⁠）⁠。

リスト1

<form onsubmit="search(); return false;">
  <input type="text" id="keyword">
  <input type="submit" value="検索">
</form>
<div id="videos"></div>

「検索」ボタンはsubmitボタンのため、押されるとform要素のactionを実行します。今回は、このform要素がリクエストを送るわけではないので、searchメソッドを実行後、onsubmitイベントハンドラにfalseを返し、action処理をキャンセルしています。

検索結果の表示領域としてid=videosで定義されるdiv要素を作ります。

検索

検索が実行されたときに呼び出されるメソッドです（リスト2⁠）⁠。

リスト2

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);
}

「検索」ボタンが押されると、まず、表示領域を初期化します（リスト2-(1)⁠）⁠。document.getElementByIdを使い、表示領域（id=videos）の要素オブジェクトを取得します。その後、“⁠Loading...⁠”という文字列を設定します。

入力されたキーワードを取得します。送信クエリに入力された文字列を含めるため、次のようにencodeURIComponentを使用してエンコードします（リスト2-(2)⁠）⁠。

var keyword = encodeURIComponent(document.getElementById("keyword").value);

続けて、キーワードを使用してクエリを生成します。“⁠vq⁠”⁠ はキーワードを指定するパラメータです。タイトル、タグ、詳細からキーワードを含むビデオを検索します。“⁠max-results⁠”は、検索結果の最大件数です。今回は10件としました。“⁠alt⁠”は、応答データのフォーマットを指定するパラメータです。今回は、json-in-script（JSONP）を使用します。“⁠callback⁠”は、jsonpで呼び出されるコールバック関数を指定します。今回は、viewと定義しました。

jsonpを実行するscript要素を生成します（リスト2-(3)⁠）⁠。document.createElementを使い、script要素オブジェクトを生成します。typeプロパティに“⁠text/javascript⁠”を指定します。そして、srcプロパティに先ほど生成したクエリ文字列を設定します。

イメージとしては、次のようなscript要素を生成しています（src要素は省略⁠）⁠。

<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos?vq=..."></script>

最後に、script要素をDOMに追加しています（リスト2-(4)⁠）⁠。この時点でリクエストされます。

YouTube APIを使ってみよう（2）

JSONPコールバック関数

検索結果データを引数として実行する、コールバック関数を実装します。データを解析し、プレーヤのページへリンクを張ったサムネイル画像を表示します。

リスト3

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);
  }
}

まず、表示領域をクリアします（リスト3-(1)⁠）⁠ 。

検索結果は、コールバック関数viewの引数dataとして渡されます。形式はJSONですので、特別な処理をせずJavascriptでそのまま扱うことができます。

feed.entryに、検索結果のビデオの内容が配列として格納されています。つまり、個々のビデオの情報は、feed.entry[0]、feed.entry[1] ...のようにして参照することができます。ループの中で処理しやすいように、変数esに格納しています（リスト3-(2)⁠）⁠。

各entryには、media$groupという要素があります。ここにはビデオへのキーワード、URL、サムネイルなど、ビデオの様々な情報が格納されています。

ページのURLはmedia$playerという要素に格納されています（リスト3-(3) ⁠）⁠。media$playerは配列です。media$player[0]として先頭要素を参照します。これを、createElementを使用して生成したa要素のhref属性として指定します。

サムネイルの画像はmedia$thumbnailという要素に格納されています。media$thumbnailは配列です。media$thumbnail[0]として先頭要素を参照します。これを、createElementを使用して生成したimg要素のsrc属性として指定します。

次に、a要素の子要素としてimg要素を追加します。

<a href="{media$player[0]}"><img src="{media$thumbnail[0]}" /></a>

イメージとしては、上記のようなa要素を生成しています。

最後に、表示領域の子要素に、生成したa要素を追加して表示します（リスト3-(4) ⁠）⁠。

以上で、実装は終了です。今回のサンプルはこちらです。実際に動かして見てください。

まとめ

今回は、Ajaxの説明と、Youtube APIを使った簡単な実装のサンプルを解説しました。JSONP方式でのAjaxを、今回はあえてjQueryを使わずに実装しました。何となくイメージはつかめたでしょうか。次回は、JSON、JSONPの詳しい説明、そしてjQueryを使ったAjax実装を紹介したいと思います。

第1回まずは実装してみよう