jQueryを使ってTwitterをおいしくマッシュアップ（3/4） ─ ＠IT

連載一覧へ

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

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

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

JavaScriptファイルを呼び出すHTML

- PR -

　まずは、サンプルアプリケーションの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パターン”になります。

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

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ジャパン

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

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

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