試してわかる『Afrous』の可能性 Vol.4 - カスタムデータソースの作成(2)

試してわかる『Afrous』の可能性

Vol.1 - ビジネス環境でも使えるマッシュアッププラットフォーム
Vol.2 - マッシュアップダッシュボード画面の作成
Vol.3 - カスタムデータソースの作成(1)

ジオコーディングサービスを追加する

前回作成したデータソースは、ホットペッパー.jpのグルメサーチAPIを利用して、緯度経度情報を指定して周辺の店舗を検索して返すものでした。

今回のチュートリアルの最終目標は、「企業情報から関連した横断検索を行うダッシュボード」を作成することです。すでに「Googleスプレッドシート」内に企業情報(取引先)のリストは存在し、その中には住所情報もあるのですが、残念ながら位置情報として緯度経度情報は含まれていません。そのため、前回作成したデータソースにそのままではパラメータとして渡すことができません。

そのため、ここでは「ジオコーディング」とよばれるWebサービスを利用して住所情報を緯度経度情報に変換することを試みます。今回はジオコーディングサービスとして、同じくJSONPインタフェースを有する「LocoSticker Geocode API」を利用します。

『Afrous』にアクセスしAfrous Dashboardを起動します。JSONP Webサービスのウィザードを起動し、上記Webページに記載されているAPIリファレンスに従ってJSONPサービスのURLおよびパラメータを以下のように設定します(図1)。

JSONPサービスのURL	http://api.locosticker.jp/v1/geocode/?type=a
コールバックパラメータの名前	―
追加するパラメータ
参照変数名	text
表示ラベル	住所
データ型	string

パラメータを設定したら＜次へ＞ボタンを押し、プレビュー画面に移動します(図2)。ここで実際に仮の住所をパラメータに設定し、ジオコーディングを行います。Webサービスからデータが返されることを確認できたら、ツリーを展開して「result.results」ノードをクリックし、＜次へ＞ボタンを押します。

最後に、このデータソースのタイトルを「ジオコーディング」と設定し、完了ボタンを押します。

ウィザード終了後、カスタムデータソースに「ジオコーディング」が作成されているのが確認できたら、これをグリッド表ウィジットとしてダッシュボードに追加します。ウィジットの編集画面では、第2回で学んだように、「Googleスプレッドシート」ウィジットの行をクリックして、ポップアップした情報の「住所」プロパティをドラッグ&ドロップして関連付けを行います(図3)。グリッドに表示する列として「lat」および「lng」プロパティを選択し、＜OK＞ボタンを押します。緯度経度がグリッド表で表示され、「Googleスプレッドシート」ウィジットをクリックするとその住所にしたがって緯度経度が更新されるのが確認できます。

今度はこの緯度経度情報をそのまま第3回で作成した「ホットペッパー 周辺グルメサーチ」ウィジットのパラメータとして設定します。先ほどと同様に、周辺グルメサーチウィジットの編集画面を開き、ジオコーディングウィジットのレコードをクリックし、ポップアップした情報から緯度(lat)経度(lng)の情報をドラッグ&ドロップします(図4)。

これで、クリックされた企業の住所を元に、周辺のグルメスポットをタイル上に表示することができるようになりました。実際には住所から緯度経度を取得するジオコーディングウィジットと緯度経度からグルメスポットを検索するホットペッパーウィジットが連動して動いている形になります。

最寄り駅情報を追加する

せっかくなのでもうひとつ、位置情報を利用したデータソースを追加してみましょう。「HeartRails Express 最寄駅情報取得 API」です。

先ほどと同様に、JSONP Webサービスの追加ウィザードを起動し、上記Webページに記載されているAPIリファレンスに従ってJSONPサービスのURLおよびパラメータを以下のように設定します(図5)

JSONPサービスのURL	http://express.heartrails.com/api/json?method=getStations
コールバックパラメータの名前	jsonp
追加するパラメータ
参照変数名	x	y
表示ラベル	経度	緯度
データ型	float	float

なお、HeartRails Express APIの場合、JSONPのコールバック関数名がデフォルトとは異なりますので、コールバックパラメータの名前を忘れずに指定します。

パラメータを設定したら＜次へ＞ボタンを押し、プレビュー画面に移動します(図6)。ここで実際に仮の緯度経度情報をパラメータに設定し、最寄り駅検索を行います。Webサービスからデータが返されることを確認できたら、ツリーを展開して「result.response.station」ノードをクリックし、＜次へ＞ボタンを押します。

最後に、このデータソースのタイトルを「最寄り駅検索」と設定し、＜完了＞ボタンを押してウィザードを終了します。

カスタムデータソースに「最寄り駅情報」データソースが追加されていることを確認したら、これをウィジットとしてダッシュボードに追加しますが、ここでは「レコード情報」ウィジットとして追加することにします。「レコード情報」ウィジットは、検索結果から先頭一件のみのレコード情報をウィジット内に表示するウィジットです。

ウィジットの編集画面が表示され、パラメータとして緯度および経度情報を設定するように促されるので、先ほどと同様にジオコーディングウィジットのレコードをクリックし、ポップアップした情報から緯度(lat)経度(lng)の情報をパラメータフィールドにドラッグ&ドロップします(図7)。

パラメータの設定を行い＜OK＞ボタンを押すと、図8のような画面が現れます。画面左側にあるプロパティのソースから駅名(name)、路線名(line)、距離(distance)プロパティを選択し、それぞれ右側の領域にドラッグ&ドロップして追加します。なお、プロパティのヘッダ名はドロップしたノードの名前が自動的にセットされますが、選択されたプロパティのノードをダブルクリックすることで自分でヘッダを設定することもできます(図9)。

最終的に図10のような形で、クリックしたレコードの住所情報に応じて最寄り駅検索と周辺のグルメスポットが検索できるようになるのが確認できれば成功です。

次回は、イントラネット内のCSVファイルの統合手順について解説します。

⇒第5回 - イントラネット内のCSVファイルの統合

著者プロフィール:冨田慎一

2000年 東京大学大学院 理学系研究科 情報科学専攻 修士課程修了。大学院卒業後、日本オラクル株式会社に入社。おもにアプリケーションサーバ製品のコンサルティング、および新規ビジネスの研究・開発に携わる。2006年、株式会社セールスフォース・ドットコムに入社。同社在籍中の2007年にIPA未踏ソフトウェア創造事業に採択される。プロジェクト名は「宣言的アプローチによるJavaScriptマッシュアップエンジンの開発」。2008年1月に株式会社マッシュマトリックスを設立し、代表取締役に就任。ブログは「snippets from shinichitomita's journal」(技術系)、「shinichitomita @ mm」(会社系)。