【Click_NoCode】APIを使って郵便番号から最寄りのコンビニを検索してみた

2022年11月3日 19:29

（なぜこれを書いたか？）
前回、Heart Railsというサイトで提供されているAPIを使って郵便番号から最寄り駅を検索するというアプリを作ってみました。今回は検索シリーズ第2弾として郵便番号から最寄りのコンビニを検索する方法をご紹介します。

今回はGoogleのPlaces APIというものを使います。これはGoogleMapを動かすときに使っているAPIの一つです。nearby Search（周辺検索）という機能を持っており、設定値を変えてやればスーパーでも病院でも郵便局でも検索できます。（こんなことが出来るんかと久しぶりにびっくりした。）

じゃあ、どこでも検索できるかというとそういうことではなくGoogleで登録している約90ヶ所の場所を指定することになります。

１．GoogleのAPIを使ってコンビニ検索をする

今回検索に使うGoogleのPlaces APIにはnearby Search（周辺検索、ご近所検索）という機能があって、基準地点を緯度経度で指定し、目的対象物（コンビニ、スーパー等）を指定すると最寄りの場所を表示してくれます。

nearby SearchのURL:
「https://maps.googleapis.com/maps/api/place/nearbysearch/json?location={緯度},{経度}&language=ja&radius=10000&type={場所のタイプ}&key={API-Key}」

（解説）
json?以下が指定するパラメータになります
①location={緯度},{経度}・・・・基準地点（自分の家とか任意の場所）
②language=ja・・・・・結果を表示する言語。日本語（Japanese）を指定
③radius=10000・・・・基準地点から半径何ｍ以内を検索するか？ここではとりあえず10Km(=10,000ｍ)にしてみた。（いくつでもいい。）
④type={場所のタイプ}・・・・Places APIに登録されている場所の名前
コンビニ：convenience_store
スーパー：supermarket
郵便局　：post_office
病院　　：hospital 　等（英語で指定する。日本語は使えない。）
⑤key={API-Key}・・・・GoogleMapのAPI-Keyの事です。

ブログのタイトルが「郵便番号から最寄りのコンビニを検索する」となっていますが、実はURLの中のtypeというパラメータを変えてやればいろいろな場所が指定できます。約90種類以上のタイプが登録されています。

Googleはアメリカの企業なのでtypeに登録されている場所の中にはモスクとかユダヤ教の教会とか日本人には馴染みが無いような場所も入っています。

（周辺検索nearbySearchの仕様説明書）
Places APIのnearby Searchがどんなものか概要を知ってからアプリを作るといいと思います。以下が解説ページのURLです。（日本語で書かれている）
https://developers.google.com/maps/documentation/places/web-service/search-nearby

（アプリ外観）
Clickで作ったアプリです。コンビニだけでなくスーパー、病院、郵便局、ガソリンスタンドが選択できるようにしています。

２．アプリの組み立て方

今回作ろうとしているのは郵便番号をもとに最寄りのコンビニの場所を検索するアプリです。GoogleのPlaces APIは日本の郵便番号から緯度経度の住所に変換する機能はありません。そこで前回使ったHeartRailsのサイトで提供されているAPIを使って緯度経度の住所を求めることにします。(２つのAPIを使うという事です)
（APIの流れ）
①Heart Rails のAPI　：郵便番号→住所（緯度経度）検索
②GoogleのPlaces API：住所（緯度経度）→最寄りのコンビニの住所

～基準地点の緯度経度を郵便番号から求める～
HeartRailsのAPIを使って基準地点の緯度経度を郵便番号から求めます
「http://geoapi.heartrails.com/api/json?method=searchByPostal&postal={郵便番号}」

（設定の仕方）

３．Clickで基準地点の緯度経度を求める

①アプリのイメージ
最終的なアプリの外観は以下のような感じになります。郵便番号を入力し、検索対象物をドロップダウンから選ぶようにしました。

コンビニ検索だけではもったいないので場所のデータベースを作り、ドロップダウンを使って5種類選べるようにしてみました。（コンビニ、スーパー、病院、郵便局、ガソリンスタンド）

②ボタンにカスタムClickFlowを設定する
APIと接続できるようにボタンにカスタムClickFlowを設定します。
（カスタムClickFlow→新カスタムClickFlowを選択。General API設定画面が開きます）

③General API設定画面
ここではGoogleではなくてHeartRailsが提供する「郵便番号から住所の緯度経度を求める」APIの設定を行います。（以下）
「http://geoapi.heartrails.com/api/json?method=searchByPostal&postal={郵便番号}」

郵便番号を変数として登録し、APIのURLのパラメータとして追加します。
設定内容に「郵便番号から住所検索」という名前を付けました。
→これがボタンに設定するClickFlowの名前になります

④動作確認する
入力が済んだら画面下部の「テスト」ボタンを押して動作確認します。うまく行くと「応答データ」という画面が表示されます。

画面下部の「データの更新」ボタンを押して設定した内容を保存します。

⑤ボタンにClickFlowを設定する
ボタンには３つのClickFlowを設定します。

⑥ボタンに設定したClickFlowの中身
各ClickFlowは下記画像のような中身になっています。

これで郵便番号から緯度経度を取得すことが出来るようになりました。

４．GoogleのAPI（nearby Search）を設定する

やっと本題のGoogleのAPIの話になりました。Places APIのnearby Searchを設定します。Clickのホームに作った検索画面のボタンにPlaces APIの設定を追加していきます。（一つのボタンにすごい量のClickFlowが追加になります）

①Places APIのGeneral APIを設定する
（カスタムClickFlowの追加）
ClickFlow→新カスタムClickFlow と進むとGeneral APIの設定画面が開きます

（設定項目）
～nearby SearchのURL～
「https://maps.googleapis.com/maps/api/place/nearbysearch/json?location={緯度},{経度}&language=ja&radius=10000&type={場所のタイプ}&key={API-Key}」
→「緯度」、「経度」、「場所のタイプ」の３つを変数に設定します。API-Keyは固定値なので変数にはなりません。

②動作確認
画面下の「テスト」ボタンを押します。成功すると「応答データ」という画面が表示され、Places APIからすごい量のデータがJSONの形で返ってきます。どこに何が書いてあるか最初は分からなかったのですが、コンビニの名前と住所は以下の項目に出ています。
name：コンビニの名前
vicinity：コンビニの住所
→vicinityとはneighborのような意味でご近所、近隣の場所などを表します

コンビニの住所は「vicinity」という項目に出ている。

③ボタンにClickFlowを設定
「住所から最寄りのコンビニ検索」APIに接続するためのClickFlowを設定する。HeartRailsから取得した緯度経度のデータをインプット２，３に入力し、場所タイプを指定してあげます。（コンビニという事で説明はしていますが、実際はドロップダウンで場所を選択できるようにしました。）