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

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

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

JavaScriptファイルを呼び出すHTML

　まずは、サンプルアプリケーションのHTMLファイルを見てみましょう。

　このHTMLファイルは、<script>タグで次の5つのJavaScriptファイルを読み込んでいます。

jQueryライブラリ「jquery-1.1.3.1.js」
JQuery用JSONPプラグイン「jquery.jsonp.js」
コントローラー「public_timeline_controller.js」
モデル「public_timeline.js」
ビュー「public_timeline_view.js」

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="content-type"
          content="text/html;charset=UTF-8" />
    <title>Twitter Public Timeline Checker</title>
    <link rel="stylesheet" type="text/css" 
          href="stylesheets/application.css">
    <script type="text/javascript" 
        src="javascripts/jquery-1.1.3.1.js">
    </script>
    <script type="text/javascript" 
        src="javascripts/jquery.jsonp.js">
    </script>
    <script type="text/javascript" 
        src="javascripts/controllers/twitter/public_timeline_controller
.js">
    </script>
    <script type="text/javascript" 
        src="javascripts/models/twitter/public_timeline.js">
    </script>
    <script type="text/javascript" 
        src="javascripts/views/twitter/public_timeline_view.js">
    </script>
</head>
<body>
    <!-- 最新ステータスが表示される領域 -->
    <div id='statuses'></div>
</body>
</html>

　また、Twitterの最新ステータスが埋め込まれる親要素となる「<div id='statuses'></div>」のみを<body>タグの中に含んでいます。

コントローラーでは、パターンとjQueryをどう使う？

　次に、コントローラー「public_timeline_controller.js」のコードを見てみましょう。

//名前空間オブジェクト
var twitter = new Object();
/**
 * コンストラクタ
 */
twitter.PublicTimelineController = function() {
     this.documentReady();
}
/**
 * インスタンスメソッド
 */
twitter.PublicTimelineController.prototype = {
    /**
     * A. ページがロードされた
     * A-1. Twitterのpublic_timelineを取得するように「モデル」に依頼
     */
    documentReady: function(){
        $(document).ready(function() {
            twitter.controller.publicTimeline 
                = new twitter.PublicTimeline();
            twitter.controller.callJsonp();
        });
    },
    /**
     * B. Twitterのpublic_timelineが取得された
     * B-1. 取得されたステータスを描画するように「ビュー」に依頼
     * B-2. 30秒後、再度Twitterのpublic_timelineの取得をするように
     *     「モデル」に依頼
     */ 
    jsonpCallback: function(statuses) {
        var since_id = statuses[0].id;
        twitter.PublicTimelineView.render(statuses);
        setTimeout(function() {
            twitter.controller.callJsonp(since_id);
        }, 30000);
    },
    /**
     * 「モデル」にpublic_timelineの取得を依頼する実際の処理
     */ 
    callJsonp: function(since_id) {
        this.publicTimeline.since_id = since_id;
        this.publicTimeline.jsonp(function(statuses) {
            twitter.controller.jsonpCallback(statuses);
        });
    }
}
twitter.controller = new twitter.PublicTimelineController();

　上から順に見ていきましょう。

名前空間オブジェクトで名前空間を汚染しないように

//名前空間オブジェクト
var twitter = new Object();
/**
 * コンストラクタ
 */
twitter.PublicTimelineController = function() {
     this.documentReady();
}

　twitterという名前空間オブジェクトを作成し、そのプロパティとして、PublicTimelineControllerのコンストラクタ関数を定義しました（参考：Core JavaScript 1.5 Guide:Creating New Objects:Using a Constructor Function - MDC）。

　このようにして、名前空間を汚染しないようにします。

ページがロードされたらモデルにデータ取得を依頼

/**
 * インスタンスメソッド
 */
twitter.PublicTimelineController.prototype = {
    /**
     * A. ページがロードされた
     * A-1. Twitterのpublic_timelineを取得するように「モデル」に依頼
     */
    documentReady: function(){
        $(document).ready(function() {
            twitter.controller.publicTimeline 
                = new twitter.PublicTimeline();
            twitter.controller.callJsonp();
        });
    },
…（略）… 
}

　インスタンスメソッドを追加するには、prototype属性に関数への参照を持ったオブジェクトを設定します（参考：Core JavaScript 1.5 Reference:Global Objects:Function:prototype - MDC）。

　ここでは、ページがロードされたらTwitterのpublic_timelineを取得するように、モデルに依頼をする部分を実装しています。

jQueryオブジェクトの取得とイベントハンドラの設定

        $(document).ready(function() {
            // ここに処理を記述する
        });

　上記の「$(document)」は、DOMオブジェクト「document」を渡し、それに対応するjQueryオブジェクトを返します（参考）。

　ここでは、得られたjQueryオブジェクトに対して、無名関数を引数にしてreadyメソッド（参考）を呼び出すことで、DOMがロードされた段階で指定した無名関数を呼び出させることができます。

編集部注：JavaScriptのコンストラクタ関数や無名関数そのものについて詳しく知りたい読者は、Insider.NETの記事、「JavaScriptの関数をマスターしよう」をご参照ください。

モデルのインスタンスを別のメソッドからもアクセス可能に

twitter.controller = new twitter.PublicTimelineController();

　この部分は、モデルのクラスを生成して、controllerのインスタンス変数として設定しています。このようにすることで、コントローラー内の別のメソッドからもモデルのインスタンスを参照できるようにしています。

モデルにpublic_timelineの取得を依頼

　次に、callJsonp()メソッドを呼び出しています。

    /**
     * 「モデル」にpublic_timelineの取得を依頼する実際の処理
     */ 
    callJsonp: function(since_id) {
        this.publicTimeline.since_id = since_id;
        this.publicTimeline.jsonp(function(statuses) {
            twitter.controller.jsonpCallback(statuses);
        });
    }

　ここでは、モデルのクラスにsince_idをセットした後、モデルクラスのjsonp()メソッドを無名関数を引数にして呼び出しています。

　この無名関数は、JSONPでTwitterのpublic_timelineが取得された際に呼び出されます。無名関数の中身はTwitterの最新ステータスが取得された際に呼び出されるjsonpCallback()メソッドに処理を委譲するだけとなっています。

“Periodic Refreshパターン”で繰り返し、新しいステータスを取得

　jsonpCallback()メソッドでは、受け取ったステータスのうち、最新のもののIDを控えた後、ステータスの描画をビューに依頼します。

    /**
     * B. Twitterのpublic_timelineが取得された
     * B-1. 取得されたステータスを描画するように「ビュー」に依頼
     * B-2. 30秒後、再度Twitterのpublic_timelineの取得をするように
     *     「モデル」に依頼
     */ 
    jsonpCallback: function(statuses) {
        var since_id = statuses[0].id;
        twitter.PublicTimelineView.render(statuses);
        setTimeout(function() {
            twitter.controller.callJsonp(since_id);
        }, 30000);
    },

　その後、控えておいたID以降のステータスを30秒後に取得するように、再度、callJsonpメソッドを呼び出しています。

　このsetTimeout()関数を使って、繰り返し処理を実行するテクニックが、“Periodic Refreshパターン”になります。

　続いて、次ページではモデルとビューのソースコードを解説して、まとめます。

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

前のページへ 1|2|3|4 次のページへ