いよいよ AJAX のパート、Using XML and Asynchronous RPC (”AJAX”) with Maps に入ります。
AJAX AJAX と最近良く言及されていますが AJAX という名前が付けられてからまだ半年も経っていない状況なので、まだ AJAX が何なのか知らない方が大半だと思います。AJAX というのはソフトウェアやサービスの固有の名前(たとえば Mozilla とか Yahoo! みたいな)ではなく、一連の方法に対する通称です。AJAX 的なモノの例として良く挙げられるのが Google Maps と Google Suggest ですが、これらは必要になるデータを一度に全てブラウザ側にロードするのではなく、必要になるタイミングで必要なパーツだけを都度バックグラウンドでロードするという方法で共通しています。
たとえば Google Maps で一度に必要なデータを全部ロードしようとすると地球の全表面の地図画像をロードする破目になってしまいますが、そうではなくいま表示している地図のまわりの地図だけを必要なタイミングで用意しているから、あんな風にグリグリとどこまでも動かすことができて、なおかつ軽快に感じられるのです。これが AJAX の特徴で、AJAX を活用することで元々制約の多い web のユーザーインタフェイスの可能性が大きく開けます。
振り子打法と呼び始めたのがイチロー本人ではないように、AJAX と呼び始めたのは Google ではありません。すでに存在していた Google Maps や Google Suggest に共通する特徴を指摘して AJAX (Asynchronous JavaScript + XML) と呼び始めたのは、Jesse James Garrett という人によるこの記事 (Ajax: A New Approach to Web Applications) が最初です。
記事に掲載されている次の画に見られるように、実装としての AJAX の特徴はダイナミックにユーザの状態を認識してダイナミックにサーバへ要求を送る、”AJAX エンジン” としての JavaScript コードによる中継処理にありますが、
その AJAX エンジンの核となるのがブラウザ － サーバ間での XML データの自動のやり取りを実現する XMLHttpRequest クラスのオブジェクトです。XMLHttpRequest の詳しい使い方は Google Maps API のドキュメントには記載がありませんが、 developer.apple.com の記事が参考になります。実用に即した解説なら XML.com の記事も参考になります。私自身まだよく読みこなしていないので、後日「素人が XMLHttpRequest に挑戦するコーナー」でも作りながらだらだら書いてみようと思ってます。
さて、本日はこの辺で。
ドキュメントのサンプルをアレンジして、先日の関ヶ原のデータを別ファイル(data.xml)に保存して XMLHttpRequest (Google Maps API では GXmlHttp.create() で生成する) で読み込むものを作ってみました(examples-13)。
XML であれば構造は自由にして構わないようなので、こんな感じにしています:
<?xml version="1.0" encoding="EUC-JP" ?>
<positions>
<position icon="red_l" lng="136.491164" lat="35.363471">
徳川家康
</position>
<position icon="blue_r" lng="136.450308" lat="35.374285">
石田三成
</position>
...
</positions>
ちゃんと一行目の XML 宣言でエンコードを指定しておかないと文字化けしてしまうので注意。XML から必要な情報を取得するための DOM (getAttribute とか getElementsByTagName とか) については W3C の仕様書を見ながらやってますが、日本語でまとめてあるいい資料どっかにないですかね?
