連載
» 2007年08月29日 00時00分 公開

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

[志田裕樹,アークウェブ株式会社]

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アプリケーション開発でよく用いられるテクニックに用語を定義して、“デザインパターン”として説明しています。

ALT 図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ライブラリで人気が高まっています。

ALT 図4 jQueryのトップページ

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

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

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

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

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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。