APPSHEETが準備しているテンプレートの紹介。
テンプレートを確認したい場合は下のボタンから公式サイトに移動してください。
今回は『フィールドデリバリー』（Field Delivery）です。
このテンプレートは、グーグルマップを利用したアプリになっています。
APPSHEETは、グーグルが提供するツールだけあり、グーグルマップとの連動がスムーズかつ簡単なのが特徴です。
テンプレートの設定を知ることで、自分が作りたいアプリへ発想を飛ばしてみてください。
それでは早速みていきましょう。
記事の内容
１．スライスを使って特定の条件で切り取ったデータを地図上に表示
２．簡単かつスムーズにGoogleMapと連携
３．特定のデータにアイコンや色を変えて表示
APPSHEETとグーグルマップの相性の良さを理解したい人向けの記事です。
実際の画面を確認しよう
それでは『フィールドサービス』をみてみましょう。
アプリ画面は、『ドライバー』と『アクティブジョブ』と『カレンダー』の３つになっています。
ドライバー画面では、個別のジョブの追加や仕事の状況が確認できるようになっています。
アクティブジョブ画面は、荷物が受け取り済か保留中か場所に表示する地図です。
カレンダー画面では、実際の配送期間がいつからいつまでだったかを表示しています。
仕事の状況によってアイコンを変えているのがユーザーにとっては嬉しいやり方ですね。
このやり方もマネできるようにあとで解説します。
次に「インフォ」メニューの「スペック」タブに移動して関連性をみてみましょう。
シートを示す青色の正方形が２つあり、『ジョブ』と『ドライバー』の２種類になっています。
緑色でひし形はスライスビューです。
マップのデータは未完了なジョブの住所を利用しているのがわかりますね。
スライスを使って特定の条件だけを地図に出す方法も解説します。
スプレッドシートを確認しよう
それでは次にスプレッドシートを確認していきましょう。
スプレッドシートは 『ジョブ』と『ドライバー』の２種類 です。
『ジョブ』のスプレッドシートには、主キー、ドライバー外部キー、仕事名、ノート、受け取り場所、受取日時、納品場所、納品サイン、納品日時、状況がカラムとして設定されています。
配送１件のレコードに対してドライバーを指定して配送管理するデータ構成ですね。
このアプリのキーポイントは『ステータス』で、キャンセルや完了などの状況によって表示のやり方を変えようとしています。
また、住所情報を持っているので地図に表示して管理できるようになっているのがいいですね。
次に『ドライバー』のスプレッドシートをみてみましょう。
『ドライバー』のスプレッドシートは、主キー、ドライバー名、写真、メール、電話番号がカラムに設定されています。
お好みでカラムを追加して管理しやすくしてもいいですね。
「データ」メニューの「カラム」タブで、データタイプを「image（写真）」にすると、アプリの入力で自動的にスマホカメラで撮影するかフォルダから写真を選択できるようになります。
元テーブルを特定条件でスライスして仮想テーブルを作ります
『フィールドデリバリー』ではジョブテーブルのデータを未完了と完了に分割（スライス）していました。
それではどのようにスライスを設定しているのか確認していきましょう。
スライスは、「データ」メニューから「スライス」タブで移動します。
「Finished Jobs（完了ジョブ）」と「Pending Started jobs（保留／開始ジョブ）」の２種類が作られています。
スライスは、このように元のテーブルから特定の条件で仮想のテーブルを作るためのものです。
作られたテーブルはViewで利用するのが一般的な使い方だと思います。
では、スライスの設定はどうなっているのかみていきましょう。
スライスの編集では、仮想テーブルの名前、使用するテーブルの選択、切り取る条件、表示するカラム指定、編集などの機能追加、更新モードなどを設定します。
このなかで特に重要なのが「Row filter condition（切り取る条件）」です。
この条件によってテーブルの内容が変わるので、よく考えて設定する必要があります。
なお、このサンプルでの式は以下のとおりです。
完了／未完了の切り分け
・完了テーブル：[Status]=Finished
・未完了テーブル：OR([Status]=Pending,[Status]=Started)
※OR([value1],[value2]) :value1またはvalue2
『status』の入力内容で条件が分かれていてわかりやすいと思います。
慣れればIF文などを駆使して思うままのテーブルに切り取ってみてください。
仮想のテーブルということは入力フォームを作ったりできるんですね。
作れるけれど理解していないうちはあまり作らないほうがいいです。
どうして？
仮想のテーブルだから実際のテーブルと同期できるようにしておく必要があるからです。
全部のカラムを入れれば同期は問題ないですよね？
入力フォームを作るならそうしたほうが無難ですね。
スライスでは、必要なデータだけを表示するテーブルが作れるので、無駄にシートを管理する必要がなくなるため、積極的に利用しましょう
GoogleMapとの連携が簡単です
APPSHEETはグーグルが提供しているツールなので、グーグルマップとの連携がスムーズです。
ほとんど設定の必要がなく気の利いた機能をセットしてくれます。
それでは実際の画面でみてみましょう。
Ｍａｐを利用するには「UX」メニューから「ビュー」タブで「New View」を追加し、「ビュータイプ」にある「Ｍａｐ」を選択します。
次に「For this data（このデータについて）」どのテーブルを使用するか選択し、「Map column（マップ列）」でどのカラムのデータを使うか指定します。
これでテーブルにある住所やLATLONGのデータが自動で地図上にマッピングされます。
さらに難しい設定をしなくても、地図アイコンや車アイコンからグーグルマップと同じ機能が使えるので便利です。
APPSHEETはMAP連携が得意なツールなので、地図を利用したアプリを作るなら使ってみてください。
住所情報があれば、ジオコードを入れなくても地図に自動で表示されます。
（中級者向け）地図情報から住所を自動入力したい場合、GASにRGCを入れないと今のところできません。
特定の情報は表示を変えてＵＸを向上させてます
表示するデータの色やアイコンを変えると、ユーザーの認識力があがってＵＸが向上します。
設定も特に難しくないので積極的に利用してください。
それでは設定方法についてみてみましょう。
変更画面は、「ＵＸ」メニューから「フォーマッタルール」タブで移動します。
フォーマットルールで「New Format Rule（新しいフォーマットルール）」を押してルールを追加します。
このサンプルでは、「Rule name（ルール名）」を『started』とし、「For this data（このデータについて）」で『job』のテーブルを選択しています。
「If this condition is true（この条件が真の場合）」で適用させたい条件を入れて、「Format these columns and actions（これらの列とアクションをフォーマットします）」でカラムを選択しています。
あとはお好みのビジュアルアイコンや色を選んでみてください。
ＵＩはシンプルなほうがいいですが、業務上の理由から、特定の条件でアイコンや色を変えるのは有効な手段です。
APPSHEETではデモ画面にすぐ反映されるので、効果を確認しながら編集していきましょう。
まとめ
『フィールドデリバリー』は『ドライバー』と『ジョブ』のシートを使ってグーグルマップで配送状況が確認できるアプリでした。
スライスの基本的な設定のやり方や、地図上で特定の情報に対する表示を変更する方法が学べます。
グーグルマップとの連動性を考えるとAPPSHEET以上のアプリ開発ツールはないかなと思います。
ぜひ試してみてください。
