え？まだ紙使ってんの？Glideで紙の注文書にさようなら！

私はネットスーパーの本部スタッフとして働いています。
ネットスーパーと聞くと担当者の業務もデジタル化されていて、作業も簡単で楽なんだろうと想像しませんか？残念ながら我が社はその域に至っていません。裏側の作業はアナログ作業が満載です。今回はピッキング作業（注文内容を紙で出力、その注文書使って商品を集める）のデジタル化を実現したいと思い、**Glide**（ブラウザで閲覧するWebアプリケーションが作成できる）というツールを使ってお客さまの注文をデジタル注文書に作り替えてみました。

ネットスーパー業務とその問題点については下記記事でまとめております。ご参照ください。

https://note.com/matsu0831/n/nb8b6a4a60ed7


# 1.完成品と使用したもの

## 1-1.完成したものはこちら
ボタンを押して数量修正できる仕様です。
![オリジナル_324x720.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/ecf93d1b-9cfe-a019-d7ed-34bf5498e584.gif)


## 1-2.QRコード
お試しいただけます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/d4d82b7c-1f30-0020-4dca-c121b1b48d45.png)



## 1-3.使用したもの

[Googleスプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)

[Glide](https://www.glideapps.com/)


# 2.作成手順
Glideはテンプレートが数多く準備されていますので、テンプレートを使えばすぐにアプリが作成できますが、**できるなら自分で全部作ってみたい**ですよね？**でもそれって難しいんでしょ？** と思ってるあなた！**Googleスプレッドシートにデータを準備**するだけでアプリっぽくなってしまう、これがGlideなんです。

## 2-1.Googleスプレッドシートを使ってデータを準備する
ネットスーパーの受注データはcsv形式でダウンロードが可能です。私は下記データを準備しました。当たり前ですが**受注内容は毎回変わる**ので、ダウンロード後の**データの加工はなるべく行わず**にスプレットシートに貼り付けたいと思い、今回は**修正数量**という列だけを追加しました。これはお客さまが注文した商品の在庫が不足した時に**修正した数を追記するため**に作成しています。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/52898377-6c60-e358-b143-6cbf13171b1b.png)

## 2-2.スプレッドシートのデータを読み込む
データの準備ができたらGlideにログインし**New project→Glide APP→Google Sheets**の順にクリックしていき、最後に準備したスプレッドシートを選択すればすぐに**アプリが生成**されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/f4e185a3-11be-a1ea-53e2-4ca2c4fc7347.png)


## 2-3.使いやすいようにカスタマイズする
スプレッドシートを読み込むと下のようなアプリが作成できました。でも何だこれ？って状態ですよね。これを使いやすく、見やすく設定を変更していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/1522a635-ee49-44ff-d816-20c616b001cf.png)



### 2-3-1.表示される項目を変更する
ネットスーパーのデータとして**絶対に必要なのは商品名とJAN（バーコード）、注文数量です**。これらを表示させるために画面左側、``SCREEN``の中にある``List``を選択すると、画面右側に``CONTENT``が表示されます。下図の赤枠のように、``Title`` ``Detaills`` ``Caption``それぞれ**JAN・商品名・数量**に変更します。これで少し見やすくなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/d48df615-deac-e0ba-4bb4-b38856174f59.png)




このままでも使おうと思えば使えますが、さらに見やすく**お菓子・調味料**などの部門別に表示させたいと思います。画面右上の``Options``を押すと下記画像のように切り替わります。次に``GROUP``に表示されている``Group by``を**部門名**に変更すると、これでもう**紙で出力した時とほぼ同じ**です✨✨✨(紙データをお見せできないので、比較して表示できませんが）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/1569709f-b910-c5d7-f3e1-d1bf6ca85471.png)

### 2-3-2.タブやアイコンの名称変更とタブの追加

次はタブの名称変更です。今は**New Tab**になっています。
画面左側の``TABS``内に表示されている``New Tab``を選択すると、画面右側に``TAB``が表示され名称変更ができるようになります。赤枠内の``Label``と``Tab Icon``を変更します。私は**注文リスト**に変更しました。さらにタブを追加したい場合は``TABS``の横に表示されている``+``を押すと新しくタブが追加されます。

:::note info
画像では私がすでにいくつかタブを追加し、グループ別（農産・水産など）に表示できるようにしています。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/d900076c-4807-9bf8-cb74-20a47cf90752.png)


### 2-3-3.アクションボタンの設定
最後は**アクションボタンの設定**です。
下記画像で四角い赤枠で囲っている**商品（ギンビスアスパラガス ）** をクリックすると詳細ページに切り替わります。赤丸で囲っている部分は品切れなどの理由で**注文数量を確保できなかった場合**、この値を変更しておけば、後で担当者がネットスーパーシステムで**注文数量を修正**するときにこのデータを見て修正します。**変更作業がワンタッチ**でできるようにボタンを設置します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/98a11fab-ad3f-0c6d-f32f-e272c0e8aa29.png)

画面左側の``SCREEN``に表示されている``+``を押すと``Insert Component``が表示されるので``Button Bar``を選択します。すると下図のようにプレビュー画面にボタンが2つ配置されます。このボタンを押すと数量修正部分が増減するように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/d6f2df83-1690-d14a-3afb-c69ee5098780.png)


``Title``部分がそれぞれ``Left`` ``Right``となっていますので、下の図のように**減らす** **増やす**に変更します。さらに下にスクロールすると``ACTION``を入力できるので下記、赤枠のように入力することで**左ボタンを押せば数量が-1、右ボタンを押せば+1**になるように設定されます。これで数量修正が簡単にできるようになりました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/f86695f8-a512-c7ab-9c92-4da9f7f9ee42.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671003/7361d501-9bf2-809a-5889-3db1f41dfbb0.png)


## 3.職場の声
**Glide版ピッキング完成**です✨✨✨せっかくなので同僚のネットスーパーの本部スタッフ4人に見せて、実際に使ってもらいました。第一声は全員、『おぉ！すっごい、便利！』と歓声があがります。しばらくその言葉に酔いしれていたのですが、急に現実に引き戻されるコメントが続々と発せられます。
同僚A　これスマホで見るには文字小さくない？
同僚B　数量修正はできるけど、商品があったかどうか？チェックすることができないね。
同僚C　生鮮品は100g単価が変わると総額売価も変わるから書き込みができないと。
そして、極みつきは上司の一言。
『これ**デジタルピッキングじゃないな**。ネットスーパーのシステムからアプリへデータを流してアプリでピッキングを行う。**アプリで行った修正作業がネットスーパーシステムに反映する**。これがデジタルピッキングだよ。これは**ペーパーレスピッキング**。紙の削減にはなるけど、書き込みができないなら全部門で使うことはできないね。』

## 4.反省
**デジタルピッキングアプリ**作りました！と紹介してしまったのが、そもそもの間違いでした。部署内のデジタルピッキングの定義は紙を使わずにピッキングができ、修正した内容がネットスーパーシステムに反映することだったのです。私はいつの間にか**デバイスを使ったピッキングを可能にする**が目的になっていました。
残念ながら上司が納得するものを作ることはできませんでしたが、フィードバックでいただいた改善点を実装すれば、**ペーパーレスピッキング**として使うことはできそうです。ネットスーパー1店舗で、**1日150枚くらいの用紙**を使っていますので、**経費にも環境にも優しいツール**ができると思います。