AJAXアプリは客のわがままを聞いてくれるレストラン
2006.05.09
UIEngineの説明をする際に、「通常のウェブ・アプリケーションと異なり、非同期通信を使ってクライアント側でデータ・バインディングをするので、ストレスの少ないユーザー・エクスペリエンスを提供できます」と言ってきた私だが、「データ・バインディングとは何か」を知らない人が意外に多いことに気がついたので、ここで解説しておく。
得意の食べ物にたとえれば、データ・バインディングは「調理」に相当する。定食屋のように全ての食材（データ）をキッチンで調理をしてしまってから一度に持ってくるのが「サーバー・サイドでのデータ・バインディング」で、紅花レストランのように食材をテーブルまで持って来て目の前で調理してくれるのが「クライアント・サイドでのデータ・バインディング」である。
食材を一度にはテーブルに運ばず、客が一つ目の料理を食べている間に二つ目の料理の食材を運んで料理をしておき、一つ目の料理を食べ終わったらすかさず二つ目の料理を盛り付けてくれるのが「非同期通信によるクライアント・サイドでのデータ・バインディング」である。この非同期通信型のコース料理の利点は、あらかじめ全ての料理を指定しておく必要がないことで、「前菜のから揚げで口の中が油っぽくなったから、メイン・ディッシュをステーキから刺身に変更してもらう」などというわがままを言っても、決して必要以上に待たせたりしないのである。
同じ豚肉でも「しょうが焼き」、「とんかつ」、「ゆで豚」と色々な調理方法があるように、同じデータでもグラフだったり表だったりと、さまざまな表示の仕方（view）がある。特に刻々と変化する株価情報やニュースなど「生のデータ」は、食材と同じく鮮度が命なので、あらかじめ調理しておくのではなく、客からの注文が来てから調理する必要がある。そこで通常のウェブ・サイトは、クライアントからリクエストが来た時に、データベースから取り出したデータ（data）と、HTMLのテンプレート（view)をサーバー側で結びつけて（バインドして）、完成したHTMLページの形でクライアント側に返す様に作られている。わずかなデータだけを表示する場合はこれでも良いのだが、大量のデータを表示したり、同じviewを使ってさまざまなdataを表示したい時などには、この方法では効率が悪いし、レスポンスが悪くてしかたがない。
そこで、JavaScriptやUIEngineを活用した次世代型のウェブ・アプリケーション（広義のAJAX）は、まずはviewだけをクライアント側に返し、それが非同期通信でデータをサーバーから入手して表示する、という形で作ってある。こうすることにより、大量のデータを表示するウェブ・アプリケーションであっても、見た目の待ち時間を少なくし、ストレスの少ないユーザー・エクスペリエンス（＝おもてなし）を提供することができるのである。
Satoshiさん、UIEngineにはとても関心があります。Ajaxの場合、従来型のWebアプリをブラウザで利用した際には、ブラウザの「戻る」機能があります。この場合、Ajaxでは、ブラウザに読み込まれたAjaxエンジン自体がアンロードされ、すべての操作処理が無効化されてしまいます。UIEngineでは、どのような工夫されているのでしょうか？
Posted by: Maki | 2006.05.10 at 14:44
ブラウザーは基本的には「ページ」という単位で遷移するので、そうならざるをえませんね。UIEngineにも「ページ」に相当する概念はありますが（applicationと呼んでいます）、その中身をさらに「パーティション」というものに分解してそれぞれをさらに非同期通信でダイナミックにロードすることができます。つまり、viewも非同期通信でオンデマンドに取得することが可能なのです。
それに加えて、ユーザーが「戻る」を選択した時に、実際に何をするのかもアプリでコントロールできるので、そこでページ遷移は起こさずに、パーティションの切り替えだけで「一見ページ遷移したように見える」ことが実現できるようになっています。
さらに細かく言うと、ページ遷移が起こった場合でも、「前の状態に戻る」ことが出来るように、その「状態」を一時的に格納しておく「property bag」というものを用意しています。例えばスクロールが可能なものの場合だと、そこにスクロールポジションを格納しておけば、再び同じページに来た時に同じスクロールのものを表示する、などが可能です。
Posted by: satoshi | 2006.05.10 at 14:59
こんにちは。UJML（UIEngine用の開発言語）が処理できるイベントの中に「UNLOAD」というものがあります。他のイベントがユーザー入力が中心であることと比べると異色な存在です。
この「UNLOAD」によりパーティションがunloadされるときの処理を可能にしています。この「UNLOAD」と「property bag」によりクライアント側で最小限の永続化を可能にしているのだと、あらためて感じました。
Posted by: UIEngineだ | 2006.05.11 at 01:41
Satoshiさん、UIEngineださん、たいへん良く理解することができました。ネットワーク社会において、ブラウザの存在は大きいと思われます。非同期メッセージングを効率的に、上手く利用することで、バックエンドの負担を軽減し、また、ストレスの少ないユーザー・エクスペリエンスを提供することができるわけですね。凄い！ありがとうございました。
Posted by: Maki | 2006.05.11 at 15:10
こんにちわ。
Ajaxを言い換えれば「ブラウザ上で非ブラウザ上のアプリと同じようなことができる」に過ぎないと解釈していますが、これは間違いでしょうか？
もしアタリであれば、それにさほど魅力は感じません。
開発者の観点で言えば、非ブラウザ上のアプリでは、非同期処理用のライブラリなどを使い感覚的に違和感のない開発を行っていると思いますが、Ajaxは元々そのようなプラットフォームが整っていないところへ無理やり組み込もうとしているかのように思えます。
開発者は、眉毛をへの字にして超泥臭い開発を強いられることになるでしょう。
もっとも、おそらくこの流行に後押しされ、
あっという間にこれを克服するライブラリができると思いますが、それで実現できるのが、冒頭にあげた程度のアプリであるならさほど嬉しくもありません。
まるで「ベンチマークおたくが、超高速マシンを組み上げた。けれどそのPCでナニをするわけでもない。」という状況と似たような匂いすら感じます。
と、ここまでの書き込みは、Ajaxの嫌味を言うことが目的ではなく「いやいやAjaxの本質は、ｘｘでｘｘｘのように素晴らしいことなんだ」とやさしく教えていただけるおじさまの出現を望んでおります。
Posted by: kimakima | 2006.05.16 at 08:18