kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- AppSheetにGoogle Mapのルート検索やストリートビュー機能を実装したい
- AppSheetでUI向上のTIPSを知りたい人
今回は、アプリにGoogle Mapの機能を実装する方法をまとめています。
現在地から目的地までのルート検索や、目的地のストリートビューをワンクリックで検索できるので、アプリユーザーのUI向上に役立つ知識です(^^)
住所を登録するようなアプリには実装する事ができる設定になるので、そういうアプリに使ってみてください！
それでは勉強していきましょう(^^)
住所から緯度経度を入手する
この設定をするためには、緯度経度の情報が必要です。
私はこちらのサイトで住所を検索し、緯度経度の情報に変換してみました。
例えば、東京駅の住所を下記のように入力します。
住所を入力してGPS座標検索をクリックすると、以下の画面が表示されます。
緯度: 35.682454 経度: 139.768283 と表示がされたので、カンマで区切って 35.682454,139.768283を緯度経度情報として、登録をするようにしましょう。
データシートの作成
今回の検証にあたり、使用したシートのカラム情報です。
大事なのは緯度経度のカラムなので、上述した方法で緯度経度を調べて入力しておきましょう！
データの準備ができたらアプリ化します。データタイプの設定は以下のとおり(^^)
緯度経度のデータタイプをLatLongにすることだけ忘れずに設定してください。
次に、現在地の緯度経度情報を取得するためのカラムをVCで準備します。VCの設定は以下のようにしてください。
App formulaには、位置情報を取得するHERE()を入力しましょう。
これで下準備は完了です(^^)
現在地から目的地までのルート検索をする
下準備が完了したら、まずは現在地から目的地までのルート検索を立ち上げるURLを作成してみましょう(^^)
下図を参考に新しくVCを作成します。
TypeはUrlを選択し、App formulaには以下の関数を入力しましょう(^^)
“https://www.google.com/maps/dir/?api=1&origin=” & [現在地] & “&destination=” & [緯度経度] & “&travelmode=” & “driving”
本記事と同じ設定をしている場合は、コピペでOKです！
このままだとカラムにURLがそのまま表示されてしまうので、関数を使って表現を変えてみます。
HYPERLINK(“https://www.google.com/maps/dir/?api=1&origin=” & [現在地] & “&destination=” & [緯度経度] & “&travelmode=” & “driving”, “ルート検索”)
HYPERLINK関数を使うことで、第二引数の文字列（この場合だとルート検索）を表示することができます。
AppSheetは関数の知識が非常に重要です！
AppSheetを学ぶなら知っておいて損はない関数をまとめています(^^)
【まとめ】AppSheetでよく使う関数一覧
ここで設定した関数の挙動を見てみましょう。下図のような表記になっていればOKです。
ルート検索をクリックすると・・・
Google Mapのタブが新規で立ち上がって、現在地から目的地までの走行距離ルートが表示されていればOKです(^^)
drivingの部分をwalkingに変えると徒歩、bicyclingだと自転車、transitだと公共交通機関のルートに変わります(^^)
上記の設定は、アプリユーザーのニーズに沿って変更してください。
目的地のストリートビューを表示させる
今度は目的地までの経路ではなく、目的地のストリートビューを表示させてみましょう。
設定方法は先ほどと同じようにVCを使って実装をしてみます。
TypeはUrlを選択し、App formulaには以下の関数を入力しましょう(^^)
HYPERLINK(“https://maps.google.com/maps?q=&layer=c&cbll=” & [緯度経度] & “&cbp=12,0,0,0,0″,”ストリートビュー”)
最後に設定した関数の挙動を見てみましょう。下図のような表記になっていればOKです。
ストリートビューをクリックすると・・・
登録してある緯度経度をポイントとして、ストリートビューが立ち上がります(^^)
顧客訪問先管理アプリや日記アプリなどに設定しおくと、アプリの利便性がアップするかと思われます。
作成難易度は高いですが参考記事です！
シンプルな日記アプリを勉強教材として、アプリ開発の練習にしてください(^^)
【活用事例】AppSheetで日記アプリを作ってみた
まとめ
以上、VCを使ったGoogle Map機能をAppSheetに取り込む方法についての記事でした。
住所を記録するようなアプリであれば、本記事の内容は使えるので、UIを向上させる設定として導入してみてはいかがでしょうか？
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)