AppSheet実践編シリーズ⑮～XY型：位置情報を表現できる第三のデータ型（前編）～
はじめに
こんにちは。ソシオネットの髭晩酌です。
さて、新しい年がはじまりました。本年もよろしくお願いいたします。
今年も皆さんのアプ活（AppSheet活動？）が充実したものになるとよいな！と思っています。そして我々のブログがその一助になれば幸いです。
ところで皆さん、年越しそばは食べましたか？私の実家では正月におせちは食べず、その代わりに大晦日にご馳走を食べます。なので、基本的に大晦日の夜はみんな胃袋的に満足しているので、今まで年越しそばとは縁遠い大晦日を過ごしてきました、、、。食べるとしても、緑のたぬきで簡単に、が多かったかな～。
さて今回のブログは、XY型というデータ型についてです。
前回の私のブログ（↓↓↓）で、位置を表す2つの型（Address型、Latlong型）をご説明したので、その流れで、位置情報を表す第三のデータ型であるXY型について今回は説明していきます。
前回のAddress型やLatlong型は、住所や緯度経度の情報を保存することができ、その情報が示すGoogleMap上の場所にピンを立てる、というものでした。XY型はそれらとは異なり、任意の平面図の画像上のピンの位置を保存しておくというものです。
この説明だけだとよくわからないと思うので、百聞は一見に如かずということで、早速今回のサンプルアプリであるヒヤリハット報告アプリの作成を通じて勉強していきましょう。
なお、本ブログの画面説明は「improved editor」モードにて説明していきます。
ヒヤリハットとは？
まずは、今回の題材のアプリを説明する前に、ヒヤリハットについて簡単にご説明します。
皆さんは仕事中にミスしそうになった時に「ヒヤり」と感じたり「ハッと」したことはないですか？その場はミスしそうだった（つまり、ミスしてない）、で済んだとしても、一歩間違えればミスにつながる局面だったと思います。ましてやそのミスが重大な事故につながるのであればなおさら「ヒヤリ」や「ハッと」を感じるのではないでしょうか。
このように、重大な事故になる危険性をはらんだ出来事、および、それを見つけることを「ヒヤリハット」と言います。そして「ヒヤリハット」を「事故にならなくてよかったね！」で終わらせるのではなく、再発防止に努めることが業種業界を問わずリスクマネジメントの観点で重要視されています。
ということで、業務の中で発生した「ヒヤリハット」を集めて改善につなげていくことが重要であり、そのためのアプリが「ヒヤリハット報告アプリ」となります。
ヒヤリハット報告アプリの説明
それでは改めて「ヒヤリハット報告アプリ」の説明をしていきます。このアプリは「マップ」と「ヒヤリハット」という2つのビューで構成されています。
・マップ
平面図の画像を登録する画面です。前述の通り、XY型は平面図の画像上のピンの位置を保存するものなので、その平面図をアプリから登録しておくための画面ですね。（なお、インターネット上にある平面図を使うことも可能です）
なお、今回はオフィス棟と工場棟の2つの建物がある事業所でのヒヤリハット報告のイメージとしました。
さらに、それぞれの平面図の詳細を開くと、その平面図の中に保存されているピンが全て表示されます。これにより、どこでヒヤリハットが多く発生しているかをビジュアルで確認することができます。
・ヒヤリハット
ヒヤリハット報告と確認のためのビューです。今まで登録されたヒヤリハット報告が一覧で表示されます。また、Addボタン「＋」から新規ヒヤリハット入力フォームに遷移します。ヒヤリハット発生場所として、前述のマップから登録した平面図上のピンの位置を保存できます。
では早速このアプリを作りながら、XY型の使い方を勉強していきましょう。
「マップ」を実装する
「マップ」ビューを作るにあたり、以下のテーブルを、AppSheetのトップ画面＞Create＞App＞Start with existing dataから取り込みます。
そして、Data＞マップ より、以下の通りに設定していきます。ここでは特にポイントとなる点はないと思います。
次に「マップ」ビューの設定です。
Viewの設定画面に作成されている「マップ」ビューの設定を以下の画像の通りに変えていきます。
簡単ですが、これで「マップ」ビューは完成です。このブログのテーマ的に重要なXY型は次の「ヒヤリハット」の実装で出てきますので、どんどん進みましょう。
「ヒヤリハット」を実装する
まずは「ヒヤリハット」ビュー用のデータをAppSheetに取り込みます。前述の「マップ」が含まれているスプレッドシートと同じブックに以下の「ヒヤリハット」テーブルを作成し、Data＞Create＞Add new dataから取り込んでください。
次に、Data＞ヒヤリハット より、以下の通りに設定していきます。
そして、お待たせしました！ここでいよいよ、XY型が登場します！！
XY型を設定した「発生場所」という項目について、鉛筆マークを押下して、Type Detailsセクション内のBackground image for the XY coordinatesに以下の通り設定します。
[マップ].[平面図]この設定の詳細については後ほど説明しますのでお待ちください。。。
さらに、Ref型を設定した「マップ」という項目についても、鉛筆マークを押下して以下の通り設定します。
ここまででData＞ヒヤリハットの設定は完了です。
次にViewの設定画面から「ヒヤリハット」ビューを設定していきます。
その前に、「ヒヤリハット」テーブルを取り込んだ際に、デフォルトで「Map」ビューが作成されている場合があるので、これは削除しましょう。
ということで改めて、「ヒヤリハット」ビューの設定です。
View＞PRIMARY NAVIGATION＞Add Viewから新しいビューを作成しましょう。
ここは、個人的には見やすければよいと思うので、ViewTypeをTable型にして、View Optionsセクション内のColumn orderで項目の並びを調整するくらいかと思います。参考で以下に私の設定を乗せておきますが、見た目だけの話なので皆さんのお好みの設定でどうぞ！
実はまだアプリは完成していないのですが、一旦この時点でどんな感じになっているかを確認してみましょう。
マップを登録しよう
ヒヤリハット報告アプリを使い始める前にやっておくことがあります。そうですね、平面図の画像の登録を事前にしておく必要があります。
「マップ」ビューから新規登録「＋」ボタンを押下します。
今回はサンプルで作った以下の平面図を登録してみました。ここは実際には皆さんの職場や事業場の平面図を登録することになります。
アプリを使いながらXY型の設定をお勉強
ここまでで平面図の登録も済みましたので、実際にアプリを使いながらXY型の説明をしていきます。
まずは「ヒヤリハット」ビューから新規登録「＋」ボタンを押下します。
こちらが、入力画面です。※デフォルト設定のままです
早速、マップを選択していきましょう。今回は工場棟を選択してみます。選択したらDoneを押下です。
すると、入力画面の発生場所欄に工場棟の平面図が表示されました！！
ここで話を横にそらしますが、「平面図が表示される」という動作の説明していきます。先ほど設定したXY型のBackground image for the XY coordinatesの設定を思い出してみましょう。
Background image for the XY coordinatesには座標を指定する時の背景画像を設定します。マップを選択することで平面図の画像が入力画面に表示されるのは、このBackground image for the XY coordinatesの設定によるもの、ということになります。
これがXY型の設定の唯一の勘所となります！
では、入力画面に戻りまして、発生場所に表示された平面図の任意の場所をクリックしてみましょう。
するとピンが動かせるようになるので、ヒヤリハットが起きた個所にピンを動かしてDoneを押下します。
平面図上のXY座標情報が入力画面に反映されました。ちなみに、画像の左上からの縦横の位置をそれぞれ0～100で表現しているので、画像の左上が(0,0)、右下が(100,100)となります。
あとは、他の項目を入力して保存すれば、ヒヤリハットの報告は完了です。XY型、簡単ですね！
完成していない場所と次回の予告
先ほど「アプリはまだ完成していない」と書きましたが、それでは、まだ完成していない場所はどこなのでしょうか？
「マップ」ビューから、任意のマップをクリックして詳細画面を確認しましょう。
マップの詳細画面を見ると、最下部にヒヤリハットの明細が表示されています。本来は冒頭に書いた通り、マップ内でヒヤリハットが発生した場所にピンを表示させたいので、ここの部分を次回のブログで修正していきます！
終わりに
今回は、XY型をつかったヒヤリハット報告アプリを途中まで作りました。
次回の後編では、ヒヤリハットの全量について発生場所をピンで表示する設定など見た目部分の設定と、XY型を活用したアプリのアイディアをいくつか書いていこうと思います
ということで、今回のブログは以上となります。ではまた次回ブログでお会いしましょう！ルネッサーンス！！
AppSheet勉強会を開催しております
弊社主催のAppSheet勉強会を毎月開催しております。1～2月開催分のお申込みは以下からお願いいたします。
1/16(火)【毎月第3火曜開催】実践的なスキルが学べる！AppSheetアプリ開発ワークショップ | Peatix
2/13(火)【毎月第2火曜開催】AppSheetを知ろう！初心者向けかんたんハンズオン勉強会！ | Peatix
→2/13の勉強会は講師体調不良のため中止となりました。大変申し訳ございません。
IT内製化支援、Salesforceの運用・導入、DX化推進に関するご相談をお待ちしております
弊社では、ノーコード開発ツールを用いたIT内製化支援、Salesforceの運用・導入、および、DX化推進に関するご相談を承っております。お気軽に弊社お問い合わせサイトよりご相談などをお寄せいただければと思います。
ソシオネットHP：http://www.socionet.co.jp/
IT内製化支援支援サービス「DXオープンラボ」：https://socionet.co.jp/insourcing-support-service/
対話型定額制アプリ開発サービス「DXデビュー」：https://socionet.co.jp/dxdebut/
Salesforce最適化支援サービス：https://socionet.co.jp/salesforce-service/
DXサポーターズ特設サイト：https://socionet.co.jp/dx-supporters/
お問い合わせ：https://socionet.co.jp/contact/