【Javascript】マッシュアップ1(GMap+YUI+じゃらんAPI)

マッシュアップ1(GMap+YUI+じゃらんAPI)

---

1: 今回のサンプル
2: XMLをツリー用JSONへ

最近、Webに関連して「マッシュアップ」という言葉をよく目にします。以前は、一般的には、音楽のリミックスのスタイルで複数の曲を1つに合成して新しい曲を作るといった手法を指す言葉でした。でも、最近は、「Web上の複数のAPIなどのWebサービスを組み合わせて、新しいWebサービスを創造する」といった意味合いで使われるケースが増えてきています。

今回は、後者の意味のマッシュアップを、先日(2006.6)公開されたばかりのじゃらんＷｅｂサービス／じゃらん宿表示ＡＰＩとバージョン2になったGoogle Maps APIを組み合わせて行ってみました。

ユーザーインターフェイスには、前回準備しておいた、 Google MapsとYUIメニューツリーの組み合わせに、フェイドインやドラッグ、フロートなどの自作のエフェクト(ドラッガブルフロートなDIV)を 少し加工し利用しています。

利用するサービスやライブラリの使用方法等については、各サイトのドキュメントなどをご参照ください。今回利用したものは次の通りです。

今回のマッシュアップ素材リスト

• 【Webサービス】Google Maps API v2(GMaps2)
• 【Webサービス】じゃらんＷｅｂサービス／じゃらん宿表示ＡＰＩ(JWS)
• 【UIライブラリ】Yahoo! User Interface Library(YUI)
• 【UIライブラリ】ドラッガブルフロートなDIV
• 【インジケータ画像】AJAX Activity indicators

( じゃらんＷｅｂサービス／じゃらん宿表示ＡＰＩ(JWS)は、2006.6.5～7.31までの期間、開催される日本で始めてのマッシュアップコンテスト「Sun × Recruit Mash Up Award」へのリクルート社による 提供WebサービスAPI のひとつです。また、今回は、じゃらんのデータをXMLHttpRequest処理していますので、クロスドメインの制約を越えるために、一旦、サーバー側でレスポンスを受信してからクライアントへ渡すようにしています。ちなみに、この手のドメイン越えをサーバーへ実装する時には、ユーザー入力を制限したり、あるいは、Webサービス側のデータも疑ってみるなど、セキュリティについての細心の注意が必要です。)

では、仕上がりを見てみましょう。下図の通り、左にYUIメニューツリー、右にGoogle Mapsが表示され、メニュークリックと連動して、地図が変ります。 ここまでは、前回と同じですが、今回は、読み込まれるツリーデータは、じゃらんＷｅｂサービスエリアコードのXMLから、サンプル用として北海道の部分を取り出したものです。



メニューのエリアホルダをクリックして項目を開きクリックすると、地図は、そのエリアのホテルマーカーを表示してその領域へズームし、同時にホテルリストのペインがフェイドインで現れます。このペインはドラッグが可能で画面スクロールに対しても追随します。↓



地図上のマーカーか、ペインのホテルリストからホテル名をクリックすると、地図がさらに、ホテルへズームして、情報ウインドウへ情報を表示します。

今回は、サンプルですので、詳しい情報は表示していませんが、じゃらんWebサービス　宿表示APIのレスポンスフィールドには、もっと多くの情報が含まれていますし、さらに他のWebサービスのデータベースから別の情報を取り寄せて表示することも可能です。

今回のサンプル

→サンプル

今回のサンプルを開くと、ツリーメニューとGoogle Mapsが表示されます。 ツリーメニューの作り方は前回以前の記事を、 Google Mapsの利用方法はこちらをご参照下さい。

Google Maps APIの最新バージョンがv2になっていますので、今回はv2のクラスGMap2を利用しました。APIキーを書くURLの「&v=1」を「&v=2」に変更することでv2用のクラスが利用できます。v1との違い等の情報は、Google Maps API Version 2 Upgrade Guideをご参照ください。

動作ブラウザ
win
	m1	f1	e6	o8.5	o9
	○	○	○	○	○
mac
	m1	f1	o8.5	o9	s1.2	s2
	○	○	○	○	×	○
Linux
	m1	f1	o8.5	o9	k3
	○	○	○	○	○

(*Operaは、ホテルリストペインのフェイドをしません。v9以降でフェイド可能ですが未調整。)

このように、最近充実しつつあるライブラリやWebサービスを組み合わせることで、まったく新しいオリジナルのサービスを作ることが可能になってきました。

ぜひ、知恵を絞って、世間がアッと驚くような創造的サービスの作成に挑戦してみてください。

ちなみに、複数のWebサービスをマッシュアップする際には、ダイレクトに処理すると相手のサービスのスピードに依存したり、相手がダウンした場合の影響も受けてしまいますから、たとえば、キャッシュやミラーの仕組みを考慮することなども有効かもしれません。

参考までに、今回使っているYUIツリー用のXMLデータを見てみましょう。次ページ