Glideでアルコール検査記録アプリを作成（Locationとmap機能追加）

お疲れ様です。
業務効率のため日々奮闘中の事務員兼主婦です。
職場の業務効率UPのため、ノーコードツールの**Glide**で管理簿アプリ作成などにチャレンジしています。

![Glide用バナー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/ddd0c08e-61d0-ea48-ca8f-476f8995601f.png)

https://qiita.com/kiku_2005/items/67f67ca8340dab7206de

https://qiita.com/kiku_2005/items/953d67e6c7c75a285b32

https://qiita.com/kiku_2005/items/8483dc00e7d1af716b94

https://qiita.com/kiku_2005/items/10c22d8b6b6c32ebf0be


今回は、以前作成していたアルコール検査記録アプリを少し改良してみたので、記事に残したいと思います。ちなみに職場のアルコールチェックは相変わらず紙に記入する方法から変わっていません:disappointed_relieved:


![DSC_0032.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/4a365cf8-232b-ca22-bc18-93ba15d07669.jpeg)




# 完成品


https://x.com/kiku_2005/status/1763992813103145393?s=20




## 使用ツール
・[Glide](https://www.glideapps.com)
・[Google Sheets](https://www.google.com/intl/ja_jp/sheets/about/)



# 製作開始
## １. Glideに使用するGoogle Sheetsを作成
普段使用しているExcelデータの書式を元に**Google Sheets**を作成します。**Glide**の設定次第ではExcelをそのまま使用することも可能です。今回はアルコール検査記録シートとマスタシートを準備しました。

アルコール検査記録シート
![アルコール④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/0a9c7def-a2cc-6629-49f3-6f159f18fab0.png)

マスタシート
![アルコール⑤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/b0186643-2dd5-52ea-6e3f-011d1fa80434.png)


## ２. Glideの設定

基本的な使い方は下記を参考にしました。

https://hikari-sedori.com/glide2/


①`＋New app`を押して新規作成。
![クイズ㉔.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/d9cb6abc-f079-2e97-9414-53552d20f56b.png)

②名前を付けてモバイル版かPC版かを選択。今回は出先での使用も考慮しモバイル版で作成しました。
![アルコール⑥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/fca3c33b-a5cb-da81-a743-2dc59d6cdfbd.png)

③連携させるソースを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a4f41719-54da-b6af-b5bf-a9edb1a46e8e.png)

④SCREENの`Souce`は使用するGoogle Sheetsを選び、`Label`は表題に表示させたい文字を入れます。STYLEは見やすいように今回は`Checklist`を選択しています。ITEMS DATAは`Description`に運転前検査日時、`Checked`にチェックを選択します。
![アルコール⑧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/0cbac201-aaba-cbc3-eefa-151e74be380f.png)

⑤`Options`で`GROUP`を氏名に選択し、氏名ごとに記録を順番に表示させるよう設定します。また、検索もできるように`Show search bar`にチェックを入れます。
![アルコール⑨.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/15afe1c1-91a3-37eb-ac24-d706bd1ffce1.png)

⑥`+Add`ボタンを押し、入力画面の設定をします。氏名は`Choice`コンポーネントで設定、`Source`をマスタシートの担当者欄から`Dropdown`で選択するように設定します。
![アルコール㉜.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3b774f1c-e55f-fb4e-a463-58572fa13b5d.png)

⑦運転前検査日時は`Data Time`コンポーネントで設定し日時を特定するようにします。
![アルコール㉝.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/fb9897bc-16e5-c3b1-0cab-28d4a180c6f3.png)

⑧今回、検査場所を設定するのに初めて`Location`コンポーネントを使用してみました。このスイッチを入れることで現在位置（経度＆緯度）情報が自動的に入ります。
![スクリーンショット 2024-02-28 234300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/ab81871e-023d-be6a-0ccc-75c3fe87cc81.png)
Data画面
![スクリーンショット 2024-02-29 000700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c7a96896-745a-e84a-af0f-aeeb91247c59.png)
Googleスプレッドシート
![アルコール④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/0a9c7def-a2cc-6629-49f3-6f159f18fab0.png)

⑨少々味気ないので、`Map`コンポーネントで現在位置をGoogle Mapで表示させてみました。１つ前の検査場所で現在位置（経度＆緯度）を特定しているので、このデータを元に地図を表示できます。
![アルコール⑬コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8197be56-4fe2-f273-2b06-e0ec20a4a7b5.png)

⑩アルコール検知器数値は、`Image Picker`コンポーネントで画像を取り込むようにします。今回アップロードする画像はその場でカメラ撮影したものに設定しました。
![スクリーンショット 2024-02-28 234945.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c5d6d0bd-f560-6379-961b-4273ebe56804.png)

⑪酒気帯びの有無は、`Choice`コンポーネントを選択、マスタシートの酒気帯びの有無欄から選べるようにし、デザイン`Style`を`Chips`で選ぶよう設定します。
![アルコール㉞.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/768eb7c6-44a7-6489-696b-006f0a20a499.png)

⑫備考欄は`Txet`コンポーネントを選択、記入できるようにします。その後は引き続き、同じような順番で運転後記録の設定も行います。
![アルコール㉟.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c6f1b368-f84a-4e34-e128-5bd828cda462.png)

⑬続いて、日毎の詳細画面の設定になります。１日の運転前＆運転後の入力が済んでいる場合は左側にチェックを入れるような仕様にしています。こちらをクリックします。
![アルコール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/dfcb5ed8-1a44-7873-87b8-0a3c25ea09b3.png)

⑭`Title`に氏名を表示、`Subtitle`に運転前検査日時、`Image`に運転前のアルコール検知器数値を表示させて、運転後のチェックも忘れないように設定しました。あわせて、`ACTION`の`Show edit screen`をクリックし、`Title`で追記と表示させ、`Icon`を設定します。
![アルコール㉖.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/d1f57557-fe91-e354-8a76-168dfe370a0a.png)
![アルコール㉗コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6609e8e9-248a-eaeb-0562-da74f57b51ef.png)

⑮`Fields`コンポーネントでは詳細については、一画面で見やすいように項目を絞り設定しました。
![アルコール㊳.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/1ed9dcd3-4a3e-764a-0ffe-54c73b05ca89.png)

⑯続いて、すでに運転前の入力は済んでいて、運転後の入力を追記する場合です。左側にはチェックがまだ入っていません。こちらをクリックして画面を表示させます。
![アルコール⑧コピー1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8df09394-ec98-ae4f-9e9e-99aea4e801e8.png)

⑰追記ボタンを押すと、保存されている運転前データが表示されますので、運転後の情報を引き続き入力していくような流れになります。
![アルコール㉗.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/b4942aa2-14d6-b713-d45d-5b017851c6cb.png)
![アルコール㊴コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/292f51d5-cbf7-31fc-b828-91bacdca5697.png)


# 今回の作成ポイント
日時の表記については**Glide**も**Google Sheets**にも設定が必要です。

**【Glide】**
Data画面の日付のプルダウンを押して`Edit`を選択します。
![アルコール㊵.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/dc054a16-ad32-7532-e5a4-dfdf89af4b0c.png)

日時表示されるように`Date & Time`を選択、長さを `Medium`にし、秒数は非表示にするため`Without seconds`と設定して`Save`で保存しました。
![アルコール㊶.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a3e99d90-4a72-b7dc-53a3-a40f099ec2f4.png)

**【Google Sheets】**
日時の列には表示形式の詳細設定をしておくようにします。
![アルコール㊷.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/eea6dad5-f816-4f0c-e741-b9f772ef2c69.png)

時間は秒数まで表示されてしまうので、カスタム日時を選択して、見やすいよう設定します。
![アルコール㊸.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/be100e6b-b45e-4314-9ff3-95ad59d54f19.png)

`:`と`秒(01)`は削除し適用ボタンを押すと下記の表示に変わります。
![アルコール㊹.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/b4c75e9e-3ff3-df3d-c391-9bb9c868d725.png)


# 使用してみたところ
あえて、画像のアップロードはその場で撮影するようにしたものの、実際に撮影する時にアルコールチェッカーの表示がすぐ消えてしまうため、写真をすばやく撮らないといけないので慌ててしまいました。また、アプリ操作中に地図を触ってしまうので、表示がズレてしまう事も判明しました。

# 修正開始
①アルコール検知器数値は`Image Picker`コンポーネントを`Camera Phot Roll`に変更し、一旦保存した画像もアップロードできるように変更しました。
![アルコール㊼.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a8ac1c71-7472-d9de-f5ca-ff3ef360d9d3.png)

②また、`Location`と`map`の表示が近過ぎて操作するのに支障をきたしていたので、余白スペースを入れることにしました。`Saparator`コンポーネントを追加し、`Size`を`Medium`にして余白スペースを作り、見やすいように`Draw Line`で区切り表示させてみました。
![アルコール㊽.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3c2bd6a1-70c5-0aad-99ee-b60d41c36178.png)


# 感想
今回はマップなどで現在地を入れられるようにしたことで、少し見栄えが良くなったと思います。職場でも実際に使用する営業担当の方へ、さらにご意見を伺っていきたいと思います。

![アルコールチェック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/182b323e-7fc0-f39d-72e2-f8b4230b42a7.png)






# 参考資料

https://hikari-sedori.com/glide-41/

https://hikari-sedori.com/glide-image/

https://hikari-sedori.com/glide-43/

https://hikari-sedori.com/glide-map-2/

https://hikari-sedori.com/glide-28/



ここまでお付き合い頂きまして、ありがとうございました。