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

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

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

カスタムデータソース

前回まで、ダッシュボードにウィジットを追加し作成する方法を学びました。『Afrous』にはあらかじめ主要なWebサービス(GoogleスプレッドシートやGoogleニュース検索など)がサンプルデータソースとして組み込まれていますが、その他のWebサービスもカスタムデータソースとして追加することができます。

現在AfrousではXML、CSV形式のリソース、およびJSONP形式のWebサービスに対応しています。今回はJSONP Webサービスをカスタムデータソースとして組み込む手順を学びます。

JSONPとは、JSON形式で記述されたデータを、Webブラウザからのスクリプトタグ読み込みで直接ロードできるように設計されたWebサービスのインタフェースです。サーバ側のプログラムが必要ないため、気軽にWebページにマッシュアップしやすいといった特徴があります。詳しい解説は譲りますが、近年、Google、Yahooなどをはじめとして、さまざまなWebサービスAPIがJSONP形式のインタフェースに対応してきています。

「ホットペッパー.jp API」をJSONP形式で追加する

リクルートが提供する「リクルートWEBサービス」内の「ホットペッパー.jp」は、グルメ・クーポン情報サイト「ホットペッパー.jp」が提供する日本全国の飲食店情報にアクセスすることができるAPIです。こちらのAPIもJSONPに対応しています。今回はここから「グルメサーチAPI」を利用します。

まず、APIを利用するためのAPIキーを取得するためのアカウント登録を行う必要があります。アカウント登録後メールでAPIキーが送信されますので、以降これを利用します。

カスタムのデータソースを作成するには、引き出しパネルの中の「データソース」セクションの上部にある＜追加＞ボタンを押して、ウィザードを起動します(図1)。

すると図2のようなダイアログが現れますが、ここでウィザードの種類をマッシュアップ対象のWebサービスの提供形式に従って選択します。ここでは「JSONPデータソース」を選択します。

図3は、ウィザード起動後に現れる画面です。ここでJSONP形式のWebサービスのエンドポイントのURLおよびパラメータを入力します。ホットペッパー.jpのグルメーサーチAPIの仕様はリファレンスページに記載がありますが、URLパラメータとして検索条件を指定することができます。ここでは、緯度経度による周辺店舗検索ができるようにパラメータを設定することにします。

JSONPサービスのURLには、リファレンスで指定されているグルメサーチのエンドポイントURLを含めて指定します。ここで先ほど取得したアプリケーションキーを含める形で、以下のように記述します。

http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=<api_key>&format=jsonp

コールバックパラメータの名前には、JSONPサービスのコールバックパラメータ名を指定しますが、ホットペッパーAPIの場合は空欄でかまいません(デフォルトの「callback」が利用されます)。

その他、動的に変更するパラメータを設定します。ここでは、位置情報として緯度(lat)および経度(lng)パラメータを用意します。ウィザード内の＜パラメータを追加＞ボタンを押してパラメータを追加します(下記の表参照)。

参照変数名	lat	lng
表示ラベル	緯度	経度
データ型	float	float

パラメータを設定したら＜次へ＞ボタンを押すと、図4の画面が現れます。ここでは実際にパラメータを設定してリクエストを投げ、結果をプレビューすることができます。緯度および経度に仮にパラメータを設定し(例えばそれぞれ「34.67」「135.52」)、＜送信＞ボタンを押すと、レスポンスデータが右側の領域にツリー上に表示されます。このツリーを展開し、ノードの中から結果として取り出す対象のルートとなるノードをクリックで指定し、＜次へ＞ボタンを押します(この場合出力ルートのパスは「result.results.shop」)。

最後にタイトルおよびその他のメタデータ情報を記述する画面(図5)が現れるので、タイトルに「ホットペッパー 周辺グルメサーチ」と入力し、＜完了＞ボタンを押します。

ウィザード終了後、データソースセクションのカスタムデータソースの中に先ほど指定したタイトルのデータソースが新たに表示されているのが確認できます(図6)。これを第2回で学んだのと同様にダッシュボードにドラッグ&ドロップし、ウィジットとして追加します。ウィジットの種類は「画像タイル」を選びます。

ウィジットの編集画面を開くと、ウィジットのパラメータとして、ウィザードで設定した「緯度」および「経度」パラメータが指定できるのが確認できます。ここに適切な緯度経度値を仮に設定して＜OK＞ボタンを押すと、図7のような画面が表示されます。画面左側には検索結果のレコードのプロパティがツリーノードとして表示されており、画面右側にはタイル表示のためのプロパティ(画像のURLおよびキャプション値)を設定するフィールドが表示されています。ここでは、画面左側から「photo.pc.s」ノードを選択し、右側の「画像のURL」フィールドにドラッグ&ドロップします。同様に店舗名を含む「name」ノードを「見出し」フィールドにドロップします。

再び＜OK＞ボタンを押すと、図8のようにグルメサーチの検索結果が画像としてタイル表示されるのが確認できます。

次回は、このウィジットをGoogleスプレッドシートに含まれている企業情報に関連づけて、取引先の住所情報から自動的に周辺のグルメ情報を検索表示するように設定します。

⇒第4回 - カスタムデータソースの作成(2)

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

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