PR

 リクルートの住宅情報専門サイト「Smatch」(http://www.smatch.jp/)のトップページでは,画面のレイアウトを利用者が好みに応じて変更できる。また,同サイトの地図を表示する画面では,[+]ボタンをクリックするとズームアップするが,連続してクリックすることが可能だ。従来のWebシステムであれば[+]ボタンを1回クリックして1段階ズームアップさせた後,再度[+]ボタンをクリックして再びズームアップする動きになる。利用者を待たせない工夫を施している。

 こうした動きを可能にしているのがAjaxである。「これまでのWebクライアントは読むだけの“紙芝居”。しかしAjaxの活用で“使えるアプリケーション”に変わる」(Web開発を手がけるミツエーリンクス エグゼクティブプロデューサー 藤田拓氏)。特筆すべきは,Ajaxを利用するに当たってプラグイン・ソフトなどを導入する必要がない点である。Ajaxを研究する川俣晶氏(ピーデー 代表取締役)は,「主要なWebブラウザが備えている機能をうまく使うだけなので,導入時の敷居は低く,特定ベンダーにロックインされることもない」と説明する。

 仕組みを理解するうえで押さえておきたいのは,Webブラウザへの描画などを制御する「DHTML(Dynamic HTML)」と,Webブラウザとサーバー間の通信を担う「XHR(XMLHttpRequest)」という二つの技術である(図1)。

図1●Ajaxの仕組み,利点,インパクト
図1●Ajaxの仕組み,利点,インパクト
Webブラウザ上で動作するJavaScriptが,サーバーへの通信やクライアント側での処理を実行する。技術的には,「XHR(XMLHttpRequest)」を使って非同期でサーバーからデータを取得し,「DHTML(Dynamic HTML)」を使って部分的に画面を描き直す。これにより画面描画を待たずに操作でき(応答性の向上),多彩な処理や表現が可能になる(操作性の向上)。システムに与えるインパクトは,「WebOS」と「リッチクライアント」という二つの側面がある
[画像のクリックで拡大表示]

 通常のWebシステムで画面の内容を変更するには,利用者のボタン・クリックなどを契機にサーバーと通信し,画面全部を描き直す。それに対してDHTMLは,サーバーと通信することなく,画面を部分的に変更できる。サーバー上のデータが必要になったとしても,画面全体ではなく必要個所(画面部品)のデータだけを取得してWebブラウザに反映できる。

 サーバーからデータを取得する際に利用する非同期リクエスト技術がXHRである。利用者はサーバーからのレスポンスを待つことなく次の操作に移れる。レスポンスが戻れば,Webブラウザ上のJavaScriptがそれを処理する。