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

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

LINE

Hatena

モデルでは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);
    }
}

　モデルには、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となります）。

参考文献――『Ajaxデザインパターン ― ユーザビリティと開発効率の向上のために』　オライリー・ジャパン

著者紹介

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

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。

Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。

オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。

「次回」へ

「パターンとライブラリで作るAjaxおいしいレシピ」バックナンバー