• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

地図検索サービスで広がるWebプログラミング

第1回 「Yahoo!地図情報Webサービス」(1)

2007/04/04 日経ソフトウエア
園田 誠(そのだ まこと)

 地図というのはどうしてこうも男心をくすぐるんでしょうか。一通り知り合いの家あたりを見終わると,目に付いた道をまっすぐたどってどこまでいくのか見てみたくなります。そして突き当たると,この国道にも起点や終点があったんだなとか変なことに感動してみたり。プログラムなんかしなくてもこれはこれで楽しめるのかもしれま…いや,ちゃんと記事書きます。ごめんなさい。1965年生まれ。愛知県名古屋市出身のフリーライター。

 2005年頃からインターネットを介した各種Webサービスの公開,機能競争が加速してきています。GoogleやYahoo!といった検索ポータルから始まったこのムーブメントに,Amazonのような大手ショップ・サイトや,YouTubeのような動画データベース・サイトも加わり,巨大なデータベースを持つサイトならWebサービスを提供しているのが当然と言わんばかりの勢いで広がりを見せています。

 サイト/商品検索機能の提供が一段落したところで,最近は(おそらくもともと彼らの本業ではなかったであろう)地図検索のWebサービスがにわかに注目を集めています。

 この連載では,地図検索Webサービスの中から,Yahoo!,Virtual Earth(マイクロソフト),Googleの三つのWebサービスを順に取り上げます。それぞれの特徴や機能を確認し,実際にどんなプログラムを作れるのかを検証します。

 そしてもう一つ,私が感じている大きな疑問も合わせて考えてみたいと思います。すなわち「地図サービスの使いどころはどこにあるのか」「誰がどんな目的で使っているのだろうか」という疑問です。

 個人サイトで自分の住所を公開する人はほとんどいません。かといって企業サイトなどで会社案内の地図に使われているかといえば,そうでもありません。たいていはドローソフトで描き起こされた画像が貼られています。とすれば,公開されているサービスは誰のためのもので,どんなところで地図検索サービスが活用されているのでしょうか。

 こうしたやや懐疑的なスタンスから出発していきますので,私と同様に首を傾げている一部の読者の方々に対して,そして私自身に対して,連載を終えたときに疑問の答えが出ているのかどうかも楽しみです。

WebサービスやAPIって何ですか

 実際に地図検索サービスでプログラムを開始する前に,ざっと用語を整理しておきます。

 Webサービスとは,情報を持つサイト(サーバー)が,決められた手順と書式で問い合わせてきた来訪者(クライアント)に対して,自身が持っている情報を提供する仕組みです。このやり取りをインターネットを介して行うのが特徴です。

 一番わかりやすい例として,サイト検索のWebサービスがあります。自分のサイトにテキスト入力欄とボタンを設置し,そこに検索したい語句を入力すると,GoogleやYahoo!が検索結果を返してくれます。検索ポータルのトップページと同等の機能を自分のサイトに付けられるわけです。

 ただし,テキストの入力欄/ボタン操作の処理や,サーバーから帰ってきた検索結果を表示する処理は,クライアント側が構築(プログラミング)しなくてはなりません。単純に検索するだけならば,直接Yahoo!やGoogleに行っても同じように思えます。しかし,Webサービスとして利用する場合は,初期設定によって検索対象を絞り込むといったオプションを細かく指定できるなどの特徴もあります。

 いまの例は端的でわかりやすいものですが,やや誤解を与えかねない点があります。実はWebサービスは,自分が作ったWebページやブログといったブラウザ内からだけではなく,インターネットと自由に通信できるのであれば,Windows/Linux/MacOSなどの上で動く実行ファイル(EXEファイル)からも利用できます。

 あなたがもしプログラマで,Excelのような表計算ソフトを作っているとしたら,そしてそのソフトがインターネットと通信できるのであれば(意味があるかどうかは別にして)その表計算ソフトからWebサービスを通じてサイト検索を行えるのです。

