AppSheetで完成！現場の手間が省ける⁉電子棚札 移動記録アプリ

# スマホでできたらいいのに…
皆さまお疲れ様です。もう3回目の投稿になります。
暑い日が続いておりますが、熱中症対策しっかりしていきましょうね。
前回はchatGPTと共に完了報告を簡単に集約してみました。

▼前回の記事はこちら！
[【完了報告を簡単に集約してみた】](https://qiita.com/drafts/0ea2e2ac07a439afd2a8/edit)

さて今回のテーマについてです。
私が働いている部署では、電子棚札(レジの値段を表示する電子ペーパー内蔵の機械)の店舗導入を進めています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/3397a53b-5571-201f-7c37-b73591b95cb1.png)

取付応援に入った際には、操作説明をしたり、余った電子棚札や什器の保管場所を作ったり、店舗従業員の方が運用管理しやすい環境を作るために奮闘しています！
そうした取付応援の終盤、メンバーと話している時に思ったことがあります。

**「この余った棚札や什器数えて、パソコン開いて書き込むの手間だろうな、、、」**
**「これスマホでできないのかな、、、」**

現在は、手書きでメモ⇒パソコンでteamsを開く⇒記入の流れですが、ちょっとめんどくさそうだなと思っていました。また、現場だとPCでの確認が難しい場合もあるため、スマートフォンで管理できる方が便利です。

<font color="red">****"いつ"　**"どこの店舗で"**　 **"どの什器が"**　 "何個あるか"****</font>　これが一目で分かればなぁ…

**「ちょっと待ったぁ！そのアプリ、わいが作っちゃる‼」**

という訳で作っちゃいました。

> 少し内容をアップデート！
移動先を追加しました！
#protoout
https://x.com/DX_Akasaka/status/1820670837076467745/video/1 

# 使用したツール
- [AppSheet](https://about.appsheet.com/home/)
- [GoogleSpreadSheet](https://docs.google.com/spreadsheets/)

# 事前準備：GoogleSpreadSheetの設定
アプリ内で使用するデータをGoogleSpreadSheetにまとめていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/3f579bd0-0d53-0efc-0ddb-5665b837211e.png)
- #### main
　AppSheetにデータを取り込むためのシート。
　【内容】日付・回収店舗・移動先・什器・個数・備考・保管場所画像１・保管場所画像２・保管場所画像３
- #### 回収店舗
　AppSheetで回収店舗の候補をシート内容から取得できるようにするもの。
 【内容】回収店舗のリスト
- #### 移動先
　AppSheetで移動先の候補をシート内容から取得できるようにするもの。
 【内容】移動先のリスト
- #### 什器
　AppSheetで什器の候補をシート内容から取得できるようにするもの。
 【内容】什器のリスト

 # AppSheetでのアプリ作成手順

①事前準備で作成したGoogleSpreadSheet (mainシート)の **「Extension」** ⇒ **「AppSheet」** ⇒ **「Create an app」** を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/d165c785-cb5f-fbba-8fb2-d0855afbfcdc.png)

②画面左側の **「Date」** ⇒ **「TYPE」の矢印** から項目を設定します。
今回は、画像添付の **「Image」**・リストから選択肢を表示する **「Ref」**・文字を入力する **「Text」** を使用します。
[その他項目の詳細はこちらをご確認ください。](https://support.google.com/appsheet/answer/10106435?hl=ja&sjid=12930985291990369059-AP)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/1e510fc8-9776-5013-5b64-3776e1dfa961.png)

③保管場所画像1～3のTYPEを「Image」に変更し、右側の青い＋マークを押すと…
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/5edd10f1-1958-1097-e804-b9c1a966046e.png)

カメラマークが表示されるようになりました！
ここから画像を選択したり、スマホだと撮影した写真をそのまま添付できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/d1f39ac4-db1c-5871-4bb0-89121960c834.png)

④リストから選択肢を表示する準備をします。
「Date」横の **＋ボタン** ⇒「GoogleSpreadSheet」 ⇒  **事前準備で作成した「GoogleSpreadSheet」** を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/36036d92-5628-672d-8dd2-e8422b1becce.png)

