【AppSheet】紙媒体をデジタル化！客注伝票をアプリ１つで管理！

皆さん、こんにちは。

私は普段、スーパーで店員として働いており、商品の仕入れや計画を担当しています。また、商品の陳列や販売も行っています。

デジタルに関しては初心者ですが、幸運にもデジタルや最新ツールを学ぶ機会に恵まれ、現在は自己投資としての学習に毎日真剣に取り組んでいます。そして、デジタルツールの活用を同僚や先輩、後輩へと広めていきたいという目標を持っています。


今回はデジタルツールの力を借りて、身近な業務改善を進めていきます。


## 目的
①自分の身近な問題から業務改善をしたい
②自分だけでなく、実際により多くの人に活用してもらいたい、喜んでもらいたい。
③デジタルツールを活用したことも合わせて発信し、自己学習でデジタルツールの使用を推奨する啓蒙活動も合わせて行いたい

## 紙媒体をデジタル化
デジタル化が進む一方で、普段の業務の中で紙媒体はまだまだたくさん使用されています。
その中でも今回は「客注品」に対しての業務をデジタル化していこうと思います。

:::note info
**客注品とは？**

小売業界にて使われる言葉で、お客様が店頭にない商品を取り寄せて販売することを指します。
:::

## 客注品　業務の中身
私の会社では承り伝票を使用して客注の業務を実施しています。

大まかな流れとしては下記の手順です。

①お客様より商品の取り寄せを承る。
②伝票にお客様の情報（名前や電話番号、商品など）を記載する。
③商品を発注し、誤って入荷した商品をお店で販売してしまわない様にチームで共有する。
④入荷後は、伝票を確認してお客様へご連絡、その後来店してもらい引き渡し

承り伝票は個人情報に当たるので、施錠管理をしなければなりません。



## 今回使用するツール

**``Googleスプレッドシート``**
**``AppSheet``**


## 実際に作成したアプリ

こちらが、今回作成したアプリになります。

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">客注アプリ作ってみた！<br>動画では商品とお客様を新規作成してますが、事前に登録しておいてそこから検索、選択も可能です。<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/AppSheet?src=hash&amp;ref_src=twsrc%5Etfw">#AppSheet</a> <a href="https://t.co/BNW75ztT6p">pic.twitter.com/BNW75ztT6p</a></p>&mdash; Ry7081031 (@Ry40562466201) <a href="https://twitter.com/Ry40562466201/status/1801015501877076128?ref_src=twsrc%5Etfw">June 12, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらのアプリ１つで管理できるようになりました。
また、誰がいつ実施したのか？も見られるようになっており、承り伝票では出来なかった事も実現できております。
紙媒体を使用しなくなるので、施錠管理・保管が不要となります。


![スクリーンショット 2024-06-13 071747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/17cbd0df-f4ea-75a2-2a15-7eb67d242cd7.png)
上記の画像のように、お客様のタブからは選択したお客様の過去の注文履歴なども確認できます。

また、事前に登録しておいた商品名やJANコードから検索して、登録画面へ進める事も出来ます

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">商品名から検索、選択して登録へ進むこともできます <a href="https://t.co/1R44B8cf0N">pic.twitter.com/1R44B8cf0N</a></p>&mdash; Ry7081031 (@Ry40562466201) <a href="https://twitter.com/Ry40562466201/status/1801017924951351346?ref_src=twsrc%5Etfw">June 12, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Googleスプレッドシートの設定

以下の4シートを事前に準備しておきます。
中身は非常にシンプルです。

### ①メイン　シート
![メイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/11cba6db-b60e-f143-5d6b-ac7b12a306ba.png)



### ②社員マスタ　シート

![スプレッドシート　社員マスタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/0528cb61-7d8a-1eeb-81f9-8b20b9812f22.png)

### ③商品マスタ　シート
![スプレッドシート　商品マスタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/b5518658-72bd-2c09-b74f-f3b8fdbd7745.png)

### ④お客様　シート
![スプレッドシート　お客様.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/20e06efc-7879-34a3-5c6e-ca599bbd77a3.png)



## AppSheetの設定

Googleスプレッドシートが準備できたら、拡張機能から``AppSheet``を選択していきます。
開いた``AppSheet``を以下の画像のように設定していきます。

### メインの設定
![111111111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/bae5ed1d-4377-b306-a82b-4ef67691368e.png)


``TYPE`` が``Ref`` になっているところは、NAMEのところにある鉛筆マークのeditから参照先を入力する必要があります。

![作業者.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/f6eb7dd8-4796-36e3-e099-27dfe955f69b.png)

作業者は``Source table`` を社員マスタにします。
品番は、``Source table`` を商品マスタに、
お客様は、``Source table`` をお客様にします。

ステータスは``Type`` を``Enum`` に設定しEdit画面は以下のようにしています。

![ステータス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/4c08e810-99db-0db5-6129-0d71c436247d.png)

``Enum``の``Value``に入れた値が、ステータス欄から選んで入力することができるようになります。

こちらでメインシートの設定は完了です。


### 社員マスタの設定
![社員マスタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/bcddaa97-78d5-e2a7-03a9-361f6d650a24.png)


### 商品マスタの設定
![商品マスタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/4d8b463d-922a-857c-1e6e-a8231094d793.png)

### お客様の設定
![お客様.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/d3185a5a-277f-9927-c9e3-e2680d14cd55.png)

以上で``AppSheet``のデータ部分は完成です。

## View画面の設定

アプリでの実際のView設定をしていきます。
左側にあるスマホの画面、雷マーク、ロボットの顔があると思います。
そちらのスマホ画面からViews画面を設定できます。

画像の赤線で繋げているところが、実際にアプリで表示されるところになります。


![アプリView画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/26947bfa-98e3-5c69-f85f-9039e50d1977.png)

左側の赤枠 PRIMARY NAVIGATION　の＋から
「商品マスタ」と「お客様」を追加していきます。

``For this date``　には表示したいシートを選択してください。
``View name``　は任意ですが、表示したいシートと同じ名前にしておくとわかりやすいと思います。

``Viewtype`` は ``card``を選択していきます。

大まかな設定は以上になります。

## 作ったものを実際に使ってもらった

実際に自部署のチーム何人かに使用してレビューしてもらいました。

### 良かった点
・アプリ一つで完結するので、管理しやすい。
・紙媒体を使用しないので、情報の保管なども楽
・過去の受注なども検索1つで簡単に調べられてすごい！


### もっとこうして欲しい
・お客様情報がないので追加して欲しい
→修正して、追加済み

・入荷予定日も合わせて実装して欲しい
→修正して、追加済み

・JANコードの入力など、スマホ画面での入力が年配には少し難しいので、少しでもこの作業を減らしたい。

・商品マスタに画像があるともっとわかりやすい


数日間にわたり、修正も実施しながらレビューを頂きました。

## カメラ機能で読み込みが解決のキー
もらったレビューの解決策としては、以下2点です。


・JANコードの入力をなくすにはカメラで読み込む機能を実装すれば解決できそう

・商品マスタの画像追加は、スプレッドシートで用意するか、カメラで画像登録ができるようにすると解決できそう

いずれもカメラでの読み機能がキーになっています。

## 作成してみて、今後の課題

短期間でデジタル初心者でも簡単に作成できたため、身近な業務改善の可能性が広がりました。実際に使用してもらい、レビューを受けながら修正を重ね、数人に協力してもらいましたが、この過程を通して全員がデジタルツールに関心を持つようになったと思います。

今後は、要望の改善とさらなる効率化を目指して、チーム全体で取り組んでいきたいです。