図1●Webサービスの概念図
図1●Webサービスの概念図。例えば,GoogleやYahoo!が持っている機能を,自分のサイトにコンテンツとして埋め込んだり,Windows上のアプリケーションからも利用できる。手元に膨大なデータベースを持つことなく,手軽に大手サイトの機能を間借りするといったイメージになる

 この連載で,API(Application Program Interface)またはSDK(Software Development Kit)と呼ばれるものは,Webサービスを利用する際に必要とされる通信のコア・ユニット(それを説明したドキュメントを含む)です。

 Webサービスを利用するには,ある決められた手順を踏む必要があり,その決まりごとがAPIないしSDKと呼ばれます。呼称は各社によって異なりますが,WebサービスのAPI/SDKは,WindowsアプリケーションなどのOSに依存したプログラムを作るためのSDKなどと比べると,大変シンプルです。そのため,プログラミングを始めたばかりという方でも,それほど苦労することなく利用できると思います。

 また,地図系Webサービスに限らず,多くのWebサービスは,こちらからの問い合わせに対してXMLで返答します。XMLは汎用性の高いデータ記述言語で,開発言語に依存しにくいという特徴があります。現在の開発言語製品はほとんどがXMLをサポートしています。

 Webサービスを利用するプログラムは,サービス元から送り返されたXMLをプログラムにとって都合のいい形に整形して表示することになります。

Yahoo!地図情報の基本技

 では実際の地図サービスを見ていきましょう。Yahoo!からはじめます。

 Yahoo!が提供しているWebサービスは「Yahoo!デベロッパーネットワーク」ですべての情報が閲覧できるようになっています。日本語ドキュメントになっているのでわかりやすいのも特徴です。

 Yahoo!デベロッパーネットワークのメニューを見ると,サイト検索やオークション検索などと並んで「Yahoo!地図情報」というサービスがあることに気がつきます。機能追加が随時行われていますので,本稿で説明したことでも必ず該当ページを読んで詳細を確認してください。原稿執筆時点のYahoo!地図情報サービスはVersion1です。

 Yahoo!地図情報を含むYahoo!提供のWebサービスを利用するには,「アプリケーションID」という固有コードを取得する必要があります。アプリケーションIDを取得するにはYahoo! JAPAN ID(Yahoo!メールなどの各種サービスを利用するためのID)を取得する必要があります。

 すでにあなたがYahoo!メール,Yahoo!メッセンジャー,Yahoo!オークションを利用しているのであればYahoo! JAPAN IDはそのまま使えます。もしYahoo! JAPAN IDを持っていない場合には新規登録してください。Yahoo!のトップページから新規登録ができます。

 Yahoo! JAPAN IDを取得したら,デベロッパーネットワークにいってログインします。ログイン後に「アプリケーションIDの登録」というリンクからアプリケーションIDを登録します。ID登録までの流れについては,プログラムそのものとは関係がないので,ここでの解説は省略します。Yahoo!デベロッパーネットワークの各画面説明を参照してください。以後は登録が完了して利用準備ができているものとして進めます。

■地図操作・アイコン表示

 Yahoo!地図情報では,大きく分けて二つのサービスが提供されています。一つは「地図操作・アイコン表示」であり,もう一つは「ローカルサーチ」です。

 「地図操作・アイコン表示」から見ていきましょう。これは画面上に地図を表示する機能です。機能そのものはJavaScriptで提供され,HTMLドキュメント上に表示されます。サンプル・コードはYahoo!に例示されているもの以上でも以下でもなくて,それがすべてという感じです(リスト1)。


<html>
<head>
<script type="text/javascript"
  src="http://api.map.yahoo.co.jp/MapsService/js/V1/?appid=xxxxxxxx">
</script>
<script type="text/javascript">
  window.onload=function(){
  _map = new YahooMapsCtrl(
  "map", "35.40.39.980,139.46.13.730", 2, YMapMode.MAP);
}
</script>
<title>Yahoo!地図情報 サンプル</title>
</head>
<body>
<div id="map" style="height: 600px; width: 600px"></div>
</body>
</html>
リスト1●Yahoo!地図情報を使った典型的なサンプル。xxxxxxxxには取得したアプリケーションIDを記述する

 HTMLドキュメントですが,WebサーバーにFTPでアップロードして…といった手間は不要です。map.htmlなどの名前でデスクトップに保存し,ダブルクリックで起動するだけで東京駅を中心とした地図が出ます(当然,インターネットに接続できる環境であることが条件です)。

 表示された地図は,マウスのホイールまたは地図左上の「+」「-」ボタンで縮尺を変更でき,ドラッグすると表示部分を自由に移動できます。右上の「写真」ボタンを押せば航空写真に,「地図」ボタンを押せば再び地図画面に表示形態を切り替えることもできます。

