大井宏友です。

「マッシュアップ」といえば「地図」を思い浮かべる方は結構多いと思います。昨年、MTLの前身組織のひとつ「たたみラボ」ではじゃらんやホットペッパー等のAPIとGoogleMapsをマッシュアップするサンプルを作成していましたが、リクルートWEBサービスでJSONP対応してから、JSONPで地図とマッシュアップするサンプルを用意してなかったことに気づいたので、簡単なサンプルを作成しました。

カーセンサーnet APIと地図のマッシュアップ

先日公開したカーセンサーnet WEBサービスを例にして、中古車を地図から探すサンプルです。

カーセンサーnet Webサービスサンプル:中古車を地図から探す

上記サンプルのソースを利用される場合は、ソースコード利用規約に同意の上お使いください。

処理の内容としては、

1. APIにリクエストを投げる。
2. リクエスト結果を地図にプロットする。（コールバック関数をつくって、リクエストを投げるときに指定）

で、（JSONPではない）たたみラボのサンプルでは、実際にAPIをリクエストして結果をJavaScriptに返すProxyをPerl（等のサーバ側スクリプト）で作成して、 Prototype.jsのAjax.Requestを使うことで上記の処理をしていました。

JSONPに対応したAPIでは、サーバ側のProxyスクリプトが不要になり直接APIをたたくことができますので、 サーバ側のスクリプトを開発する手間が丸ごとなくなり、開発効率が向上します。

本サンプルではJSONPのリクエスト方法として、JSONPを実行するためのライブラリとして「jsr_class.js」 を利用しました。本ライブラリについての説明は過去のエントリをご覧ください。また、 これ以外のJSONPの実行方法についてはこちらをご覧ください。

カーセンサー以外のRWSサイトも簡単に試せる!

作っていて気がついたのですが、リクルートWEBサービスのリクエスト･レスポンスの要素名は極力統一を図っています。 位置情報を利用できるRWSは

• リクルート進学ネット
• ホットペッパー
• ホットペッパーbeauty
• エイビーロードnet
• カーセンサーnet

と5種類のAPIがあるのですが、それぞれの緯度経度のリクエスト･レスポンスを比較すると

（緯度・経度の形式はすべてdegree）

このようにほぼ統一されているので、リクエストするAPIのURLを若干変えていただくだけでカーセンサー以外のAPIにも簡単に応用できますので、ぜひお試しください。