#Glide 初心者向け解説 画像付き日報をデジタル化しよう!!

## 私の業務『移動販売』とは

　私はとあるスーパーで、移動販売や無人店舗の新規開拓を担当しています。
　地方では人口減少から、コンビニや個人商店が閉まり、買物場所を失う方が増えています。
　高齢の方の、体力低下・免許返納も相まって、買物難民は増加の一途を辿っています。

　そんな中、**ご自宅前まで伺い、商品を販売する「移動販売」が好評**を頂いています。
　<font color="Red">**通販ではなく「自分で商品を見て選び　自分で買いたい」**</font>と話すお客さまは多いです。
　![123.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d579a59a-b86d-2d2e-f7d9-6f7bbd669e79.png)
## 「80箇所も手書きする日報」をデジタル化!

 そんな中、今回[Glide](https://www.glideapps.com/)を使って制作したツールはこちらです。
 販売員が手書きしている「日報」をスマホで入力できるようにしました。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f477d3c2-9e47-3a5a-188b-a0af3ac5fb2f.png)
 出発前チェックリスト、画像、到着時間や売上記録等が、アプリ上で簡単に登録できます。
 登録データはアプリ上で確認できるだけでなく、スプレッドシートにも自動で記録されます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d154ebe7-4784-4c0e-e3eb-d13cce2f4642.png)

 ちなみに手書していた「日報」はこんな感じ。
 <font color="Red">**接客・運転で非常に忙しい中、約80か所の項目を「手書き」。。。**</font>恐ろしい。
 ***少しでも販売員が接客に注力できるように、日報のデジタル化に挑戦しました。***

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/9ec09c0f-eb30-f724-f573-f263c06ec9e8.png)

 **今回はGlide初学者向けに、この日報ツールの作り方を解説していきます!!**

## 使用ツール・事前準備

【使用ツール】
 [Glide](https://www.glideapps.com/)
 [Google スプレッドシート](https://docs.google.com/spreadsheets/u/0/)

### 準備①スプレッドシート

 まずは同じようにスプレッドシートを作成してください(画像クリックで拡大)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0faf108c-5c1f-4647-ddcd-1239c094913b.png)

 タブは下記の通り準備します ☝は「月曜日」の欄に書き込みます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/4e035cb8-ffe6-e69f-c22a-384aeee8a236.png)

 「担当者名」「乗車前」「帰着時」「備品」下記の通り書き込み。
 アプリで「選択」してもらう項目はあらかじめ全部リストアップしておく感覚です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/df5dd6d0-cb5d-6582-c0e6-2c5e137b1bee.png)

 これでスプレッドシートの準備完了。シート名は「日報」に。

 ### 準備②Glide

 https://www.glideapps.com/
 にアクセスし「Sign Up」「Sign Up with Google」「ご自身のアカウント選択」
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/1afd6466-a0c4-c41c-d2aa-e6ad27e44d9d.png)
 名前を入力し「Personal use」を選択し、Continue。
 続いて利用規約などにチェックを入れて再びContinue。

 NewProject → Glide App → Google Sheets → Continue
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e8aabd3e-be35-8d9a-3180-32f7e59edc7f.png)

 Allow coolies が出たらACCEPT その後先程の「日報」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/981ebe41-b76f-0345-f6df-40608a206de7.png)

これで事前準備完了です!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/5da79dc9-8ced-2cb9-0826-ccbf369121ce.png)

## Glide【1】入力フォーム

 ＋ボタンで入力フォームを立上げ、左下のSCREENからフォームを整えていきます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e1306d82-818a-4132-e7b0-5f2564fee510.png)

 今回は4種類のフォームで入力します


:::note warn
***①日時 ②データ選択 ③チェックリスト ④画像投稿 ⑤ボタン時間入力 ⑥数値 ⑦コメント***
:::
### ①日時

 ＋ボタンからData選択 一番上に持ってきます
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/cb751e28-5a3e-502d-21e2-b9093807439a.png)

 右のDefault Value の「：」から「today」を選択 SCREEN内の「Text Rntry実施日」は消去。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/791e3bab-939b-5022-8e95-97118ec607f2.png)

 これで初期値「今日」の日付入力フォームが完成しました!簡単!

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c1a20458-71b7-9e0a-24ab-9c96e0b21773.png)

### ②データ選択

 続いて担当者名　を一覧から選ぶ「データ選択フォームを作成

 ＋ボタンから「Choice」 Write to「担当」 Source「担当者名」
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a383814c-73ff-b658-e5f4-8e0151d6256d.png)
 
 Default Valueから誰かを選択(しなくてもよい)　あらかじめ設定した担当者からの選択フォーム完成
 事前に自動生成されている「Text Entry 担当」は消しておきましょう
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f44a25d4-df92-9286-9171-3512156ac7de.png)

### ③チェックリスト
 ＋ボタンから「Choice」 Write to「出発前点検」 Source「乗車前」
 図のように設定すると　チェックリストの完成!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/8245db96-183d-51a9-b01f-292427b9ea63.png)

 ### ④画像投稿
 ＋ボタンから「Image Picker」 Colum「アルコールチェック画像」
 その他図のように設定すると　カメラからの画像投稿フォームの完成!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e9ce36af-714c-af93-f3fd-219265b00597.png)

 ### ⑤ボタン時間入力

 続いて時間を入力するのですが、数値キーによる数値入力ではなく
 <font color="Red">**ボタンを1タップすれば現在時間が打ち込まれるフォームを作ります。**</font>

 ＋ボタンから「Button」 Label「地点①到着時タップ」と入力 Actionから「Set Column Values」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/54aceae7-586f-c78f-fb8b-97fd611c1af4.png)

 地点①到着時間 から「Current date/time」を選択 これで時間入力ボタンの完成
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/3d21a497-aab1-04b0-5074-e3df2f854ba9.png)

 Data Time を選び Column「地点①到着時間」 ボタンタップで現在時間入力フォーム完成
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b492c267-eb43-aaa5-2c7f-85aa53daa1ca.png)

 ### ⑥⑦数値/コメント入力
 
 数値はNumber Entry コメントは Text Entry でフォーム作成
 必要な入力先ごとに Columnを設定すればOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/14c082b7-9d56-8db3-1c72-275ab367edac.png)

 これを繰り返して入力フォームを完成させます!
 Hint からボタンではない画面表示も追加できます
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e817c9b0-77f7-d5c9-6cc7-67cc2252f952.png)


## Glide【2】リストUI　Glide【3】スプレッドシート加工

 執筆中