【視認性UP！】Map Viewで出来ることとは？

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

皆さん、Map Viewって使ったことありますか？

私も全く使ったことがなくて、ブログ記事のネタになればと思い使ってみました。

結果・・

めっちゃ使えるやん！！

となったので、早速記事にしました。

一言で言うなら、使ってみるとそれらしいアプリっぽくなるです笑

それでは勉強していきましょう！

検証データについて

この記事で作成するアプリイメージは上図です。

その他にもMap Viewに適しているアプリの構成として

• 日本全国に複数同じような建物や場所が存在するものを管理するアプリ
• 社用車の運行記録など拠点から外出記録を残すアプリ
• 旅行やキャンプなどの旅の思い出を残すアプリ

このようなアプリを作成するならMap Viewは非常に適していると思います(^^)

忘れては行けないのが、行き先などの住所を入力すること！

以下のデータは、アプリを作成するのに用いたものです。

カラムは必要に応じて加えてください。

• ID：Key値
• 拠点：Initial Valueで初期値を送ります（この記事では東京駅）
• 行き先：登録地点の住所を入力します（この記事では名古屋駅、大阪駅）
• 写真：旅の思い出として用意
• コメント：その時の気持ちを入力するカラム

各カラムのイメージはこんな感じです(^^)

それでは早速appsheetにデータを読み込ませてみましょう！

データタイプの修正とViewの作成

データの読み込みが完了したらデータタイプの修正とViewの作成を行います。

データタイプの修正

データタイプは下図を参考にしてください。

拠点と行き先のTypeをAddressにします

この設定をしておくとMap Viewの効果を最大限に活かせますのでぜひ変更しておきましょう(^^)

写真をアプリに保存したい場合は、こちらも合わせてタイプimageに変更しましょう！

Google mapでその場所を入力すれば候補の住所が出るようなら名称で大丈夫です(^^)

また、今回の記事では拠点を東京駅としたいのでInitial Valueにその値を送るようにしておきます。

続いてViewの作成に移ります。

Map Viewの作成

Viewの設定は下図を参考にしてください。

View typeはmapを選択します。

赤枠で囲った部分修正が必要です。

各種View Optionについて説明します(^^)

• Map column：Map Viewにおける中心地
• Secondary data table：Map Viewでは参照テーブルを2つ設定することが可能（1つのテーブルでも可）
• Secondary data column：Map Viewにおける登録地
• Map type：地図か航空写真の2タイプから選択
• Location mode：GPS機能を使わないのであればNone、使うならNormalを推奨

これでMap Viewの基本設定は完了です。お疲れさまでした(^^)

アプリの挙動を確認

最後にアプリの動作検証を行ってみます。

登録地を複数登録する

行き先とその地点の写真を登録します。

この記事では名古屋駅と大阪駅を追加してみました。

登録した地点がGoogle Mapに表示される

少し分かりにくいですが、東京駅（拠点なので濃いピン）と名古屋駅、大阪駅（登録地点なので薄いピン）がGoogle Map上に表示されています。

ストリートビューで周辺の状況を確認する

東京駅周辺のストリートビューを見たいと思います。

使うのは画面左端にある人型のアイコンです。

ストリートビューが見たい地点に人型のアイコンを移動させます。

東京駅のストリートビューが表示されました(^^)

登録地点の情報を閲覧する

既に登録をしている名古屋駅のマップアイコンをクリックすると・・

登録した情報がViewに表示されます(^^)

さらに赤で囲んだアイコンのいずれかをクリックすると・・

Google Mapが立ち上がり、経路の検索も可能です！

登録地点の近くに複数のピンを登録してみる

この機能を使うためには一度UX画面に戻る必要があります。

Minimum Cluster Sizeの設定を行います。

これは最初に登録した地点の近くにいくつまでアイコン表示をさせますか？

という設定です。数値はお好きなように(^^)

画面に戻りアプリビューのPlace Pinをクリックします。

行ってみたいところにPlace Pinをセットし、Confirmボタンをクリックします。

するとForm Viewが立ち上がるので、これまでと同じように地点を登録します。

必要な情報を更新してSaveをします。

同一マップ上に複数のアイコンを登録することが出来ました(^^)

新たに登録した地点でもストリートビューなどの機能は同じく使うことが出来ます。

まとめ

以上、Map View設定のご紹介でした。

記事をまとめていて思いましたが、食べ歩きが趣味な人は自分のお気に入り店を登録するようなアプリを作ってみると面白いかもしれませんね(^^)

私も作ってみるとかなり直感的な動作でやりたいことが出来たので、

同じようなアプリばかり作っていてつまらない・・と感じる人は息抜きにいかがでしょうか？

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)