実装してみよう（2）

検索

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

function search(keyword) {
    // (1) 表示領域を初期化します。
    $("#videos").text("Loading...");

    // (2) ajax通信を行います
    $.ajax({
        dataType: "jsonp",    // (3) データ形式はJSONPを指定します。
        data: {               // (4) リクエストパラメータを定義します。
            "vq": keyword,
            "max-results":"10",
            "alt":"json-in-script"
        },
        cache: true,          // (5) キャッシュを使用します。
        url: "http://gdata.youtube.com/feeds/api/videos",
        success: function (data) {  // (6) データ取得に成功した場合の処理を定義します。

            $("#videos").empty();
            $.each(data.feed.entry, function(i,item){    // (7) entryの各要素へアクセスします。
                var group = item.media$group;

                $("<a/>")                                                         // (8) a要素を生成
                    .attr("href", group.media$player[0].url)                      // (9) a要素のhref属性を設定
                    .append("<img src='" + group.media$thumbnail[0].url + "'/>")  // (10) a要素の子要素にimg要素を追加 
                    .appendTo("#videos");                                         // (11) a要素を表示領域の子要素に追加
            });
        }
    });
}

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

ビデオを検索するajax通信を定義します（リスト8-(2)⁠）⁠。jQueryからajax通信を行うメソッドは処理方式に応じて複数用意されていますが，今回は最も基本的なメソッドである，$.ajaxを使用します。$.ajax は，Javascriptのオブジェクトとして定義されたオプションパラメータを引数にして呼び出します。

$.ajax({オプションパラメータ});

今回定義するオプションパラメータは次の通りです。

dataTypeは，サーバから送信されるデータ形式を指定します（リスト8-(3)⁠）⁠。今回はJSONPですので，"jsonp"を指定しました。他には，"xml"，"html"，"json"，"script"，"text"を指定することができます。

dataは，サーバへ送信するデータを指定します（リスト8-(4)⁠）⁠。Javascriptのオブジェクト形式で指定します。オブジェクトメンバの名前と値のペアを，自動的に送信クエリに展開してくれます。たとえば，{"name":"aoki", "age":"34"} は，&name=aoki&age=34となります。もちろん，内部で自動的にencodeURIComponentを使ってエンコードしてくれます。

cacheにfalseを指定すると，送信クエリに現在の時刻を使ったランダムな文字列を付与し送信します（リスト8-(5)⁠）⁠。これにより，リクエスト毎に必ず異なった送信クエリが生成されるため，Webブラウザはキャッシュを使わずリクエスト毎にデータを取得します。しかし，Youtube APIでは，定義されていないパラメータが送信されるとエラーを返すため，cacheはtrueを指定しています。

urlは，クエリの送信先のURLを指定します。ここではvideo feedを呼び出します。

successはデータ取得に成功した場合に，取得データを引数として呼び出される関数です（リスト8-(6)⁠）⁠。

まず，表示領域をクリアします。

$("#videos").empty();

empty()は，マッチした要素の全ての子要素を削除するjQueryのメソッドです。マッチした要素そのものは削除しません。

次に，取得したデータの各要素にアクセスします。jQueryには，$.each(obj, fn)という，Javascriptのオブジェクトや配列への汎用的なイテレーションメソッドが用意されています。1番目の引数(ここではobj)には，イテレーション対象のオブジェクトや配列を指定します。2番目の引数(ここではfn)には，各要素に対しての処理を定義する関数を指定します。ここでは，

$.each(data.feed.entry, function(i,item){
    // 各要素への処理...

});

とするることで，取得したデータのdata.feed.entryの各要素に対する処理を定義しています（リスト8-(7)⁠）⁠。

2番目の引数fnには，２つの引数が与えられます。1番目の引数(ここではi)には，要素のキーが与えられます。2番目の引数(ここではitem)には，要素の値が与えられます。

よって，この関数内で各entryのmedia$group要素にアクセスするためには次のように記述します。

var group = item.media$group

ここではループの中で処理しやすいように，変数groupに格納しています。

次にプレーヤのページへリンクを張ったサムネイル画像を生成します。 まず，リンク要素を生成します（リスト8-(8)⁠）⁠。

DOMプログラミングでは，document.createElementを使用しましたが，jQueryでは，$("<a/>")とするだけで生成することができます。

そのリンク要素のjQueryオブジェクトに対して，attrメソッドを使ってhref属性にプレーヤーへのリンクを設定します（リスト8-(9)⁠）⁠。

.attr("href", group.media$player[0].url)

そのリンク要素のjQueryオブジェクトに対して，appendメソッドを使って子要素にサムネイル画像のimg要素を追加します（リスト8-(10)⁠）⁠。

.append("<img src='" + group.media$thumbnail[0].url + "'/>")

appendメソッドの処理イメージは次のようになります。

そして，そのリンク要素を，appendTo()メソッドを使って，表示領域へ子要素として追加します（リスト8-(11)⁠）⁠。

.appendTo("#videos")

ここで，なにかメソッドをたくさん連続して呼び出しているようなこんな記述でいいのだろうか，と思った方もいると思います。

jQueryオブジェクトのメソッドの殆どは，jQueryオブジェクトを返します。 たとえば，リスト8-(8)～8-(11）の戻り値は，すべて a要素のjQueryオブジェクトです。よって，リスト8-(8)～8-(11)のように同じ要素に対してメソッドを何回も呼び出すような場合でも，メソッドを次々と数珠繋ぎのように呼び出すことができます。これを Chainabilityと呼びます。この仕組みのおかげで，ソースコードを簡潔に記述することができます。どうですか？とても直感的で簡潔なコードだと思いませんか？

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