【AppSheet】(その１)周辺検索アプリを作ってみた（コンビニ、レストラン編）

（何故これを書いたか？）
会社で業務改善に使える地図検索系アプリを何かNoCodeで作ってみようと思い、今回AppSheetでやってみました。今までAdalo、Click、Glideなどでアプリを作ってきましたが、最近どのアプリも無料枠が非常に制限されてしまって無料で業務アプリを作ることが出来なくなりました。

会社でGoogle Workspaceを使っているのでAppSheetで無料でアプリが作れるようになりました。以前は有料だったAppSheetのCOREという内容のサービスが2023年７月から無料になったのです。

とはいえ、私はAppSheetでアプリを作ったことが一度もないので出来るかどうか不安でしたが、実際はアプリ作りのメインの作業はAppsheetではなく、GoogleのMap関係のAPIの使い方でした。結構試行錯誤しました。

マップ系のアプリを作る際にGoogle Map APIは避けて通れないのでハマりやすい部分を中心に解説していこうと思います。分量が多いので何回かに分けて掲載します。

１．アプリの最終形はこんな感じです

①何をするアプリなのか？
以下のような機能を持ったアプリを作ろうと思いました。
・場所を指定して半径○○Km以内にあるコンビニやレストラン等を検索。
・場所は実在の施設でもいいし、自分がいる現在地でもいい。

②どういう時に使うのか？
・出張などで知らない土地に行くとき、顧客から近いホテルを探す。
・ホテルに泊まるとき近くにコンビニ、レストランがどこにあるか検索する
（アプリ画面１）
検索対象（ホテル、コンビニ、レストラン）を選択し、基準となる施設名と住所を入れて「SAVE」(保存)ボタンを押すとGoogle Map APIからデータを持ってきて検索一覧リストが出来上がります。

検索結果一覧画面の一番上が基準位置で、その下に検索結果が10件表示されています。検索条件は基準位置から半径10Km以内にある対象物を見つけ、10件表示するという設定にしています。（設定は自由に変えられます）

（アプリ画面２）
一覧表の格段のデータをクリックするとその施設の詳細が表示されます。右端にあるマップマークをクリックするとGoogleMapが下記のように表示されます。
リストに表示された施設はマップ上にピンクのピンとして表示されます。
また基準となる施設はそれと分かるように、内部に星マークが入った少し大きめのピンが表示されます。（標準設定ではこうなっていません。設定を変えて表示させています）

２．アプリのロジック

～Google Places APIとGeocoding APIの２つを使う～
どうやればこのアプリが出来るかというと、AppSheet部分はスプレッドシートに記載されたデータを読み込んでアプリ風に表示しているだけで大した設定はありません。（そもそも私は今回AppSheetでアプリを作るのが初めてでネットで1日だけマニュアル読んだだけなので本当のところ何も分かっていません。）

一番重要なのが基準位置のデータからどうやって周辺のコンビニやホテルのデータを取得するかという事です。今回はGoogle Places APIというサービスを使いました。

Google Places APIの中にnearbySearch(周辺検索)という機能があって、それを利用しています。

Nearby Search (New)  |  Places API  |  Google for Developers

NearbySearch(新版)の説明画面
上記のサイトにアクセスすると下記のような画面が表示されます。

（nearbySearchの説明）
ネットでPlaces API nearbySearchをキーワードに検索すると2つ出てきます。
・Places nearbySearch　　　　  →周辺検索の旧版です。（使わない）
・Places nearbySearch(NEW)　　→周辺検索の「新版」（NEW）です。推奨

2年前くらいにnearbySearchを使ってアプリを作ったことがありますが、その時は旧版しかなかったのでNEW（新版）が出来たのは恐らく2023年か2024年と思います。これからアプリを作るならNEWの方を絶対に使うべきです。旧版の使いづらさが解消されており、本当に使いやすくなりました。

①nearbySearchの設定
Googleのサイトに書いてあるnearbySearchの設定項目は以下のようです
・includedTypes：検索する業種
・maxResultCount：検索結果の表示個数
・latitude/longitude：緯度経度情報
・radius：基準位置からの検索半径（2000mとか）→ｍ単位で設定する

これらのデータをHTTP通信のPOSTで送ってやれば、JSONで返答が返ってきます。

②設定で悩んだ箇所
上記設定項目のうちlatitude/longitude：緯度経度情報をどうすればよいか迷いました。緯度経度情報というのは36.60346/139.84302とかいう数字です。

結論から言うとこれもGoogleのGeocoding APIというサービスを今回使って解決しました。（今回のアプリではGeocoding APIとPlaces API nearbySearchという２つのAPIを使っています。）

～Google Geocoding APIの説明サイト～

開始する  |  Geocoding API  |  Google for Developers

上の画像が小さくて分かりづらいかと思うので再度書いておきます。
「https://maps.googleapis.com/maps/api/geocode/json?address=住所　　&key=YOUR_API_KEY」

API-KeyはGoogleのAPIを使うときにサービスごとに割り当てられているAPI-Keyのことです。
（ポイント）
2年前もこのAPIを使って緯度経度情報を取得しようと思ったのですが、その時は出来ませんでした。「住所」の部分は日本語は使えず、英字や記号にエンコードした形でないとダメだったのです。

今回もダメかなと思ってYahoo APIとかいろいろなAPIを試したのですが、日本語住所をそのまま受け付けてくれるサービスが意外に少なくて挫折しかかりました。

しかしGoogleのgeocoding APIは何と！現在では日本語も受け付けてくれるようになっていました。エンコードの必要もないのです。

３．AppSheetでAPIが使えなかった

データの取得もGoogleのAPIを使えば出来そうだと解り、アプリ作りも途中までは快調に進んでいました。しかし私はAppSheetでアプリを作ったことが無いのでAppSheetからAPIを呼び出す方法が分かりませんでした。散々調べたら私の環境ではAPIは使えないことが分かり愕然としました。

AppSheetでAPIを使うにはGoogle WorkspaceのEnterprise Plus以上の契約が必要だそうです。私の場合はEnterprise Plusより下位のCORE契約なので使えないのです。がっくりしてアプリを作るのを途中でやめてしまいました。

４．スプレッドシートでAPIを呼び出すことに

悶々とした日々を送っていたらあるとき「そうだ！スプレッドシートからAPIが呼び出せないか！？」と思いつき、調べたら出来ることが分かりました。GASでスクリプトを書いてfetchを使ってAPIのエンドポイントにPOSTでリクエストを送ってやればいいのです。

const url="https://maps.googleapis.com/maps/api/geocode/json?address=住所&key=(API-Key)";

 const response1=UrlFetchApp.fetch(url);

 const jsonData=JSON.parse(response1.getContentText());

lat=jsonData['results'][0]['geometry']['location']['lat'];//緯度
lng=jsonData['results'][0]['geometry']['location']['lng'];//経度

長くなったので続きは後編で説明します。