連載

2007年8月29日

jQueryを使ってTwitterをおいしくマッシュアップ：パターンとライブラリで作るAjaxおいしいレシピ（1）（2/4 ページ）

[志田裕樹，アークウェブ株式会社] PC用表示関連情報

LINE

Hatena

JSONPって何？JSONとは違うの？

　JSONPは、Ajaxライブラリの1つであるMochiKitの開発者のBob氏が「Remote JSON - JSONP」というエントリーで最初に紹介したテクニックです。簡単に説明すると、JavaScriptから外部ドメイン上のJSONデータを取得するテクニックといえると思います。

　今回のように、TwitterでJSONPを使ってデータを取得するためには、次のURLにアクセスします。

http://twitter.com/statuses/public_timeline.json?since_id=12345&callback=foo

　「since_id」は、指定したidより新しいステータスを取得するという指定です。アクセスすると、次のようなコードが取得されます。

foo([
    {"user": {"url" : null,
              "name" : "nakano",
               …（略）…
             },
    "created_at" : "Thu Aug 23 02:26:38 +0000 2007",
    "id" : 12346
    …（略）…
])

　このように、JSONデータそのものではなくJSONデータを引数とした関数呼び出しの実行コードが返されてきます。関数名は、リクエストパラメータ「callback」で指定した「foo」になります。

　それでは、下記のようなHTMLを用意してWebブラウザで表示してみましょう。

<html>
<head>
  <script type="text/javascript"> 
    function foo(json) {
      alert(json[0].user.name);
    }
  </script>
  <script type="text/javascript"               
    src="http://twitter.com/statuses/public_timeline.json?since_id=
&callback=foo">
  </script>
</head>
<body>
</body>
</html>

　Twitterの最新ステータスの投稿者の名前がダイアログで表示されたと思います。

XMLHTTPRequestと違い、外部のドメインと通信

　XMLHTTPRequestでは、現在表示中のページと同じドメインとしか通信できませんが、このように<script>タグを使えば、外部ドメイン上のJavaScriptファイルを読み込み、それをそのまま実行させることができます。

　Twitterは「callback」に指定した関数「foo」をJSONデータを引数として呼び出す実行コード「foo(JSONデータ)」を返しますので、事前にその関数を用意してから<script>タグでTwitter上のJavaScriptを読み込めば、関数内でJSONの内容を受け取り、処理させることができます。

function foo(json) {
    // 変数jsonに対する処理を書く
}

　アプリケーションによっては、どのJSONデータが必要かがプログラム実行時に決定される場合も多いと思います（ユーザーが指定したキーワードで検索APIを使って検索する場合など）。

　この場合は取得すべきJSONデータのURLが決定された段階で、DOM操作で、<script>タグを動的に表示中のドキュメント内に生成してデータを取得します。JSONPによるデータ取得を支援するライブラリがありますのでこれらを活用するとよいでしょう。

　本サンプルコードでも、Toshimasa Ishibashi氏が作成された「jQuery JSONP plugin」を利用させていただいています。

参考

Ajaxでデザインパターン？

　Ajax Patternsというサイトでは、JSONPのようなAjaxアプリケーション開発でよく用いられるテクニックに用語を定義して、“デザインパターン”として説明しています。

図3　Ajax Patternsのトップページ

　Ajaxアプリケーションの開発時に、開発者同士で特定のテクニックについてコミュニケーションをする際、お互いがAjaxデザインパターンの用語を知っていれば、簡単に意図を伝えられるのではないでしょうか。

今回使ったAjaxデザインパターンの名称

　今回のサンプルアプリケーションで使用するテクニックをそれぞれAjaxデザインパターンの用語で表現すると、次のようになります。

表今回のサンプルで使用したAjaxデザインパターン
パターン名	説明
On-Demand Javascriptパターン	JavaScriptの断片を読み込んで実行するテクニック
Periodic Refreshパターン	一定時間置きにプログラムを実行するテクニック
Page Rearrengementパターン	ページ内に要素を新しく追加したり削除したりするテクニック

　なお、On-Demand JavaScriptパターンは、<script>タグなどを使ったJavaScriptコードの遅延読み込みに関するパターンです。JSONPもこのパターンの一部と考えられますが、今回のようなドメインを超えたデータ受信の文脈に限定してコミュニケーションをする際は、“JSONP”という呼び方を使った方がより適切かもしれません。

　各パターンの使い方や使いどころについては、サンプルのソースコードを見ながら、後ほど解説します。

いまこそ知りたい、jQueryとは？

　冒頭でも説明をしましたが、今回のサンプルではjQueryというAjaxライブラリを使用しました。jQueryは非常にコードを簡潔に記述できるAjaxライブラリで人気が高まっています。

図4　jQueryのトップページ

　jQueryでは、$()関数にDOM要素、CSSセレクタ、XPathなどを指定してjQueryオブジェクトを取得します。取得したjQueryオブジェクトを通じて、次のようなメソッドを利用できます

XPathやCSSセレクタを使用したDOM要素検索のためのメソッド（詳細は後述）
DOM要素間を移動したり操作をしたりするためのメソッド
DOM要素にイベントハンドラを設定するためのメソッド
簡易なエフェクトやアニメーションを行わせるためのメソッド
XMLHTTPRequestを使った通信を行わせるためのメソッド

　詳しくは、「Tutorials - jQuery JavaScript Library」などをご覧ください。

　今回は、バージョン1.1.3.1をjQueryのサイトからダウンロードして使用しました。

　前置きが長くなりましたが、次ページより実際に使ったサンプルのソースコードを見ながら説明を行っていきます。

JavaScriptファイルを呼び出すHTML

前のページへ | 次のページへ