グルメ検索地図アプリ
グルメサーチAPIを活用して、周辺のお店を検索できる地図アプリを作成します
このチュートリアルでは、ホットペッパー グルメサーチAPI 
を活用して、地図上で表示している場所の近辺にある指定ジャンルのお店を検索し、マーカーで表示するアプリを作成します。地図上のマーカーをクリックすると、住所などの詳細情報を表示します。また、地図を現在地や入力した地名に移動させる機能も備えています。
ページの最後にあるダウンロードセクションからソースコードと実行用のapkファイルをダウンロードできます。使ってみると結構便利な実用的なアプリです。好きな場所でお店を探してみてください！
グルメサーチAPIを使用するには、APIキーが必要です。こちらで取得したAPIキーを公開することはできないため、各自で取得してください。APIキーは、メールアドレスを入力するだけで簡単に取得でき、利用は無料です。
APIキーの取得方法
新規登録ページでメールアドレスを入力します。
“リクルート Webサービス – メールアドレスの確認"というメールが送られてくるので、メールにあるURLをクリックします。
“リクルート Webサービス – APIキー発行完了のお知らせ"というメールでAPIキーが送られてきます。
これだけです！
デザイン編集
Screen1のタイトルを"グルメ検索地図"にします。
レイアウト パレットから 垂直配置コンポーネント を2個追加し、ビューアー上に縦に並べ、高さと横幅は"親要素に合わせる"に設定します。名前は垂直配置1と垂直配置2になっているはずです。
“垂直配置1“
- 地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。文字列からの中心座標を"35.681236,139.767125″にしておきます。これは東京駅の緯度、経度です。
- レイアウト パレットから 水平配置コンポーネント を2個追加します。水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置1と水平配置2になっているはずです。
- 水平配置1にユーザーインターフェース パレットから ラベル と スピナー を追加します。
- ラベル のテキストプロパティーを"ジャンル"にします。
- スピナー の名前は"ジャンル"、文字列から要素プロパティーを"居酒屋,ダイニングバー・バル,創作料理,和食,洋食,イタリアン・フレンチ,中華,焼肉・ホルモン,韓国料理,アジア・エスニック料理,各国料理,カラオケ・パーティ,バー・カクテル,ラーメン,お好み焼き・もんじゃ,カフェ・スイーツ,その他グルメ"に設定します。
- 水平配置2にユーザーインターフェース パレットから ボタン を追加します。
- ボタン の名前とテキストを"検索"にします。
“垂直配置2“
- ユーザーインターフェース パレットから ウェブビュー を追加します。
- 垂直配置2の目に見えるプロパティーのチェックを外します。
垂直配置2の下にレイアウト パレットからラベルを2個追加し、ビューアー上に縦に並べ、名前を"住所"と"営業時間"にします。テキストは両方とも空白にします。
レイアウト パレットから 水平配置コンポーネント を2個、"営業時間"ラベルの下に追加し、ビューアー上に縦に並べ、横幅を"親要素に合わせる"に設定します。名前は水平配置3と水平配置4になっているはずです。
“水平配置3“
- ユーザーインターフェース パレットから ボタン を3個追加します。
- ボタンの名前を"ブラウザ表示"、"地図表示"、"現在地移動"、テキストを"ブラウザ表示"、"地図表示"、"現在地に移動"にします。
“水平配置4“
- レイアウト パレットから テキストボックス と ボタン を追加します。
- テキストボックス の名前とヒントを"移動先住所"にします。
- ボタン の名前を"住所移動"、テキストを"住所に移動"にします。