|
Virtual Earthは，マイクロソフトが提供する地図APIサービスです。サービス開始は意外に古く，2005年7月にベータ版が公開されました。
公開から2年経過していろいろな機能が追加されています。前回まで試してみたYahoo!の地図サービスと比較すると，提供されるAPIの種類が豊富なのでカスタマイズしやすいという特徴を持っています（もちろんYahoo!のサービスは公開からまだ日が浅い点は考慮すべきで，評価はあくまでも原稿執筆時点のものです）。
地図APIのような無料サービスで各社が切磋琢磨してくれることは，プログラマにとってもユーザーにとってもありがたいことです。
マイクロソフトのWebサービスを総称して「Windows Live」といいます。Windows LiveにはVirtual Earthのほかに，MSNサーチ（Webサイト検索），MSNメッセンジャー，MSNスペース（ブログシステム）などが含まれます。Windows Liveの開発情報は，Windows Live Developer Centerというページで提供されています。
残念なことにVirtual Earthの情報は執筆時点では和訳されておらず，英語ページへのリンクになっています。2年というサービス公開からの経過時間を考えると，ドキュメント類が日本語で参照できないのはちょっと残念です。
一般ユーザーの視点で“任意の場所の地図を表示できる”という機能だけを見れば，Yahoo!もマイクロソフトもGoogleも大差はありません。地図が見やすいか，航空写真がきれいかといったところが優劣判断になるでしょう。しかし，例えば，自分のホームページで地図表示機能を使いたいといった場合には，どこまでカスタマイズができるかということが大きな評価ポイントになります。
ともあれ，Virtual Earthをユーザー視点で体験してみたい場合は，Live Searchのページをのぞいてみてください。
ホイールでズームできたり，マウスのドラッグでずりずりと地図を動かせる操作感は，各社の地図APIで共通です(図1)。
| |
|
図1●一般ユーザー向けLive Searchのページ。航空写真と地図の「ハイブリッド」表示例 [画像のクリックで拡大表示] |
ベーシックな地図を表示する
まずは単純に地図を表示するHTMLを作成してみます。Virtual Earthも，Yahoo!のサービスと同様にJavaScript（マイクロソフトはJScriptと呼んでいます）で動作します。マイクロソフトのサービスなのでInternet Explorer（IE）限定ではないかという懸念がありますが，ほとんどの機能はFirefoxのような他社ブラウザでも動作します。
なお，3D表示などの一部機能はIE限定で，さらに日本語Windowsではまだうまく動かない部分も残っています。このあたりがいまだにベータ表記がとれない理由なのかもしれません。エラーになってしまう部分は何時間格闘してもエラーのままなので，素直に日本語対応するのを待ってください。
最初のサンプルを作るのと同時に，リファレンスの見方も勉強しておきましょう。まず「Virtual Earth Interactive SDK」というページを表示して，地図が完全に描画されたら，地図の上にある「Source Code」タブをクリックしてください（図2）。
| |
|
図2●Virtual Earth Interactive SDKの使い方。左のメニューで機能選択して地図確認後SourceタブをクリックしてHTMLソースを見るというのが基本 [画像のクリックで拡大表示] |
このVirtual Earth Interactive SDKは，左のメニューで機能を選択すると地図部分が該当する機能を取り込んだものに変わります。機能がどのように実装されているかは「Source Code」タブをクリックすることで，直接HTMLファイルとして見ることができます。HTML中のJavaScriptの関数や引数の詳細は「Reference」タブに書かれています。
ではベーシックな地図表示サンプルを作ってみます（リスト1）。メモ帳などのテキスト・エディタで打ち込んで，msn1.htmlという名前でデスクトップに保存してください。
|
| リスト1●ベーシックな地図を表示するサンプル |
5行目の<meta>の最後にcharset=utf-8という指定があります。文字コードをUTF-8でという指定です。保存時に文字コードを指定できるエディタの場合は，UTF-8を選択してください（図3）。地図APIに限らず，昨今のWebサービスの多くはUTF-8でのサービス提供がほとんどです。UTF-8でHTMLを作成するくせをつけておくと良いでしょう。
| |
|
図3●保存時の文字コードはUTF-8を指定する。この図はWindows Vistaのメモ帳の保存オプション [画像のクリックで拡大表示] |
保存したHTMLをダブルクリックして開くと地図が表示されます。デフォルトのWindowsとIEのセキュリティ設定では，HTMLを開く際にIEがセキュリティ警告を出します。このサンプルは害意のない安全なものですから「ブロックされているコンテンツを許可」してください（図4）。なおプロバイダなどのホームページ・エリアへ転送した場合には，IEデフォルトのセキュリティ・レベル設定でもこの警告は出ません。
| |
|
図4●セキュリティ警告が出るが，このサンプルは安全なので許可する [画像のクリックで拡大表示] |
ブラウザで地図が表示されることを確認してください（図5）。Live Searchと同様にズームやドラッグによる表示領域の移動ができます。単純に地図を表示するというだけであれば，これだけで完了です。
|
|
| 図5●サンプルの実行画面（特に座標指定はしていないので，地図に表示される地域はこれと同じとは限らない） |
Yahoo!では地図APIを利用するにはユーザー登録をしてアプリケーションIDを取得するというステップが必要でした。Virtual Earthではこうした登録は必要ありません。誰でもが自由にサービスを呼び出して利用できます。サンプル（リスト1）の中にも個別識別用のIDなどは存在しません。
Virtual Earthの仕組み
HTMLの内容が簡単なうちに，Virtual Earthがどういう仕組みで地図を表示しているのかを見ておきます。Yahoo!の地図APIもそうでしたが，地図を描画したり，ドラッグでの移動やホイールでのズームを制御している部分はブラックボックスになっています。HTMLの冒頭部，<head>の中に以下の記述があります。
<script
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5">
</script>
ここでロード（呼び出し）されているものがVirtual Earthの本体です。JavaScriptとして呼び出されていますが，実体は，URL（ファイル名拡張子が.ashx）からもわかるように，マイクロソフト側のサーバーサイド・プログラムです。こちらからの何らかの情報を取得して，適切に生成されたJavaScriptのコードを返信してきているようです。どんなコードが返ってくるのかは，私たちは見ることができません。
その次の<script>はいったん無視して，<body onload="GetMap();">という表記を見てください。これはHTMLが呼び出されたら（onload＝），GetMap()という関数を実行しろという記述です。このサンプルは，ページが表示されたというアクションが起きると，関数を呼んで地図を出せという作りになっているわけですね。
「ページが表示されたら」のような動作のきっかけとなるものを“イベント”と呼びます。<body>に書かれている内容をプログラマ的に表現するなら「OnLoadイベントでGetMap関数を実行」と言います。
そのGetMap()なる関数はどこにあるのかというと，HTMLをちょっと上にさかのぼって二つ目の<script>を見ます。
<script>
var map = null;
function GetMap(){
map = new VEMap('myMap');
map.LoadMap();
}
</script>var map = null;は，mapという器を空で用意しろという命令です。この命令そのものはGetMap()とは関係ありません。ページを読み込むと勝手に実行されます。ここで用意しているmapのことを変数といいます。用意されたmapという空の器に対して，地図を盛り込んでいくのがGetMap()関数の仕事です。
GetMapの中を見てみます。map = new VEMap('myMap');という命令で，mapの中に何かを盛り込んでいます。この命令は，VEMapという母体になるもの（オブジェクト）をmyMapという内部名で作って，それをmapという器に入れておけという処理です。VEMapという設計図から実際に何かを作れという命令という言い方もできます。こうしてできあがったVEMapの実体であるmapをインスタンスといいます。
そして最後にmap.LoadMap();です。LoadMapというのはメソッドと呼ばれる命令で，mapとして生成されたものをブラウザ上に表示しろという意味になります。表示ってどこに？その答えは<body>の中に唯一書かれている内容である<div>です。
<div id='myMap' style="position:relative; width:400px; height:400px;">
</div>
divには，id='myMap'という指定があります。myMapという単語がGetMap関数の中で使われていたことを思い出してください。VEMapのカッコ内で指定された名前がHTML上で地図を表示する部分のid指定になります。地図APIサービスにおいてid指定はとても重要な意味を持ちます。
やや蛇足ですが，div内のstyle=以降の指定は，地図のサイズと表示位置をCSS（スタイルシート）で指定するもので，特にプログラムとは関係ありません。
スクリプトとHTMLがかなり密接に結びついている点に注意が必要です。大元になる部分がブラックボックスになっているため，サンプルを見る場合は，HTMLとそこで呼んでいるJavaScriptの間にある相互の関係の多くを類推する必要があります。ポイントは，バラバラにでてくる単語の中から共通する単語を見つけ出して，それが大体どこで最初に宣言されているのか，最終的にどこに出てくるのかを把握することです。
このサンプルではmapとmyMapという二つの単語がキーになります。仮にmapというのを一カ所chizuに変更したら，すべてのmapの部分を直さないとつながりが断たれてしまい，サンプルは動かなくなるというわけです。
