パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（1）

jQueryを使ってTwitterをおいしくマッシュアップ


アークウェブ株式会社
志田 裕樹
2007/8/29

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

- PR -

　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」を利用させていただいています。

参考
・XML.com: JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
・JSAN - JSONScriptRequest 0.03
 ・川o・-・）＜2nd life - MochiKit で JSONP の利用
・jQuery JSONP plugin (iandeth.)

Ajaxでデザインパターン？

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

図3　Ajax Patternsのトップページ
図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のトップページ
図4　jQueryのトップページ

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

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

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

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

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

1-2-3-4

　INDEX
パターンとライブラリで作るAjaxおいしいレシピ（1）
jQueryを使ってTwitterをおいしくマッシュアップ
  Page1
Ajaxおいしいレシピを紹介する前に
　　そもそも、Ajaxのこと分かってますか？
　　AjaxデザインパターンとAjaxライブラリをMVCで実用的に活用
　　サンプルの目指すところ
まずは、今回のサンプルを見てみよう
　　Twitterって何？
　　実際にWebで動くサンプルを見てみよう
　　サンプルで使われているテクニック
MVCそれぞれの役割
　　イベントのハンドリングを行う、コントローラー
　　アプリケーションのロジック部分を受け持つ、モデル
　　データを表示する、ビュー
Page2
JSONPって何？JSONとは違うの？
　　XMLHTTPRequestと違い、外部のドメインと通信
Ajaxでデザインパターン？
　　今回使ったAjaxデザインパターンの名称
いまこそ知りたい、jQueryとは？
  Page3
JavaScriptファイルを呼び出すHTML
コントローラーでは、パターンとjQueryをどう使う？
　　名前空間オブジェクトで名前空間を汚染しないように
　　ページがロードされたらモデルにデータ取得を依頼
　　jQueryオブジェクトの取得とイベントハンドラの設定
　　モデルのインスタンスを別のメソッドからもアクセス可能に
　　モデルにpublic_timelineの取得を依頼
　　“Periodic Refreshパターン”で繰り返し、新しいステータスを取得
  Page4
モデルではJSONPによるデータ取得を行う
ビューでも使われるAjaxデザインパターンとjQuery
　　 ｊQueryの特徴の1つCSSセレクタを使用したDOM要素の検索
　　“Page Rearrengementパターン”でDOM要素の生成や挿入
　　再び登場！ “Periodic Refreshパターン”
デザインパターン・ライブラリ・MVC活用のススメ

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH