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

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


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

モデルではJSONPによるデータ取得を行う

　次に、モデル「public_timeline.js」のコードを見ていきましょう。

// コンストラクタ
twitter.PublicTimeline = function() {
    this.since_id = '';
}

// インスタンスメソッド
twitter.PublicTimeline.prototype = {

    /**
     * Twitter APIからjsonpでpublic_timelineを取得
     */
    jsonp: function(callback) {
         var url="http://twitter.com/statuses/public_timeline.json?"+
                 "since_id=" + this.since_id + "&" +
                 "callback={callback}";
         $.getJSONP(url, callback);
    }
}
- PR -

　モデルには、since_idというプロパティと、jsonp()というメソッドがあるだけです。

　jsonp()メソッドは、指定されたsince_id以降のpublic_timelineを取得するためのTwitter APIのJSONP用URLを用意し、今回導入したJQuery用JSONPプラグイン「jquery.jsonp.js」の、getJSONP()メソッドを呼び出します。

　callback関数は、コントローラーのクラスで定義した「callJsonp()」メソッド内の無名関数です。

ビューでも使われるAjaxデザインパターンとjQuery

　最後に、ビュー「public_timeline_view.js」のコードを見ていきましょう。

twitter.PublicTimelineView = {

    /**
     * 受け取ったステータスのうち最も古いものを描画して
     * 1.5秒後に再度自分自身を呼び出して、次に古いものを描画する
     */
    render: function(statuses) {
        if (statuses.length > 0) {
            var status = statuses.pop();
            $("#statuses").after(
                $("<div class='status' id='status" + status.id +
                "'>" +"<a href='http://twitter.com/" +
                status.user.screen_name + "'>" +
                "<img src='" + status.user.profile_image_url +
                "' /></a>" + "<div class='comment'><p class='text'>" +
                 status.text + "</p>" +
                "<cite class='user'>Twit From" +
                "<a href='http://twitter.com/" +
                status.user.screen_name + "'>" + status.user.name +
                "</a></cite></div>" + "</div>")
            );

            setTimeout(function() {
                twitter.PublicTimelineView.render(statuses)
                $(".status:gt(4)").remove();
            }, 1500);
        }
    }
}

　ビューはrenderというクラスメソッドがあるのみです。このメソッドでは、受け取ったステータスの配列の一番最後の要素を取り出し、DOM要素を生成して、<div id='statuses'></div>の子要素として追加をします。

■ ｊQueryの特徴の1つCSSセレクタを使用したDOM要素の検索

　ここではまず、「$("#statuses")」という呼び出しがあります。これは、jQueryの特徴的な機能の1つで、CSSセレクタを使用したDOM要素の検索機能です（参考）。

　「#statuses」はid属性がstatusesである要素を表しますので、「<div id='statuses'></div>」を表現するDOM要素に対応するjQueryオブジェクトが返されます。

■ “Page Rearrengementパターン”でDOM要素の生成や挿入

　次に、このjQueryオブジェクトに対して、after()メソッドを呼び出しています（参考）。

　after()メソッドは、指定したjQueryオブジェクトの次の要素として、指定されたDOM要素を挿入するメソッドです。

　ここでは、コメントを描画するHTMLのDOM要素を生成して引数として指定しています。

　コメント部分のDOM要素の生成は、jQueryの、$(html)の呼び出しを使用します（参考）。この$()関数はHTMLマークアップを受け取り、それに対応するDOM要素を生成して、そのDOM要素に対応するjQueryオブジェクトを返します。

　このように、DOM要素の生成や、挿入などの操作を行うテクニックが“Page Rearrengementパターン”です。

■ 再び登場！ “Periodic Refreshパターン”

　ビューのrenderメソッドでは、その後、setTimeoutを使って、1.5秒後に再帰呼び出しを行うように設定しています（“Periodic Refreshパターン”）。

　これにより、受け取った20個のステータスを1.5秒に1つずつ描画していきます。1つのステータスを描画したら、すでに表示済みのステータスから5つ目以降のステータスを削除する、という処理も行っています。

　ここでは、「.status:gt(4)」という記述が、XPathによる、[position() > 4]を表しており、結果的に「class=status」となる要素のうち5番目以降をjQueryのremoveメソッドで削除しています（参考）。

デザインパターン・ライブラリ・MVC活用のススメ

　このように、AjaxデザインパターンやjQueryを使うと、簡潔かつ直感的な記述ができることがお分かりいただけたと思います。

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

　また、MVCによる設計を参考にすることで、役割分担を明確にし、コードの可読性を保ちながら開発を行うことができる点もぜひ参考にしていただければと思います。

　次回は、prototype.jsを使って、また新しいAjaxデザインパターンを盛り込んだサンプルをご紹介できればと思っています。

　今回のソースはこちらからダウンロードできます（こちらのアプリケーションは2007年8月に、当時のTwitterのWeb APIを使って作成したものです。その後、Twitter側の仕様の変更などによりアプリケーションが動作しなくなる場合もありますが、あらかじめご了承ください。また、サンプルのライセンスはGPL 2となります）。

■ 参考文献　

■ ＠IT関連記事


古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
「Web Client & Report」フ ォーラム 2005/8/2

Ajax解体新書

よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう

最終更新 2006/11/22

Ajax うきうき Watch

Ajaxという流行技術の定義を明確にしながら、Ajaxの動向からうきうきするような面白いもの、確実に押さえておきたいものを厳選してお届けしていく

最終更新 2008/5/26

JavaScriptプログラミング再入門

　Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック

最終更新 2007/9/25

プロフィール：志田 裕樹（しだ ゆうき）

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。

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