
パターンとライブラリで作るAjaxおいしいレシピ(1)
jQueryを使ってTwitterをおいしくマッシュアップ
アークウェブ株式会社
志田 裕樹
2007/8/29
Ajaxおいしいレシピを紹介する前に
■ そもそも、Ajaxのこと分かってますか?
- - PR -
2005年の始めにAjaxという言葉が知られるようになってから、Ajaxは急速に技術の進化を遂げ普及してきました。読者の皆さんの中にもAjaxの開発を実際に経験した方が増えているのではないでしょうか?
編集部注:Ajaxそのものについて詳しく知りたい読者は、 「いまさら聞けない、“Ajax”とは何なのか?」をご参照ください。
■ AjaxデザインパターンとAjaxライブラリをMVCで実用的に活用
この連載では、サンプルアプリケーションを通じて、Ajaxのさまざまなテクニック(Ajaxデザインパターンなど)をご紹介していきたいと思っています。
さらに、サンプルアプリケーションでは、Ajaxライブラリを活用し、MVC(モデル、ビュー、コントローラー)で設計することで、より実用的なサンプルにしていきたいと思っています。
編集部注:MVCそのものについて詳しく知りたい読者は、Java Solution FAQの記事、 「MVCモデルという言葉をよく聞きますが何のことですか?」をご参照ください。
■ サンプルの目指すところ
サンプルプログラムは、実際の開発にそのまま生かせるように、次の点に留意しました。
| ・Ajaxアプリケーションの開発では、イベント処理が増えていったり、さまざまなテクニックを駆使していくと、可読性が悪くなりがちです。MVCの設計を参考に各役割を分割して実装することで可読性が良くなるように心掛けました ・実際の開発では、prototype.jsなどのAjaxライブラリを利用するケースが多いと思います。本サンプルでもjQuery(後述)というライブラリを活用することで、jQueryライブラリの利用サンプルとなるようにしました ・使用しているテクニックごとに、Ajaxデザインパターン(後述)の用語を引用して解説します。テクニックごとに用語を付けて呼ぶことで開発時のコミュニケーションを簡略化できます |
これは今後の連載でも同様です。
まずは、今回のサンプルを見てみよう
■ Twitterって何?
今回紹介するのは、Twitterをマッシュアップするサンプルプログラムです。
Twitterは、Twitter, Inc.が提供しているミニブログサービスです。Twitter上のユーザーの多くは、「おはようございます〜。いま起きました」「今日も徹夜でした orz」といったユーザー自身のいまのステータスをひと言コメントの形で1日に何度も書き込んでおり、それをコミュニティ形式で楽しむことができます。今回はTwitterのWeb APIであるTwitter APIを使って、投稿されたコメントを取得して表示します。
![]() |
| 図1 Twitterのトップページ |
編集部注:Twitterそのものについて詳しく知りたい読者は、Master of IP Networkの記事、 「いまだからこそTwitterの楽しさを知るべきです!」をご参照ください。
■ サンプルの仕様
サンプルの仕様は、次のようになっています。
- 30秒置きに、Twitterに投稿された最新ステータスリスト(以後、public_timelineと呼ぶ)を20件取得
- 1で取得した20件のステータスから1.5秒置きに1件ずつ表示
■ 実際にWebで動くサンプルを見てみよう
それでは、すでに完成したサンプルがありますので、まずは実際に見てみましょう。
| 今回のサンプルプログラム(拡大表示はこちら、こちらのアプリケーションは2007年8月に、当時のTwitterのWeb APIを使って作成したものです。その後、Twitter側の仕様の変更などによりアプリケーションが動作しなくなる場合もありますが、あらかじめご了承ください。また、サンプルのライセンスはGPL 2となります) |
■ サンプルで使われているテクニック
このサンプルアプリケーションには、次のテクニックが使用されています。
- 現在表示しているドメイン以外からデータを取得するテクニック
- 一定時間置きにプログラムを実行するテクニック
- ページ内に要素を新しく追加したり削除したりするテクニック
これらのテクニックをサンプルコードを見ながら、Ajaxデザインパターンの名称(後述)を使って紹介をしていきたいと思います。
本記事の内容を理解するためには、Ajaxの基本技術である、XMLHTTPRequestや、JSON、DOM操作、JavaScriptのオブジェクト指向による開発などの知識が必要になります。これらの基本技術については、「Ajaxフォトアルバムのフェードイン画像フレームを作ろう」という連載でも解説されているので、こちらも ご覧ください。
MVCそれぞれの役割
初めに、今回のアプリケーションの各機能をコントローラー、モデル、ビューそれぞれの役割ごとに分割してみます。
今回のアプリケーションで発生するイベントと処理の方法を、次のように設計しました。
- A:ページがロードされた
- A-1:Twitterのpublic_timelineを取得するように「モデル」に依頼
- B.:Twitterのpublic_timelineが取得された
- B-1:取得されたステータスを描画するように「ビュー」に依頼
- B-2:30秒後、再度Twitterのpublic_timelineの取得をするように「モデル」に依頼
■ イベントのハンドリングを行う、コントローラー
「コントローラー」では主にイベントのハンドリングをし、アプリケーションロジック部分を受け持つ「モデル」や、描画を受け持つ「ビュー」に処理を依頼します。
![]() |
| 図2 コントローラー、モデル、ビューのシーケンス図 |
■ アプリケーションのロジック部分を受け持つ、モデル
モデルはアプリケーションのコアとなるロジックを担当します。
今回のアプリケーションでは、Twitter上のpublic_timelineを取得し、取得したステータスを引数として、コントローラーが呼ばれるようにする部分を担当させることにしました。
Twitterのpublic_timelineは、Twitter APIを使用することで取得できます。
なお、JavaScriptからTwitter上のデータを取得するためには、JSONPというテクニックを使用する必要があります。JSONPについては、次ページで説明します。
■ データを表示する、ビュー
最新ステータスは、コントローラーを経由してビューに渡されます。
ビューは、ステータスを1件表示してから、1.5秒後に再度自分自身が呼ばれるようにタイマーをセットし、1.5秒後に残りのステータスからまた1件を表示し、再度自分自身を呼ぶ、ということを繰り返します。
| 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 jQueryの特徴の1つCSSセレクタを使用したDOM要素の検索 “Page Rearrengementパターン”でDOM要素の生成や挿入 再び登場! “Periodic Refreshパターン” デザインパターン・ライブラリ・MVC活用のススメ |
||
| リッチクライアント&帳票 全記事一覧へ |
ホワイトペーパー(TechTargetジャパン)
- いまさら聞けないTwitter超入門−@IT記事も対応なう (2010/2/4)
Twitterは最近話題のつぶやきツール。基本的な使い方から、iPhoneアプリの使い方、RTの解説、4人のご意見番の活用例や感想まで - HTML5は開発者側の都合。ユーザーには関係ない (2010/2/2)
3つのレンダリングエンジンを載せている“国産”ブラウザベンダは、HTML5やWeb/ブラウザの進化について何を語るのか - テキスト・フォント周りをキレイに見せるCSS、13選! (2010/1/29)
無数にあるCSSのプロパティを大まかに分類し、1つずつ紹介していく本連載。初回は、テキスト・フォント周りについて - OpenGL ESが大変な3Dアプリ開発を楽にするUnity (2010/1/27)
iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは? 仮想化運用管理のキモは意外なところに! New! |
| ◆ | 操作もマニュアルも分かりやすい! ユーザー視点で開発されたPC管理ツール New! |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |

| ◆ | セキュリティを知り尽くす上野氏が登壇! @ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
| ◆ | 世界に通用するストレージの作り方とは? 製品に込めた思いを富士通の開発者に聞く |

| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫? 情報漏えいを防ぐ管理手法とインフラは? |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |

| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ! Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | @IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |

| ◆ | @IT「Windows 7」 特設サイトオープン! 最新情報・移行ノウハウを公開しています |