図2●リスト1のサンプルを実行した地図表示画面
図2●リスト1のサンプルを実行した地図表示画面

 この機能は,Yahoo!のサーバーにあるJavaScriptによって実現しています。移動や縮尺変更などを行うと,このHTMLはYahoo!のサーバーと通信を行い,必要な部分の画像データをYahoo!サーバーから引き出します。サーバーと通信しているJavaScriptは,リスト1の3行目で読み込まれています。

<script type="text/javascript"
  src="http://api.map.yahoo.co.jp/MapsService/js/V1/?appid=xxxxxxxx">

 この呼び出しで,Yahoo!サーバーにあるJavaScriptをHTML内に取り込んでいるわけです。取り込まれたJavaScriptのソースは見られません。いわばブラックボックスになっています。私たちができるのは,取り込んだJavaScriptに対して,どこの地図をどれくらいの縮尺で表示させるのかといったオプションの指定だけです。

 表示処理は二つのブロックに分かれます。一つは下記のJavaScriptの部分です。

<script type="text/javascript">
  window.onload=function(){
  _map = new YahooMapsCtrl(
  "map", "35.40.39.980,139.46.13.730", 2, YMapMode.MAP);
}
</script>

 どうやらこのJavaScriptは,YahooMapsCtrlという名前のオブジェクトを持っているようです。そのオブジェクトの新しいインスタンスを_mapという名前で作っています。_mapの部分は,自由な名前を付けてかまいません。どんな名前を使っても以後の動作に支障は出ません。

 YahooMapsCtrlの後のカッコの中が各種の指定です。最初の引数である「map」を先に説明します。ここを理解すると表示の仕組みを把握できます。mapという指定は,リスト1のもう少し下にある以下のHTMLタグにかかわってきます。

<div id="map" style="height: 600px; width: 600px"></div>

 divタグに「id="map"」という指定があります。これでわかる通り,YahooMapsCtrlの先頭の引数と,divのid属性は同一名にしなければなりません。この二つが合致していないと地図は表示されません。YahooMapsCtrlで引き出された地図画像を表示する器が,divの部分というわけです。

 YahooMapsCtrlの二つ目の引数である「35.40.39.980,139.46.13.730」は,起動時に画面中央に表示する場所の緯度と経度です。「,」(カンマ)の前が緯度,後ろが経度になります。書式として以下の三つのうちから好きなものが選べます。

度.分.秒形式(12.34.56.180, 132.34.56.180)
度/分/秒形式(12/34/56.180, 132/34/56.180)
度形式(12.345678, 131.234567)

 三つ目の引数(ここでは「2」)は,縮尺を指定するオプションです。1から10までの数値を指定できます。数字が大きくなるほど広域地図になります。

 最後の引数(「YMapMode.MAP」の部分)は,初期状態で地図画面モードにするか,航空写真モードにするかの指定です。航空写真モードにしたい場合は「YMapMode.AERO」と書きます。

図3●写真モードにした場合の表示
図3●写真モードにした場合の表示

 ここで素朴な疑問が出てきます。例えば,Yahoo!地図情報を使って自分の自宅や会社の地図を作ろうというときに,自宅や会社の住所はわかっても,緯度経度を知っている人はまずいません。ではどうやって緯度経度を調べればいいのかということになります。

 結論から言うと,何らかの地図ソフトを持っている場合は,調べたい場所に移動し,地図ソフトがどこかに情報として表示している緯度経度を見るか,オンラインならば「Yahoo!地図情報」(こちらは開発用ではなく一般ユーザー向けサービス)などから任意の場所を探して,URLの引数などを見てあたりをつけるといった手間をかけなくてはなりません。

 現実に地図を参考に現地におもむくケースを考えても,頼りになるのは住所であって緯度経度ではありません。住所からの検索という方法が提供されないと,地図サービスは一見便利に見えるけれども,使いやすいとは言い難いでしょう。

ここから先はITpro会員(無料)の登録が必要です。

次ページ ■地図から緯度と経度を得るYahoo!地図情報の...
  • 1
  • 2

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

ネットワーク/通信サービス

セキュリティ

もっと見る