Monaca×ホットペッパーAPI。ーモナカプレス技術情報Monaca×ホットペッパーAPI。レストラン情報を検索するアプリを作るMonaca×ホットペッパーAPI。APIを使うと個人や一企業での収集が難しいデータが簡単に手に入ります。APIとして公開しているものもあります。APIを組み合わせることをマッシュアップと言います)。APIの一つ、ホットペッパーAPIを使ったアプリの開発方法について紹介します。APIは、利用に際して認証が必要となっています。APIをコールされてサーバに負荷がかかったり、他の利用者に迷惑をかける可能性があるからです。ホットペッパーAPIも認証が必要な仕組みになっており、各自に配布されるAPIキーでの認証が必要となります。リクルートWEBサービスより取得してください。今回は位置情報を使って付近のレストラン情報を収集するアプリを作ってみたいと思います。イメージでは次のようになります。トップページがあります。レストラン取得ボタンを押すと、ホットペッパーAPIからレストラン情報を取得して一覧表示します。一覧の中から店舗名をタップするとレストランの詳細(今回は住所だけですが)を表示します。それでは作っていきましょう。Navigation」テンプレートをベースにしています。画面遷移(今回は一覧画面と詳細画面)の伴うアプリでは、このテンプレートをベースにするのが良いでしょう。CordovaプラグインとしてGeolocationをインストールします。このプラグインは標準で提供されていますので誰でもインストール可能です。APIのGeolocationを使うこともできますが、位置情報を取得する度に許可を求める確認ダイアログが出てしまいます。Cordovaプラグインであれば一度許可すれば次からはダイアログが出ません。追加でjQueryをインストールしたら、準備は完了です。HTMLについてまず画面の実装について解説します。page要素は最初に表示するページの名前です。page="list.html"></ons-navigator>一覧画面(list.html)は次のようになります。id="shops"></div></ons-list></div></ons-page></ons-template>最後に一覧からタップした時に遷移する詳細画面(detail.html)です。id="shop-address"></ons-list-item></ons-list></div></ons-page></ons-template>JavaScriptの実装では続いてJavaScriptの処理について紹介します。全体のコードは以下の通りです。event.target.data.shop;$("#shop-name").text(shop.name);$("#shop-address").text(shop.address);}});各処理内容の詳細について解説していきます。最初の画面(#list-page)で行う処理は主に2つです。使って位置情報を取得します。後述});});位置情報が取得できたら、位置情報を元にしてホットペッパーAPIにアクセスするためのURLを生成します。リクルートWEBサービスにて確認できますが、今回は次のようになります。`http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=${api_key}&lat=${location.coords.latitude}&lng=${location.coords.longitude}&range=5&order=4&format=json`;そしてAjaxを実行します。処理が失敗した場合alert("エラー!");})処理が成功した場合、一覧が返ってきますのでリストに反映します。IDEのプレビュー画面では動作しません。Monacaデバッガーで確認を行ってください。プレビュー画面でも確認をしたいという時には、以下のようにhttps通信を使って、フォーマットにはjsonpを指定してください。続いて一覧からレストラン名をタップした時の処理についてです。ここではレストラン情報を次の画面に引き渡します。レストラン情報はpushPageの二つ目の引数にdataとして渡します。次に詳細画面へ遷移した時の処理についてです。ここでは前の画面から渡されたレストラン情報を表示します。HTML側でid指定している部分に描画するだけです。APIを使うことでアプリの可能性を飛躍的に向上させられます。他にもたくさんのAPIがありますのでぜひアプリ開発に組み込んでみてください。今回のコードはmoongift/monaca_with_hotpepper_apiにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。Monacaでマッシュアップ。