今回は楽天トラベルAPIを使い、現在地付近にある泊まれるホテルをリストアップするアプリを作成してみます。

必要なもの

楽天ウェブサービスに登録してアプリIDを発行してください。このアプリIDがあれば楽天が提供する各種ウェブサービスを使えるようになります。

また、GoogleマップのAPIキーも取得してください。

作成するアプリについて

今回作成するアプリは次のような構成になっています。まずアプリを立ち上げるとGoogleマップが表示され、付近のホテル情報がアイコン表示されます。

ホテルをタップすると、その詳細情報が表示されます。

一番下にある予約するボタンをタップすると楽天トラベルのサイトがInAppBrowserで表示されます。

JavaScriptライブラリの追加

今回はMonacaの「Onsen UI V2 JS Minimum」テンプレートをベースにしています。アプリを作ったら、まず必要なJavaScriptライブラリを[JS/CSSコンポーネントの追加と削除]メニューから登録します。今回必要なのは下記のライブラリです。

  • gmap3
    Googleマップ操作用のライブラリです。
  • jQuery (Monaca Version)
    DOM操作、Ajax用です。

HTMLについて

今回のHTMLはとてもシンプルです。 #map に地図を、 #hotel に地図をタップした際のホテル情報を表示します。

また、GoogleマップのAPIキーを登録した後で、下記のようにHTMLをheadタグ内に追加します。”APIKEY”はご自身で取得したものに書き換えてください。

JavaScriptについて

まずはじめに、'RAKUTEN_APP_ID' に、楽天ウェブサービスで取得したアプリIDを設定してください。

各処理について順を追って解説します。まずは現在位置を取得します。

現在位置が取得できたら、その位置情報に基づいてGoogleマップを表示します。

この地図をドラッグした時のイベントとして、楽天トラベルAPIをコールする関数(searchTravelAPI)を実行します。位置情報を引数として渡しています。

searchTravelAPI は初回表示時にも呼び出します。

楽天トラベルAPIの検索

楽天トラベルの検索を行うのは searchTravelAPI という関数になります。URLを生成(後述)し、Ajaxで楽天トラベルAPIを呼び出します。この時、Cloud IDEでも結果が確認できるようにJSONPで実行しています。

ホテル一覧が返ってきたら、viewHotels 関数にて処理します。

URLのビルド

楽天トラベルAPIにアクセスするURLを生成するのは buildUrl 関数になります。チェックインする日付は今日で、チェックアウトする日付は明日を指定します。また、楽天トラベルAPIでは測地系のデフォルトが日本測地系になっていますので、世界測地系を指定しています。

検索結果をGoogleマップ上に表示

楽天トラベルAPIの検索結果をGoogleマップ上に表示するのが viewHotels 関数です。マーカーとして立てていきますが、これはgmap3の機能を使います。titleに配列のインデックスを指定しておき、後でタップした際のデータが分かるようにしておきます。

そしてアイコン画像をタップした際には viewInfo 関数に情報を送ります。

詳細情報を表示

ホテルの詳細情報を表示するのが viewInfo 関数です。ここではHTMLのテンプレートに合わせて情報を埋め込んでいきます。

予約するボタンをタップ

[予約する]ボタンがタップされたら、 data-uri で指定されたURLをInAppBrowserで開きます。


ここまでの処理で完成です。楽天トラベルAPIを呼び出して結果を地図上にマッピングし、さらに詳細情報の表示ができるようになります。

ソースコード全文はmoongift/monaca-rakuten-travel-apiにアップロードしてありますので実装時の参考にしてください。