Ajaxデザインパターン - プログラミングパターン (2)

　(1)の続き。

Michael Mahemoff, 牧野 聡, Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために

【DOMの読み込み】
●XML Data Island （XMLデータ貯蔵庫）
　サーバから受け取ったXMLデータをブラウザ側で一時的に保存しておくには、HTMLノード中に <xml> タグで囲まれたXMLデータを埋め込んでおく。

●Browser-Side XSLT （ブラウザ側XSLT）
　サーバから受け取ったXMLデータをレンダリングする方法の1つとして、ブラウザ側でXSLTを使ってXMLからXHTMLに変換する方法がある。

●Browser-Side Templating （ブラウザ側テンプレート）
　サーバから受け取ったXMLデータをレンダリングする方法の1つとして、JavaScriptベースのテンプレートエンジンを使って、ブラウザ側でXMLとテンプレートからHTMLをレンダリングする方法がある。JavaScriptベースのテンプレートエンジンには、Ajax PagesやJavaScript Templatesなどがある。

【コード自動生成と再利用】
●Server-Side Code Generation （サーバ側コード生成）
　HTMLとJavaScriptを自動生成するサーバ側のフレームワークやコンポーネントを使うことで、サーバ側のプログラミングだけでAjaxアプリを構築することができる。利用できる技術には、Ruby on Railsフレームワークや、JavaのAjaxTagsタグライブラリがある。

●Cross-Browser Component （ブラウザ非依存コンポーネント）
　IEやFirefox、Safariなどブラウザ間の微妙な非互換性に対処するには、ブラウザ非依存の汎用コンポーネントを作成し、それを使う。

【パフォーマンス最適化】
●Browser-Side Cache （ブラウザ側キャッシュ）
　Ajaxアプリのレスポンスのパフォーマンスを上げる方法の1つに、サーバから受け取ったデータをブラウザ側でキャッシュしておく方法がある。キャッシュは、クエリと結果のペアを保持したJavaScriptのマップで実現する。

●Predictive Fetch （予想読み込み）
　Ajaxアプリのレスポンスのパフォーマンスを上げる方法の1つに、次のユーザのアクションを予想してあらかじめコンテンツを読み込んでおく方法がある。Google Map では、地図のナビゲーション中に表示されていない部分も予め取得しているので、ユーザは読み込みを待つことなく地図のスクロールができる。

●Guesstimate （当て推量）
　サーバへのアクセスを減らす方法として、必要がある度にサーバへアクセスするのではなく、アクセスを少なくして、その代わりアクセスによって得られた情報を元にブラウザ側で推測値を計算して使う方法がある。たとえば、GMailのトップに表示されるメールサーバのディスク容量表示は、実際の情報を表示しているのではなく、一定間隔でサーバから得た情報を元に当て推量で表示されている。

●Multi-Stage Download （多段階ダウンロード）
　コンテンツダウンロードのパフォーマンスを最適化する方法として、一度にすべてのデータをダウンロードするのでなく、重要なものから順番に、いくつかの段階に分けてダウンロードする方法がある。

●Fat Client （重量クライアント）
　デスクトップアプリのように高機能で応答性の高いアプリを設計するには、作業のほとんどをブラウザ上で処理し、必要最低限のサーバアクセスを行なうAjaxアプリを構築する。たとえば、GMailがその一例。

>> もくじに戻る