プログラマの思索

「Ajaxデザインパターン」という本を見つけたのでメモ。

【参考】
O'Reilly Japan - Ajaxデザインパターン

Main Page - Ajax Patterns

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

JSONP － ＠IT リッチクライアント用語事典

Ajaxデザインパターン｜Ouobpo

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

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

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために - Foo am I?

up J's street on Blog: Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために

@ITでAjaxネタ(デザインパターン, MVC等)の連載をさせていただくことになりました : アークウェブのブログ

【1】RedmineのVer2.3から、管理画面に「JSONPを有効にする」チェックボックスがいつの間にやら付いている。

JSONPとは、JSONP － ＠IT リッチクライアント用語事典にあるように、JavaScriptから外部ドメイン上のJSONデータを取得する技術だ。

JSONPを有効にすることで、クライアントPCのブラウザで動くJavaScriptプログラムから、RESTやSOAPなどのAPIを簡単に扱えるようになる。

Redmineは外部接続I/Fの種類がとても多いので、クライアントPCも含む外部システムからデータ操作したい場合、JSONPが使えるようになれば、選択肢がより広がる。

ここで、JavaScriptでリッチUIをプログラミングする時に、Ajaxデザインパターンという考え方があるらしい。
Blog記事を読むと、Ajaxデザインパターンは2007年頃に出版されたらしいが、最近ならJQueryでも同じような設計手法が使えるだろうと思う。

アジャイル開発から発展したリーンスタートアップのように、スタートアップ企業がWebサービスで起業する事例が最近多い。
その場合、ユーザが触れるユーザインターフェイスの使いやすさが、以前にも増して重要になっている。

最近なら、Microsoftが検索エンジンBingで、青色のテキストリンクを変えただけで、70億円もの利益を増やしたという事例があった。
たかがテキストリンクの色と思うだろうが、そういう細かなユーザインターフェイスを変えただけでも、利益が大きく変わるのだ。

テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar

クリック率の高いテキストリンクの色は？【2013年版】 | ウェブ力学

そこから、ユーザエクスペリエンスという言葉が生まれて、アジャイル界隈で、アジャイルUXなる言葉も出てきたのだろうと推測する。

UIのパターンは色々あるだろうが、Webシステム開発に携わるならば、Ajaxデザインパターンのような考え方も理解しておくといいかもしれない。

@ITでAjaxネタ(デザインパターン, MVC等)の連載をさせていただくことになりました : アークウェブのブログに書かれている下記の内容は全く同意。

(引用開始)
Ajaxデザインパターンの方は、これを使うとコミュニケーションのコストを下げることができますし、また、コードの再利用もしやすくなります。
たとえば、「検索フォームでキーワードを入力すると、入力途中でも検索結果が表示されるやつ」というよりも、「LiveSearchパターン」と言った方が簡潔で伝わりやすいですよね。
(引用終了)

パターン名が、機能の内容やパターンが使える状況を暗黙的に説明してくれる。
パターンは単なる設計ノウハウだけでなく、コミュニケーションの一部でもある。

【2】以下、下記のBlog記事がとても優れているので、後で参考にするために、引用しておく。

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

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

(引用開始)
【Webサービス】
●RESTful Service （RESTサービス）
　Webサービスを構築する方法の1つに、REST（Representational State Transfer）スタイルを使う方法がある。

●RPC Service （RPCサービス）
　Webサービスを構築する方法の1つに、RPCスタイルを使う方法がある。

●Ajax Stub （Ajaxスタブ）
　RPCスタイルのWebサービスをJavaScript側で呼び出す場合、直接XMLHttpRequestを使う方法もあるが、サービスの呼び出しをJavaScriptコードから隠蔽する「Ajaxスタブ」をブラウザ側で用意して、それを介してサービスを利用するようにする方法もある。Ajaxスタブを使うと、リモート通信のコードを、Ajaxアプリのコントロールロジックから切り離すことができる。SAJAXやDWRなど、Ajaxスタブを作成するためのフレームワークがある。

●HTML Message （HTMLメッセージ）
　サーバが返すレスポンスのデータ形式の1選択肢として、HTMLの断片を直接送る方法がある。この場合、ブラウザ側では innerHTML 属性を使ってHTMLをそのまま描画する。

●Plain-Text Message （テキストメッセージ）
　サーバが返すレスポンスのデータ形式の1選択肢として、シンプルなテキストをそのまま送る方法がある。ブラウザ側では、テキストをそのまま使うか、簡単なデータフォーマットを解析してデータを抽出して使う。

●XML Message （XMLメッセージ）
　サーバが返すレスポンスのデータ形式の1選択肢として、XMLを使う方法がある。XMLだと、複雑なデータ構造を表現できる。また標準のデータ形式なので、多くのツールやライブラリのサポートを利用できる。

●JSON Message （JSONメッセージ）
　サーバが返すレスポンスのデータ形式の1選択肢として、JSON（JavaScript Object Notation）形式を使う方法がある。JSONはJavaScript標準のオブジェクトシリアル化のフォーマットなので、JavaScript側で非常に簡単に扱うことができる。XMLと同様複雑なデータ構造を表現できるが、XMLよりコンパクトになるのが特徴。

【ブラウザ－サーバ間の対話】
●Call Tracking （呼び出しトラッキング）
　複数のXMLHttpRequestコールを制御するには、コールのトラッキングをする。トラッキングの具体的な方法はXMLHttpRequestのラッパを作ることで、トラッキングによってコールのプーリングや直列化、ロギングなどを実現する。

●Periodic Refresh （定期的な再読み込み）
　サーバ側の変更をAjaxアプリに常に察知させるには、ブラウザ側で定期的にXMLHttpRequestコールを実行して、サーバ側の情報を取得しつづけるようにする。

●Submission Throttling （送信スロットリング）
　ブラウザからのデータ送信が断続的に複数回行なわれるような場合、送信イベントの度にサーバへデータを送信する代わりに、ブラウザ側で送信バッファを作って、一定間隔でまとめて送信を行なうようにする。Prototypeの TimedObserver オブジェクトなどが送信スロットリングの用途に使える。

●Explicit Submission （明示的送信）
　ブラウザからのデータ送信の一方法として、ユーザに送信ボタンを押させることで明示的に送信する方法がある。

●Distributed Events （分散イベント）
　AjaxアプリでMVCを意識した疎結合の設計を実現するには、JavaScriptのイベントメカニズムを積極的に使う。

●Cross-Domain Proxy （ドメイン横断プロキシ）
　外部サービスを組み合わせた（マッシュアップ）アプリを作りたいときは、Ajaxアプリが直接複数のサービスと通信するのではなく、外部サービスを連携させるプロキシサービスを作り、Ajaxアプリはそこだけと通信するようにする。
(引用終了)

(引用開始)
【DOMの読み込み】
●XML Data Island （XMLデータ貯蔵庫）
　サーバから受け取ったXMLデータをブラウザ側で一時的に保存しておくには、HTMLノード中に タグで囲まれた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がその一例。
(引用終了)