リストとして使用したいファイルに✓が入っていることを確認  ⇒ **「Add 3 tables」** を押します。
これでリストとして使用する準備ができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/7700b653-00d9-45cb-56c2-c869a47cefc7.png)

:::note warn
**注意** 
ファイルが複数ある場合は、上記をファイル数分繰り返してください。
:::

⑤リストから選択肢を表示します。TYPEを「Ref」に変更するとこのような画面が出てきます。
設定したいシートを選択 ⇒ **「Input mode」** を選択 ⇒ 右上の **「done」** を押して完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/d88e6640-5aa8-e0bb-4bd9-0cdb12d62b8a.png)

:::note warn
**注意** 
 入力後必ず **「done」** を押してください。変更が保存されません。
:::

⑥必須項目の設定をします。
画面の右側「REQUIRE」で必須にしたい項目に✓を入れる ⇒  **「SABE」** を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/6b68f589-a298-7b67-93b1-f0d4fe7294ec.png)

⑦「Views」を設定します。
画面左側の **「Views」** ⇒ **「Views」** ⇒ **「View type」** を選択 ⇒ **「SABE」** を押します。
今回は一覧のように見えるよう **「Table」** を選択しました。
「View type」を選択するたび、右側の画面が変わっていきますので見やすいように設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/50d014cc-9875-5aaa-42d8-416d9abcaab8.png)

⑧完成です！お疲れさまでした。
登録すると、画面の右側の画面・GoogleSpreadSheetが更新されていきます。

> 少し内容をアップデート！
移動先を追加しました！
#protoout
https://x.com/DX_Akasaka/status/1820670837076467745/video/1 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/dc129c79-a2e1-28cc-55a3-829648d03b63.png)

# メンバーに使ってもらった感想は？
今回使ってもらったのは、電子棚札リーダーのAさん。電子棚札導入開始から3年間リーダーを担当されている方です。
今年の上期は導入が多く、出張で飛び回っているAさんを、珍しく本社で発見したため直接聞いてみました！！
使ってもらう前には、日々の出張お疲れ話を聞きながら、こんな話をしていきました。

私「電子棚札応援に行ってるときに、什器の他店移動分を手書きでメモして、パソコン開いてTeamsに書き出すの大変そうだなって思ってたんですよ～」
Aさん「確かに、パソコン開けないときもあるしね」
私「なのでスマホで手軽に入力出来たらいいと思って、移動記録アプリを作ってみました！触ってみてください！」
Aさん「アプリ作れるの⁉ やってみる！」

:::note info
そして聞いたAさんの意見をまとめると
- **什器を複数選べるといいな～**
- 本社から持ち出すときは**個数の文字の色を変えられるようにしてほしい**　
（本社からの持ち出しは青、それ以外は赤など）
- この移動記録を**自動連携して店舗ごとのページにも記入**してくれたら大喜び！
:::


1つ目の意見について、その通りだと思いました。一度にまとめて入力出来たほうが圧倒的に手間が減ります。AppSheetの項目を増やせばすぐに実現できそうですね。
2つ目の意見について、確かに文字が黒だけだとわかりにくいと思いました。整数値だと赤・マイナス数値だと青のような設定はできないのかと思い調べましたが、出てこなかったです。。ご存じの方いらっしゃいましたら教えてください(__)
3つ目に意見について、各店舗のシートへ自動連係という考えはありませんでした！そうするとより履歴がわかりやすく整理されますね。これもchatGBTとGASに頼ればできる気がする！！

メンバーからフィードバックをいただいたので、できる範囲でグレードアップをしてみました。気になる方はぜひ開いてみてください。


<summary><details><summary><font color="rgb(107, 142, 35)">＊＊＊フィードバック後のグレードアップ内容はこちら＊＊＊</font></summary>

# メンバーのアドバイスを基に編集
- **複数の什器を一度に入力できるよう編集**
AppSheetの項目を増やして表示させました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/8c413dbe-db0d-6f27-9f19-4928465e9816.png)

- **2つ目は対処法が見つけられず失敗**
- **3つ目は回収店舗名のファイルシートを作ろうと思いましたが、chatGBTにうまく伝えられず失敗**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801565/17f496c3-0024-2c48-8994-3732f511c086.png)

</details>




今回は以上になります。
最後までお付き合いいただきありがとうございました～！