AppSheetのXYマップを使って畑を管理する
以前からちょっと使いたいなとおもいつつ触れずにいたAppSheetの機能の１つとして「XYマップ」があります。独自の画像を使ってのフロアマップやエリアに対してピンを置いて、データを管理するというもので見た目は独自のGoogle Mapsを使ったようなアプリです。
しかしこの機能、結構使い所が多くて、色々と応用できそうなので試しに農業の圃場管理に使えないか？ということでツールを作ってみました。
目次
今回利用するスプレッドシート等
- 圃場管理スプレッドシート - Google Spreadsheet
- 圃場マップ用スライド - Google Slide
- 圃場管理サンプル - AppSheet
XYマップでは、マップ表示の土台用に独自の画像データが必要になります。フロアマップや区画エリアのような画像データは今回、Googleスライドを使って作成しpng画像として生成したものを利用しています。
これをAppSheetに取り込んでマップの土台とし、このマップ上のXYの位置情報を元に圃場の管理作業の記録を追加していくというのが今回のアプリの目的です。
主な使い所
独自の画像を下敷きにXYの座標でピンを配置し、それにデータをぶら下げる。ということなので、以下のような用途で使えそうです。他にも応用出来るのではないかと思います。
- フリーアドレス対応の座席表アプリ
- オフィスレイアウトを元にした設備点検や清掃チェック
- 工場の現場での設備点検やヒヤリハット報告
- イベント会場のブースマップ（東京ビッグサイト等）
- 商品陳列の不足状況のチェック
- 車のレイアウトを利用しての修理履歴管理
- 会議室の現在使用中かどうかの可視化
今回は畑の区画データを用いての圃場における作業管理を目的としたアプリであるので、マップにはいくつかの圃場のマップデータを用意しています。以前もGASで座席表アプリを作ったことがありますが、これを簡単に置き換えられそうです。
図：アプリの全体像
事前準備
テーブル設計
概要
今回のアプリはシンプルに2つのシートを使って実現しています。肥料の施肥状況を管理しようと思い、施肥管理という形でデータ部分は構築しています。
- マップデータを管理するmapシート
- 各ピンのデータを管理する施肥管理シート
mapシートが親となり、Refで施肥管理シートがそこにぶら下がる形になるので、リレーション設定が必要になります。
mapシート
mapシートは、ID列、圃場の名前、土台になるマップ画像、メモとステータスの5列のみ。注意すべき点は土台になるマップ画像の列はImage型にしておく点くらい。
この後、施肥管理テーブル側からRefで接続するので、Related 施肥管理sという列が出てくるようになります。実はアプリ上のマップ表示の本体はこの「Related 施肥管理s」列であったりするので、ここがちょっと難解なポイントかもしれません。
このマップは後で登録時にドロップダウンで選べるようにするため、Key列はIDですが、Labelは圃場名にチェックを入れておきます。
図：スプシ上のmapシートの様子
図：テーブルとして取り込んだ様子
施肥管理シート
施肥管理シート側は置いたピンに対する細かな入力を記録するためのシートになります。こちらは少しだけ注意が必要です。
- マップ列はピンを配置する親側のIDが入るのでRefでリレーションをする必要があります。
- 対象箇所列がXY型の座標データが入る場所になります。
- 他の列は管理用の入力欄となるので適当な型を指定しておきます。
ここで出てくるXY型は土台になる画像に対してのX位置とY位置の座標が入ることになり、Google Mapsで言うところの緯度経度みたいな存在になります。基本対象物は常に固定のものであり、同一対象物に対しての記録を取るというスタイルなので、対象物が頻繁に移動するようなものに、XYマップは使えません（データの連続性が失われる）。
リレーションはドロップダウンメニュー目的であるので、親側のID列を別途設けるのではなく、マップ列で選んだものがそれに該当します。
図：施肥管理シートの様子
図：施肥管理テーブルとして取り込んだ様子
マップ画像の作成
マップの土台になる画像データを用意します。JPGやPNGを使うことになるかとは思いますが、実はSVG画像も利用が可能になっていますので、動的な画像の表示なども可能になっています。
今回は比較的この手のものを作成しやすいGoogleスライドで作成したのちに、作成スライドを画像としてダウンロードして用意しておきます。2枚程度画像を用意しておいて、AppSheetにアップロードして利用することになります。
作り方は簡単で好きなようにスライド上に構築したのちに、メニューからファイル→ダウンロード→PNG画像を選ぶだけ。これを後ほどアプリ上でmapシートに登録していくことになります。
図：シェイプのみで区画データを作ってみた
構築方法
いよいよここからAppSheet上でアプリとして構築していくことになります。若干ややこしい箇所があるのでそこだけ注意すれば、XYマップタイプのアプリを作ることが可能です。とりあえず、mapシートをベースにアプリの開発をスタートしたので、mapのビューがデフォルトで作成されています。
リレーションシップの設定
リレーションはドロップダウンとして利用します。以下の手順でリレーションを設定します。
- 施肥管理テーブルのマップ列の型をRefに変更する
- source tableは「map」テーブルを指定します。
- is a part ofはチェックを入れる必要はありません
- input modeはDropdownに変更します。
これにより、mapテーブル側に仮想列のRelated 施肥管理sが作成されて、ドロップダウンメニューとして設定が完了しました。
図：リレーション設定が出来た
XY型の列の設定
続けて、施肥管理テーブルのXY型を指定した「対象箇所列」に対しても設定を行います。
- 対象箇所列の型をXY型に変更する
- Background image for the XY coordinatesの入力欄をクリック
- mapテーブルのマップ画像列をインサート。すると数式として「[マップ].[マップ画像]」が入るようになる。
この作業はリレーションを先にしておかないと出来ませんので要注意。これでmapシートのIDの値がマップ画像列に対して、ドロップダウン選択後に入るようになります。
図：ここがちょっと難解な場所となっている。
施肥管理ビューを作成する
マップに関してはプロジェクト作成時にmapシートをベースに作っている為、ビューが用意済みです。一方もう一個の施肥管理シートはテーブルとして別途追加した後に、ビューも手動で追加が必要です。
この時の施肥管理のビュー自体は以下の設定でビューを作成しています。
- View TypeはDeckにしておきます。
- PositionはLastを指定しています。
- 一応現場の画像列がある関係で、Main Imageは現場写真列をあてがっています。
図：施肥管理ビューを作成中
各ビューを調整する
mapシートには、マップ画像の列とRelated 施肥管理sが存在します。前述にもあるようにXYマップとして表示する対象はマップ画像列ではなく、Related 施肥管理sとなるのでmap_Detailのビューにおいては、以下のような変更を加えています。
- map_Detailのビューを表示して、Column Orderで表示するのは圃場名、メモ、ステータスと「Related 施肥管理s」のみ。マップ画像の列は削除しておきます。
- 同様のビューのDisplay modeを「No Headings」に変更します。
- 施肥管理_Inlineのビューを表示して、View Typeを「Map」に変更します
- 同様のビューのMap Columnを「対象箇所」に変更します。
これで、マップのビューではXYマップ+ピンの表示となり、マップ部分をクリックすると詳細な全体図とピンの内容を表示出来るようになります（この時の画面が施肥管理_inlineのビューとなる）。
図：mapのdetailの変更箇所
図：施肥管理のinlineビューの変更箇所
図：マップビューの全体表示の様子
フォーマットルールの設定
デフォルトではピンを配置しても、そのピンが地味な色でショボい。また、場合によってはステータスに応じてこのピンのカラーを動的に変えたいみたいな事もあるでしょう。
既に過去に紹介済みではありますが、フォーマットルールを適用することでこのピンのアイコンおよび色を変更することが可能です。座席表アプリのような場合、確保済みの席の色は赤、空いてる席は緑みたいな条件分岐で色分けなんてことも「If this condition is true」を使って可能になります。
以下の手順でピンをピンク色の旗のアイコンにしてみました。
- 開発画面左サイドバーのビューのアイコンにカーソルを移動する
- するとFormat Rulesというのが出てくるのでクリックする
- 上部の新規追加の＋ボタンをクリックする
- ルールに名前をつけて、for this dataを「施肥管理」とする
- Format these columns and actionsが適用するフォーマットの対象列なので、「対象箇所」を選択
- アイコンと色を適当に選択
- 他にもテキストサイズなども指定できる。
5.でステータスを条件に色分けしたいのなら、ここでステータスがXXXXの時といった数式を入れて１つ作り、もう一個同様のルールを用意してまた、5.に数式を書いて必要な数だけ条件分岐を用意しておくと良い。
※座席表アプリのようなケースならば、GASのトリガーでステータスの内容を毎晩0時に初期化するようなスクリプトをセットしておけば、毎朝全席空席のような状態を作れます。
図：フォーマットルールを適用してる様子
使い方
マップ画像の登録
まずは、ピンを置くための土台であるマップデータを整備しなければなりません。以下の手順で自身の管理する圃場のデータを整備しましょう。
- 圃場マップを開いて、+ボタンをクリックする
- 圃場名を入れて、スライドで作っておいたマップ画像をアップロードします。
- メモを入力し、その圃場のステータスを選んでおく
- SAVEボタンをクリックして完了
これで、現場の作業者が圃場を選んでピンを置くことが出来るようになります。
図：マップ一覧登録の様子
ピンを配置してデータ登録
これでマップが登録されたので、現場作業員は作業をするたびに担当してる区画にピンを配置するか？施肥管理ビューの上からどんどん追加していきます。
- 施肥管理のビューを開く
- +ボタンをクリックする
- マップがドロップダウンになってるのでまずは、登録済み圃場を選ぶ
- 対象箇所にマップが表示されるので、クリックする
- マップが動かせるので、動かしてピンを掴んで目的の場所で離し、完了をクリックする。
- 日時や、状況・現場写真・メモを追加していく。
- 最後に保存ボタンをクリックする
マップビューの側からAddボタンをクリックしても追加は出来ますが、マップビュー側はどちらかというと管理者側の画面なので、現場作業員には施肥管理ビューのみ表示するように制御を加えると尚良いでしょう。
これでスマホ１つで施肥管理を行えるようになり、データはスプシに蓄積していくという簡単ながら高度なアプリの出来上がりです。
図：マップにピン配置中
