[画像のクリックで拡大表示]
図1●Ajaxの仕組み<BR>通常のWebアプリケーションの場合,ボタンのクリックなどのユーザーのアクションを受けてWebサーバーにリクエストが送信され,処理の結果が画面表示とともに送られてくる(a)。つまり,Webサイトに何か問い合わせをするたびに画面遷移が発生し,次の画面に移るまでユーザーは待つしかない。Ajaxの手法では,ユーザーのアクションをWebページに埋め込まれたJavaScriptのプログラムが受け取る(b)。アクションに応じた表示をサーバーに問い合わせることなく実現しながら,「XMLHTTP」というオブジェクトを作成してサーバーに問い合わせる。XMLHTTPは,JavaScriptが備えるサーバーへのリクエスト送信の仕組み。結果はXML形式で返ってくるため,それを利用してさらに表示を変更する。
図1●Ajaxの仕組み<BR>通常のWebアプリケーションの場合,ボタンのクリックなどのユーザーのアクションを受けてWebサーバーにリクエストが送信され,処理の結果が画面表示とともに送られてくる(a)。つまり,Webサイトに何か問い合わせをするたびに画面遷移が発生し,次の画面に移るまでユーザーは待つしかない。Ajaxの手法では,ユーザーのアクションをWebページに埋め込まれたJavaScriptのプログラムが受け取る(b)。アクションに応じた表示をサーバーに問い合わせることなく実現しながら,「XMLHTTP」というオブジェクトを作成してサーバーに問い合わせる。XMLHTTPは,JavaScriptが備えるサーバーへのリクエスト送信の仕組み。結果はXML形式で返ってくるため,それを利用してさらに表示を変更する。
[画像のクリックで拡大表示]
画面1●Google Suggest&lt;BR&gt;テキストエリアに検索キーワードの一部を入力すると,入力した文字列から始まる検索キーワードの候補がリストボックスに表示される。また,そのキーワードで検索した場合のヒット件数も表示される。
画面1●Google Suggest<BR>テキストエリアに検索キーワードの一部を入力すると,入力した文字列から始まる検索キーワードの候補がリストボックスに表示される。また,そのキーワードで検索した場合のヒット件数も表示される。
[画像のクリックで拡大表示]
リスト1●XMLHTTPオブジェクトを作成&lt;BR&gt;ブラウザによって記述方法が異なる。米Microsoft社のInternet Explorer(IE)か,それ以外(FirefoxやOperaなど)かで大きく分かれる。またIEは,バージョン6以降とそれより前で,生成するオブジェクトが異なる。IEに同梱されるXML関連のモジュールが,バージョン6から変更になったためだ。
リスト1●XMLHTTPオブジェクトを作成<BR>ブラウザによって記述方法が異なる。米Microsoft社のInternet Explorer(IE)か,それ以外(FirefoxやOperaなど)かで大きく分かれる。またIEは,バージョン6以降とそれより前で,生成するオブジェクトが異なる。IEに同梱されるXML関連のモジュールが,バージョン6から変更になったためだ。
[画像のクリックで拡大表示]
図2●Google Suggestの仕組み&lt;BR&gt;ユーザーのキー入力をトリガーに,キーボード入力の内容を取得するメソッドを実行する。またキーボード以外からの入力を受け付けるために,テキストエリアの内容を一定時間ごとにチェックする。これらのメソッドが取得した内容が変わったら,サーバーに送信して結果を得る。このとき,XMLHTTPオブジェクトを利用する。
図2●Google Suggestの仕組み<BR>ユーザーのキー入力をトリガーに,キーボード入力の内容を取得するメソッドを実行する。またキーボード以外からの入力を受け付けるために,テキストエリアの内容を一定時間ごとにチェックする。これらのメソッドが取得した内容が変わったら,サーバーに送信して結果を得る。このとき,XMLHTTPオブジェクトを利用する。
[画像のクリックで拡大表示]
リスト2●メソッドの登録&lt;BR&gt;上は,キー入力時に発生するイベントの登録。下は,指定したメソッドを一定時間ごとに実行させるための処理である。
リスト2●メソッドの登録<BR>上は,キー入力時に発生するイベントの登録。下は,指定したメソッドを一定時間ごとに実行させるための処理である。
[画像のクリックで拡大表示]
リスト3●サーバーへの問い合わせ&lt;BR&gt;変数「l」には,XMLHTTPオブジェクトが入っている。その「open」というメソッドを呼び出すと,XMLHTTPオブジェクトがサーバーにリクエストを送信する。次に,サーバーからのレスポンスを受信したときに発生するイベントの処理をする。ここでは,得られた文字列(l.responseText)をスクリプトとして解釈・実行する処理が記述されている。
リスト3●サーバーへの問い合わせ<BR>変数「l」には,XMLHTTPオブジェクトが入っている。その「open」というメソッドを呼び出すと,XMLHTTPオブジェクトがサーバーにリクエストを送信する。次に,サーバーからのレスポンスを受信したときに発生するイベントの処理をする。ここでは,得られた文字列(l.responseText)をスクリプトとして解釈・実行する処理が記述されている。
[画像のクリックで拡大表示]
リスト4●サーバーとの通信内容&lt;BR&gt;XMLHTTPオブジェクトを使って送ったリクエスト(上)と,それに対するレスポンス(下)。レスポンスは「sendRPCDone」を呼び出すプログラムとなっている。sendRPCDoneは,既に読み込み済みのJavaScriptファイルに記述されているメソッド。引数に,キーワードの候補とヒット件数が格納されている。
リスト4●サーバーとの通信内容<BR>XMLHTTPオブジェクトを使って送ったリクエスト(上)と,それに対するレスポンス(下)。レスポンスは「sendRPCDone」を呼び出すプログラムとなっている。sendRPCDoneは,既に読み込み済みのJavaScriptファイルに記述されているメソッド。引数に,キーワードの候補とヒット件数が格納されている。
[画像のクリックで拡大表示]
表●代表的な地図アプリケーション
表●代表的な地図アプリケーション
[画像のクリックで拡大表示]
図3●Google Mapsの処理の流れ&lt;BR&gt;Google MapsのWebサイトにアクセスすると,表示すべき地図画像をダウンロードする。同時に,画面横の検索メニューを表示するためのスタイルシートを,XMLHTTPオブジェクトを利用して取得する。ユーザーがドラッグ操作を開始すると,それに応じて地図がスクロールする。また検索例の「“kansas city”探す」をクリックすると,「kansas city」という文字列をサーバーに送信して,その地名に該当する座標を要求する。その結果JavaScriptのソースコードが返され,地図を切り替えると同時に,XMLHTTPオブジェクトを利用してスタイルシートをダウンロードし,検索メニューが表示されていた部分の表示も変える。
図3●Google Mapsの処理の流れ<BR>Google MapsのWebサイトにアクセスすると,表示すべき地図画像をダウンロードする。同時に,画面横の検索メニューを表示するためのスタイルシートを,XMLHTTPオブジェクトを利用して取得する。ユーザーがドラッグ操作を開始すると,それに応じて地図がスクロールする。また検索例の「“kansas city”探す」をクリックすると,「kansas city」という文字列をサーバーに送信して,その地名に該当する座標を要求する。その結果JavaScriptのソースコードが返され,地図を切り替えると同時に,XMLHTTPオブジェクトを利用してスタイルシートをダウンロードし,検索メニューが表示されていた部分の表示も変える。
[画像のクリックで拡大表示]
図4●ドラッグ操作による地図スクロールの仕組み&lt;BR&gt;ユーザーのドラッグ操作中,またはドラッグ操作終了後に,画面に表示すべき地図画像をダウンロードする。画面の中心位置の座標を基に必要な画像のURLを生成して,<img>要素に代入してダウンロードする。このとき,表示対象の周辺の画像もダウンロードしておく。地図画面は,<img>要素をタイル状に配置した下地の上に,実際の地図画像を載せる構造になっている。地図画面は一つのレイヤーとして定義されており,ドラッグが実行されると,その操作に合わせてレイヤーの位置を移動する。このとき,周辺の画像は前もってダウンロードされているので高速に表示を切り替えられる。新たに必要な画像は,<img>要素のsrc属性を随時書き換えてダウンロードする。
図4●ドラッグ操作による地図スクロールの仕組み<BR>ユーザーのドラッグ操作中,またはドラッグ操作終了後に,画面に表示すべき地図画像をダウンロードする。画面の中心位置の座標を基に必要な画像のURLを生成して,<img>要素に代入してダウンロードする。このとき,表示対象の周辺の画像もダウンロードしておく。地図画面は,<img>要素をタイル状に配置した下地の上に,実際の地図画像を載せる構造になっている。地図画面は一つのレイヤーとして定義されており,ドラッグが実行されると,その操作に合わせてレイヤーの位置を移動する。このとき,周辺の画像は前もってダウンロードされているので高速に表示を切り替えられる。新たに必要な画像は,<img>要素のsrc属性を随時書き換えてダウンロードする。
[画像のクリックで拡大表示]
リスト5●Google MapsにおけるXMLHTTP通信&lt;BR&gt;Google Mapsでは,ページが切り替わったときに呼び出されるメソッドの中でXMLHTTPオブジェクトを使って通信している(下)。例えば最初にページがロードされたときや,ユーザーが検索を実行したあとなどである。呼び出し側の第2引数に指定されている関数が,サーバーから返答が返ってきたあとに実行される(上)。ここではサーバーから返された文字列の記号を変換したあと,スタイルシートを適用している。
リスト5●Google MapsにおけるXMLHTTP通信<BR>Google Mapsでは,ページが切り替わったときに呼び出されるメソッドの中でXMLHTTPオブジェクトを使って通信している(下)。例えば最初にページがロードされたときや,ユーザーが検索を実行したあとなどである。呼び出し側の第2引数に指定されている関数が,サーバーから返答が返ってきたあとに実行される(上)。ここではサーバーから返された文字列の記号を変換したあと,スタイルシートを適用している。
[画像のクリックで拡大表示]
画面2●goo地図&lt;BR&gt;goo地図では,現在位置の住所や周辺施設,天候などの情報(関連情報)を取得するところでXMLHTTPオブジェクトを利用している。地図のスクロールが終了したことを検知すると,現在位置をサーバーに送信して関連情報を要求する。返答を受信すると,それを利用して地図の周囲に表示される情報を更新する。
画面2●goo地図<BR>goo地図では,現在位置の住所や周辺施設,天候などの情報(関連情報)を取得するところでXMLHTTPオブジェクトを利用している。地図のスクロールが終了したことを検知すると,現在位置をサーバーに送信して関連情報を要求する。返答を受信すると,それを利用して地図の周囲に表示される情報を更新する。
[画像のクリックで拡大表示]
画面3●マピオンラボ&lt;BR&gt;サーバーに要求が送られるのは,初回のアクセス時と,マウスのドラッグが終了したとき。周辺施設などの情報も,XMLHTTPオブジェクトを利用せずに更新する。必要な情報を取得するためのURLを生成して,フレームに動的に流し込む。サーバーからの返答はHTMLデータまたはJavaScriptのソースコードとして返され,それをフレームに表示する。
画面3●マピオンラボ<BR>サーバーに要求が送られるのは,初回のアクセス時と,マウスのドラッグが終了したとき。周辺施設などの情報も,XMLHTTPオブジェクトを利用せずに更新する。必要な情報を取得するためのURLを生成して,フレームに動的に流し込む。サーバーからの返答はHTMLデータまたはJavaScriptのソースコードとして返され,それをフレームに表示する。
[画像のクリックで拡大表示]
リスト6●天気情報の更新&lt;BR&gt;まず,現在位置の天気情報を取得するためのURLを生成する。さらに,JavaScriptが備える「location.replace」というメソッドを,天気を表示するフレームに対して実行する。location.replaceは,指定したURLのデータをフレームにロードするメソッド。
リスト6●天気情報の更新<BR>まず,現在位置の天気情報を取得するためのURLを生成する。さらに,JavaScriptが備える「location.replace」というメソッドを,天気を表示するフレームに対して実行する。location.replaceは,指定したURLのデータをフレームにロードするメソッド。
[画像のクリックで拡大表示]

 Webアプリケーション開発の新手法として注目を集める「Ajax」。JavaScriptとXMLHTTPオブジェクトを用いてサーバーとクライアントの非同期通信を実現し,ユーザーの操作に合わせて画面の表示を動的に変更する。Ajaxという言葉が生まれるきっかけとなった「Google Suggest」や「Google Maps」などのソースコードを解読して,内部でどのような処理が実行されているのかを分析した。その結果,実はAjaxと言っても主役はJavaScriptであることが判明した。

 「Ajax(エージャックス)」というキーワードが,Webアプリケーションの分野でここ半年ほど話題になっている。Ajaxとは,「Asynchronous JavaScript+XML」の略。JavaScriptと,JavaScriptが備える「XMLHTTP」というオブジェクトを利用して,サーバーとブラウザとの非同期通信を実現するのが特徴だ。

 個々の要素技術は従来からあるもので,特に目新しくはない。注目を集めたのは,その使い方だ。JavaScriptとXMLHTTPオブジェクトを組み合わせて,ページ全体を再描画せずに画面を書き換える(図1[拡大表示])。

 そのメリットは「ユーザーが作業を中断することなく,連続的に操作できる」(「goo」の地図情報サービスを担当する,NTTレゾナント ポータル事業本部 メディア事業部の小澤英昭担当部長)こと。これまでは,ボタンなどを押してサーバーにリクエストを送信したら,サーバーからページ全体の情報が戻るまで待たなければならなかった。

 米Google社などがこの手法を利用したアプリケーションを公開し,それに注目した米国のソフトウェア・コンサルティング会社Adaptive Path社のJesse James Garrett氏が,自社のWebサイト上でその技術にAjaxと名付けたのが2005年2月(http://www.adaptivepath.com/publications/essays/archives/000385.php)。覚えやすいキーワードを得たことと,この技術を利用したアプリケーションの使い勝手が良いことから急速に知名度を高めた。「JavaScriptはこれまで,主に画面のデザイナが使うものだった」(「マピオンラボ」が提供する地図情報サービスの開発に携わるサイバーマップ・ジャパン サービス&プロダクト部 企画課の細川克也課長)が,アプリケーションの根幹部分の構築に利用されるようになった。

サービスのソースを読む

 Ajaxの代表例として知られるのは,Googleが提供するサービス群である。中でも(1)「Google Suggest(http://www.google.co.jp/webhp?complete=1&hl=ja)」のように,ユーザーのキー入力中にその操作を妨げることなく有効な情報を提示するもの,(2)「Google Maps(http://maps.google.com/)」のように,1画面に収まらない大きな情報をマウス操作で動かして閲覧可能にするものに大別できる。

 今回は,それぞれのソースコードを読み解いて,実際にどのような処理をしているかを調査した。(2)に関しては,Google Mapsに似た国産の地図情報サービスも調査した。なお,解読の対象にしたのは2005年9月中旬に公開されていたソースコード。最新版とは異なる可能性がある。

 Google Suggestは,JavaScriptとXMLHTTPオブジェクトを利用した動作の仕組みがよく理解できる,Ajaxらしいアプリケーションだった。それに比べ地図情報サービスは,Ajaxのすべての要素を使っていなかった。実は肝心の地図のスクロール処理には,XMLHTTPオブジェクトを利用していない。

入力を妨げず情報提示

 Google Suggestは,インクリメンタルに検索語の候補を提示するサービスである。ユーザーが検索キーワードを入力すると,その文字列から始まる言葉を検索頻度の順にリストボックスに表示する。併せて,その言葉で検索したときのヒット件数も表示する(画面1[拡大表示])。

 動作の仕組みを調べるため,まずGoogle SuggestのWebページを開き,そのソースを表示した。そこには次の2行があった。

<SCRIPT src="/ac.js"></SCRIPT>

<SCRIPT>InstallAC(document.f,

document.f.q,document.f.btnG,"search","ja");</SCRIPT>

これは,「/ac.js」というスクリプト・ファイルを読み込むこと,メソッド「InstallAC」を実行することを示している。

 そこで「www.google.com/ac.js」にアクセスし,スクリプト・ファイルを取得した*1。この中で,InstallACが定義されている。InstallACではまず,引数として渡された文字列から言語を判定する。ここでは,最後の引数で渡している「ja」が日本語を示している。次に,XMLHTTPオブジェクトを作るメソッドを呼び出す(リスト1[拡大表示])。

 一つのオブジェクトを作るのに三つのメソッドを呼び分けているのは,ブラウザによってXMLHTTPオブジェクトの生成方法が異なるためだ。ここでは,正常にXMLHTTPオブジェクトが作れるかどうかを実際に試すことでチェックしているだけである。

 次に,ユーザーが文字を入力するテキストエリアに対して,キーが押されたときに発生するイベントに対応する処理を登録する(図2[拡大表示])。キーが押されたあとに,入力されたテキストを取得し,それを変数に格納する処理である(リスト2上[拡大表示])。

 これに加えて,一定間隔ごとにテキストエリアの内容をチェックする処理も実行している(リスト2下[拡大表示])。JavaScriptの「setTimeout」というメソッドを利用する。このメソッドでは,10ミリ秒ごとにテキストエリアをチェックし,入力されている値が前に取得しておいた値と変わっているとき,文字を新たに変数に格納しておく処理を実行している。キーボードを使わずに入力された場合を想定した処理である。例えばかな漢字変換ソフトが備えるマウスクリックによる文字入力機能を使ったり,文字をマウスでコピー&ペーストした場合でも,Google Suggestはきちんと動作する。

 もう一つsetTimeoutメソッドで登録しているのは,文字列を格納した変数の値を10ミリ秒ごとにチェックする処理である。以前保持しておいた文字列と,現在変数に格納している文字列が異なるときに,サーバーに処理を依頼する。すなわちXMLHTTPオブジェクトを作成し,そのオブジェクトの「open」メソッドを呼び出してサーバーに文字列を送信する(リスト3[拡大表示])。

 同時に,受け取ったレスポンスを処理するメソッドも登録している。このメソッドには,サーバーから返された文字列をスクリプトとして解釈して実行する処理が記述されている。XMLHTTPオブジェクトがこのメソッドを実行するのは,サーバーからの返答を受け取ったあとである。返答を待っている間も他の処理は続けられるため,ユーザーの操作を妨げることがない。

 パケットをキャプチャして実際にやり取りしているデータを調べたところ,サーバーからは,「sendRPCDone」というメソッドを呼び出す文字列が返される(リスト4[拡大表示])。引数には,提示するキーワードの一覧と,そのキーワードで検索したときのヒット件数を格納した配列が渡されている。sendRPCDoneの本体はac.jsで定義されており,戻ってきた一つひとつの結果に対してHTMLの要素を作成し,innerHTMLプロパティを使って表示させる文字列を設定する。つまりこれで,リストボックスに候補が表示されることになる。

必須ではないXMLHTTP

 次に,Ajaxの例としてしばしば引き合いに出される,地図アプリケーションを取り上げる。Ajaxを使った地図アプリケーションは,マウスやキーボードの操作で地図を滑らかに動かせる(スクロールする)のが特徴である。

 現在のところ,複数の地図情報サイトがこの操作性を実現している。今回はGoogle Mapsと,日本で早い段階から同様のサービスを提供しているNTTレゾナントの「goo地図(http://map.goo.ne.jp/)」,サイバーマップ・ジャパンの「マピオンラボ(http://lab.mapion.co)」を選び,ソースコードを解読した*2[拡大表示])。すると,調べた範囲では,いずれも地図のスクロール部分にXMLHTTPオブジェクトは使われていなかった。

 XMLHTTPオブジェクトを使う必要があるのは,「サーバーからテキスト形式で結果を得たいとき」(NTTレゾナントの小澤氏)。画像ファイルは,XMLH TTPオブジェクトを利用しなくても非同期にダウンロード可能なのだ。

Google Mapsの動作の仕組み

 ではまず,Google Mapsの動作の仕組みを見てみよう。Google Mapsにアクセスすると,まず最初に米国を中央に据えた地図画像と,横に表示される検索メニューがダウンロードされる(図3[拡大表示])。地図の上でマウスをドラッグすると,それに応じて地図の表示が滑らかに変わる。また地図の右に表示された検索メニューを実行すると,それに応じた地点に地図が移動し,表示されている地点の地名が右に表示される。これが,Google Mapsの大まかな動きだ。

 このうち,メインの機能ともいえる地図のスクロールは,XMLHTTPオブジェクトを使わずに実現している(図4[拡大表示])。Google Mapsでは,最初に地図の下地を作成する。画像を表示するためのHT ML要素である<img>を生成し,位置を指定して縦横に並べる。また,これらの<img>をまとめて一つのレイヤーとして定義する。ここに,タイル状に細かく分割された画像を張り付けて地図を表示する。現在中心に来ている座標を基に表示すべき画像ファイルのURLを求め,各<img>要素のsrc属性(画像のURLを指定する属性)に設定する。

 このとき,画面に表示する地図のサイズよりも多めに<img>要素を作っておく。こうすることで,現在表示されている地点の周辺の画像もあらかじめダウンロードしておく。例えばGoogle Mapsの初期画面で米国の地図を表示するとき,その周囲の画像も一緒に取得していた。1画面ぶんほど北西に位置するアラスカや,南米のコロンビアなどの地図もダウンロードする。

 ユーザーがマウスのドラッグ操作をすると,マウスの位置を基にどの方向にどの程度動かされたかを算出し,レイヤーの位置を移動する。ダウンロード済みの画像はブラウザが保持しているため,サーバーに問い合わせることなく表示できる。こうして,マウスを動かした方向に滑らかに地図が移動するのである。

 あらかじめ地図をダウンロードしていない場合は,そのつど<img>要素のsrc属性を書き換えてサーバーからダウンロードする。ダウンロードが間に合わないと,その部分のタイルは空白になる。ソースコードには,スクロール時はいったんsrc属性を透明な画像に書き換え,そのあと実際のファイル名を代入する処理が記述してあった。ダウンロードに時間がかかった場合,前の画像が残って地図表示が乱れないようにするためだろう。

関連情報表示にAjaxを利用

 Google MapsでXMLHTTPオブジェクトが登場したのは,地図の横に表示する情報の更新処理である。具体的には,検索メニューをユーザーが実行した場合,検索結果を表示するためのスタイルシートをダウンロードする処理に利用している。

 例えば,「kansas city」という住所で地図を検索するメニューをクリックしたとする。サーバーには,通常のHTTPリクエストによってkansas cityという文字列が渡され,その返答がHTML形式で戻ってくる。返答にはJavaScriptのソースコードが含まれていて,引数には表示すべき地図の座標と,地図の横に表示する文字列が渡されている。

 このJavaScriptが実行されると,座標位置を基に地図が移動する。一方で,XMLHTTPオブジェクトを使って,地図横に適用するスタイルシートをサーバーに要求する処理を実行する(前ページのリスト5[拡大表示])。サーバーからスタイルシートを受け取ると,それを文字列に適用して画面に表示する。

 Google Mapsでは,実行した検索の種類によって画面横の情報が切り替わる。住所で検索すれば住所文字列が表示されるし,「ラーメン」のような文字列で検索すると,それに該当する店舗情報が表示される。やや複雑な感じはするが,表示させる情報の形式をさまざまに変更できるようにする手法と考えられる。

周辺情報の表示にAjaxを利用

 goo地図とマピオンラボでも,地図本体のスクロールはGoogle Mapsとほぼ同じ仕組みで実現している。現在位置の座標を基に,サーバーに必要な地図画像を要求する。このとき,実際に表示する地点の周辺の画像もあらかじめダウンロードしているのだ*3。ユーザーがマウスを動かしたら,それに応じて画像を入れ替える*4

 それぞれの特徴が見られるのは,地図に関連する情報の表示だ。goo地図では,地図の周囲の施設や天候などの情報を取得して表示する処理にXMLHTTPオブジェクトを利用している。一方のマピオンラボでは,アプリケーション全般を通してXMLHTTPオブジェクトは一切利用していない。

 goo地図では,地図のスクロールが終了したときにXMLHTTPオブジェクトによる通信が発生する(画面2[拡大表示])。現在位置の座標をサーバーに送信して,結果を取得する。

 パケット・キャプチャをしてみたところ,情報はXML形式で送られてきていた。現在地の住所や天候情報サイトのURL,周辺に存在する店舗情報が記述されている。こうして得られた情報を基に,地図の周囲を書き換える。住所の情報は地図の上,店舗情報は地図の右に表示される。画面を見ているだけでは気づきにくいが,地図の下部に並べられたリンクも,随時更新されている。

 関連情報の提示にAjaxを使うと「たとえ関連情報の表示が遅れても,ユーザ ーの操作を中断せずに済む」(NTTレゾナント ポータル事業本部 技術マーケティング部の中野篤氏)。関連情報をダウンロードするのに時間がかかったとしても,ユーザーはそれを待たずに次の操作に移れる。例えば地図のスクロール終了後,関連情報の表示が終わっていなくても次のスクロールを開始できる。

XMLHTTPは利用せずに実現

 マピオンラボでも,スクロール終了時に地図の周囲の関連情報を自動的に更新する(画面3[拡大表示])。XMLHTTPオブジェクトを使わず,JavaScriptによって実現している。

 地図のスクロールが終了したことを検知すると,現在位置の情報を基に,関連情報を取得するためのURLを生成する。これを,関連情報を表示させるフレームに流し込む。具体的には,JavaScriptの「location.replace」メソッドを,該当するフレームに対して実行する(リスト6[拡大表示])。サーバーからはHTMLファイル(またはJavaScriptのソースコード)が送られてくるため,これをフレームに表示させる。その結果,地名や天候,周辺の施設などの情報が自動的に更新される。

 なおサイバーマップ・ジャパンは2005年9月29日に,XMLHTTPオブジェクトを利用した地図アプリケーションも公開した。ブロードバンド環境向けに提供していた地図情報サービス「マピオンBB(http://www.mapion.co.jp/bb/)」の操作性を一新し,地図のスクロールを可能にしたのである。マピオンラボは実験プロジェクトとしての公開だったが,これをベースに正式なサービスとして開始したのがマピオンBBだ。現在地の天候などを取得するために,XML HTTPオブジェクトを利用している。

 マピオンBBでXMLHTTPオブジェクトを採用した大きな理由は,同社が提供しているASPサービスと親和性が高いため。同社は,XML形式で地図情報を取得できるAPIを企業向けに有償で公開している。このAPIをXMLHTTPオブジェクト経由で呼び出せば,そのままXML形式の結果を返せる。「マピオンラボは実験プロジェクトだったため,既存のものを使わず一から開発した。正式サービスの開始に当たっては,既存のサービスとの親和性を考慮した」(サイバーマップ・ジャパンの細川氏)。

 また現時点ではサービスに反映してはいないが,XMLHTTPオブジェクトならではの利点もあるという。location. replaceを利用する方法では,提示する情報を表示できる個所がフレームに限定されてしまう。XMLHTTPオブジェクトならテキスト形式で情報を受け取れるため,ブラウザでそれを自由に加工できる。受け取った内容に応じて,表示方法を変えることも可能になる。

Ajaxには課題もある

 以上見てきたように,Webアプリケーションで直感的な操作性を実現するのに,Ajaxは有効である。同様のアプリケーションの実現手段としては米Macromedia社の「Flash」やJavaアプレットもある。ただFlashは,専用のソフトウェアがインストールされた環境でなければ動作しない。またJavaアプレットは,低スペックのパソコンでは起動時に時間がかかってしまう。JavaScriptならブラウザさえあれば動き,起動もそれほど時間がかからない。

 一方で,従来の方法にはなかった課題もある。まず,プログラムの中身が丸見えになってしまうこと。JavaScriptで記述したプログラムは,誰でもブラウザで簡単に閲覧可能だ。工数をかけて斬新なアプリケーションを開発したとしても,それがどのように実装されているかをすぐに見破られる。だから「Ajaxだけでは,他社のサービスとの差別化は難しい」(サイバーマップ・ジャパンの細川氏)。

 また,従来に比べてサーバーの負荷が高くなる可能性が高い。ユーザーの操作に敏感に反応し,こまめに画面を更新しようとするほど,必然的にサーバーへの問い合わせは増える。NTTレゾナントでは,goo地図の提供を開始してからサーバーを増強したという。

 多くのブラウザで動作保証をするのも大変な作業だ。ブラウザによってHTMLの解釈は若干違うし,JavaScriptはオブジェクト・モデルが多少異なる。しかもそれは「実際に動かしてみないと,どのような挙動をするか分からない。通常のプログラムのように,一つのデバッガで動作確認する方法が通用しない」(NTTレゾナントの小澤氏)。動作保証するすべてのブラウザで実際に動かしてみながらデバッグする必要があり,手間がかかるという。

出典:日経バイト 2005年11月号 60ページより
記事は執筆時の情報に基づいており、現在では異なる場合があります。