お疲れ様です。
業務効率のため日々奮闘中の事務員兼主婦です。
職場の業務効率UPのため、ノーコードツールのGlideで管理簿アプリ作成などにチャレンジしています。
今回は、以前作成していたアルコール検査記録アプリを少し改良してみたので、記事に残したいと思います。ちなみに職場のアルコールチェックは相変わらず紙に記入する方法から変わっていません
完成品
使用ツール
製作開始
１. Glideに使用するGoogle Sheetsを作成
普段使用しているExcelデータの書式を元にGoogle Sheetsを作成します。Glideの設定次第ではExcelをそのまま使用することも可能です。今回はアルコール検査記録シートとマスタシートを準備しました。
アルコール検査記録シート
マスタシート
２. Glideの設定
基本的な使い方は下記を参考にしました。
①＋New appを押して新規作成。
②名前を付けてモバイル版かPC版かを選択。今回は出先での使用も考慮しモバイル版で作成しました。
③連携させるソースを選択する。
④SCREENのSouceは使用するGoogle Sheetsを選び、Labelは表題に表示させたい文字を入れます。STYLEは見やすいように今回はChecklistを選択しています。ITEMS DATAはDescriptionに運転前検査日時、Checkedにチェックを選択します。
⑤OptionsでGROUPを氏名に選択し、氏名ごとに記録を順番に表示させるよう設定します。また、検索もできるようにShow search barにチェックを入れます。
⑥+Addボタンを押し、入力画面の設定をします。氏名はChoiceコンポーネントで設定、Sourceをマスタシートの担当者欄からDropdownで選択するように設定します。
⑦運転前検査日時はData Timeコンポーネントで設定し日時を特定するようにします。
⑧今回、検査場所を設定するのに初めてLocationコンポーネントを使用してみました。このスイッチを入れることで現在位置（経度＆緯度）情報が自動的に入ります。
Data画面
Googleスプレッドシート
⑨少々味気ないので、Mapコンポーネントで現在位置をGoogle Mapで表示させてみました。１つ前の検査場所で現在位置（経度＆緯度）を特定しているので、このデータを元に地図を表示できます。
⑩アルコール検知器数値は、Image Pickerコンポーネントで画像を取り込むようにします。今回アップロードする画像はその場でカメラ撮影したものに設定しました。
⑪酒気帯びの有無は、Choiceコンポーネントを選択、マスタシートの酒気帯びの有無欄から選べるようにし、デザインStyleをChipsで選ぶよう設定します。
⑫備考欄はTxetコンポーネントを選択、記入できるようにします。その後は引き続き、同じような順番で運転後記録の設定も行います。
⑬続いて、日毎の詳細画面の設定になります。１日の運転前＆運転後の入力が済んでいる場合は左側にチェックを入れるような仕様にしています。こちらをクリックします。
⑭Titleに氏名を表示、Subtitleに運転前検査日時、Imageに運転前のアルコール検知器数値を表示させて、運転後のチェックも忘れないように設定しました。あわせて、ACTIONのShow edit screenをクリックし、Titleで追記と表示させ、Iconを設定します。
⑮Fieldsコンポーネントでは詳細については、一画面で見やすいように項目を絞り設定しました。
⑯続いて、すでに運転前の入力は済んでいて、運転後の入力を追記する場合です。左側にはチェックがまだ入っていません。こちらをクリックして画面を表示させます。
⑰追記ボタンを押すと、保存されている運転前データが表示されますので、運転後の情報を引き続き入力していくような流れになります。
今回の作成ポイント
日時の表記についてはGlideもGoogle Sheetsにも設定が必要です。
【Glide】
Data画面の日付のプルダウンを押してEditを選択します。
日時表示されるようにDate & Timeを選択、長さを Mediumにし、秒数は非表示にするためWithout secondsと設定してSaveで保存しました。
【Google Sheets】
日時の列には表示形式の詳細設定をしておくようにします。
時間は秒数まで表示されてしまうので、カスタム日時を選択して、見やすいよう設定します。
:と秒(01)は削除し適用ボタンを押すと下記の表示に変わります。
使用してみたところ
あえて、画像のアップロードはその場で撮影するようにしたものの、実際に撮影する時にアルコールチェッカーの表示がすぐ消えてしまうため、写真をすばやく撮らないといけないので慌ててしまいました。また、アプリ操作中に地図を触ってしまうので、表示がズレてしまう事も判明しました。
修正開始
①アルコール検知器数値はImage PickerコンポーネントをCamera Phot Rollに変更し、一旦保存した画像もアップロードできるように変更しました。
②また、Locationとmapの表示が近過ぎて操作するのに支障をきたしていたので、余白スペースを入れることにしました。Saparatorコンポーネントを追加し、SizeをMediumにして余白スペースを作り、見やすいようにDraw Lineで区切り表示させてみました。
感想
今回はマップなどで現在地を入れられるようにしたことで、少し見栄えが良くなったと思います。職場でも実際に使用する営業担当の方へ、さらにご意見を伺っていきたいと思います。
参考資料
ここまでお付き合い頂きまして、ありがとうございました。