AppSheetを使って商品陳列お助けアプリを作ってみた

 # もっとスムーズに商品陳列できないかな
     
私は小売業で商品の企画・管理をしている部署で仕事をしています。パソコン業務が主ですが、店舗に出向いて、自分で商品を並べたり、売り場のチェックをすることもあります。陳列の見本づくり・手直し修正をする際に、自分たちで出している指示書通りに商品出すのが大変だなと思うことがあり、商品陳列を助けてくれるアプリを作ってみました。



:::note info
商品のバーコードをスキャンすると商品を置くべき場所を示すアプリ
1\.アプリを開く
2\.手に取った商品のバーコードをスキャン
3\.タップして商品情報を開く
商品情報と出す場所の列・段が表示される
:::

https://x.com/sak107312/status/1832787534017146943





 # お助けアプリが欲しい理由:point_up:

 ### 指示書って何？
 こんなのです↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/435bae82-5899-b265-95b7-b8ddc654b7fd.png)

モノクロで紙に印刷されたの指示書の束。１つ１つの商品を「どこの枠の、何列目・何段目にこの商品を出す」ということ示しています。その内容は商品を決める段階から、よりお客さまが商品を探しやすいようにと検討を重ねて作られたもので、商品を導入する際に一緒に提供されます。同じ商品でも時期によって並べる順番を変えたりもします。

 ## 指示書通りに商品を出すには時間がかかる
 
商品の入れ替え期は特に大変。たくさんの箱の中から商品を取り出し、紙の指示書とにらめっこ。商品名・サイズ・バーコードが頼りに探します。ぱっと見同じでもよく見ると素材が違ったり、サイズが違ったり、同じようなアオが４種類もあったり・・。延々続くにらめっこに疲れ、指示書通りに並べてくださいとお願いする側の人間なのに「もう適当でもいいですか」と言いたくなることもあります。
![4b94a593-7977-483f-b387-67709220618e.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/bbf67f2a-da4b-8525-551f-0dc2f6b6903c.jpeg)

指示書どおりにきちんと並べてくれる店はもちろんたくさんありますが、できていないときもあります。
担当者は商品を並べたり整理するのはもちろん、お客様応対・レジ打ちなどを限られた時間で行っています。担当外のメンバーが商品出しを手伝うこともあります。持ち時間の中で商品を出す場所が特定できないと「とりあえず出そう」と空いている場所に置いてしまう気持ちもわかります。
でも、指示書通りに売り場を作ってもらいたい。もっと商品を出しやすくする方法はないかなと思っていた時にこの記事を見つけました。

https://qiita.com/gonchichi21/items/544010fe47557af92bc6





自分でも作れないかなと試行錯誤。記事のようにパパっととはいきませんでしたが、私でもアプリを作ることができました。


# 実際の手順:writing_hand:
 




### 1\.GoogleSpreadSheetでデータベースを作る

・別途管理している商品マスターシートから　コード・商品名・カラー・サイズを転記

・紙の陳列指示書から目視👀で列・段を確認して追記

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/cc987113-49a9-6091-2b15-22649c6030b7.png)


 ### 2\.AppSheetを開いて各項目を設定
 

**アプリを作成**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/f4e14cc5-c8d2-1075-cf78-adce0c0879f6.png)

**＋Create**を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/e16c5743-3ff3-c556-db76-decf11b63a4b.png)

スプレッドシートの項目が一覧になるので必要項目を修正していきます。何をどう触ったら作りたい形になるのか、若干難航しましたがChatGPTに相談したりAppSheetのマニュアル探したりして形になりました。

・今回商品を探すキーはバーコードにしたいので``KEY``にチェック

・バーコード　の``TYPE``は　``Text``にする　（ここ重要！）

・バーコード　の右側にカーソルを移動して　``SARCH?`` `` SYAN ?``にチェックを入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/5682e944-6bc6-8ba4-8c01-bf45a0e17908.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/c3f011fb-188c-2588-c75f-cd7918fd499c.png)
最後に　**REGENERATE**　を忘れずに





# 早速試してもらいました:punch:


**1人目　:raising_hand:指示書作成担当者**
普段、一緒に店舗を回りながら「指示書をもっと見やすくするにはどうしたらいいのかな」という相談をしていたこともあり真っ先に声をかけました。自分で作れたことがうれしくて、ハイテンションで「これがあれば商品を出すの楽にならないかな？！」と使い方を説明。実際に触ってもらいました。


***これはいい。列と段が1発で分かればどこに並べるか探さなくていい。使えるようになったら売場の人はすごく助かると思うよ。修正があるときの指示書も、お店で印刷しなくて済むようになるね。***




**2人目:woman_tone1:店舗担当者**

現場の声も聞かなきゃ！と急いで店舗に向かいます。アポなしでいきなり突撃したので相手にしてもらえるかドキドキでしたが、「3分だけ時間ください！商品陳列を楽にできるかもしれないアプリを作ってみました！」と声をかけ試してもらいました。

***これがあると探す手間が省けるからいいと思います。字が小さいから商品のバーコードの数字を見るのも、指示書を見るのも大変なんですよ。ぜひ使えるようになって欲しいですね。***


との好意的な反応をいただきました！


**３人目:👨🏻商品企画担当者**

***へ―これ自分で作ったの？自分でアプリって作れるんだね。これはいいよ。詳細画面に商品を並べた全体像があるともっといいね。完成形を見られたら出来栄えがわかりやすくなるよね。あと、お店ごとに並べ方が変わるものもあるから、それもわかるようにしないといけないね。***

お褒めの言葉とともに改善要望もいただきました:fist:

## ひとまず整理:file_folder:

自分で役に立ちそうなアプリが作れた！ということが嬉しかった:heart_eyes:DXを学んでデスクワークを効率化したいと考えていましたが、アイディアがあれば店舗の効率化にも貢献できそうだなとワクワクしてきました。

今回のアプリまだ完成形ではありません。

:::note info
いいところ
・商品陳列に悩まない
・操作が単純、３分で理解してもらえる
・指示書修正時、データで陳列場所変更がわかるので現場で印刷の必要がない
:::

:::note alert
課題
・データベースの作成に時間がかかる
・同じ商品でもお店の規模で陳列場所が変わるので表記方法に工夫が必要
・現時点では現場の端末でAppSheetが使えない
:::

# 課題克服チャレンジ💪🏻

### 👨🏻からのお題その１　
:::note warn
詳細画面に指示書の全体図があるといいよね
:::
ベースシートに``売場見本``に項目追加
表示したいエクセルをURLで保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/3830825b-0c04-264b-f7e8-8eb966bf23cb.png)
アプリ作成画面に``売場見本``項目が追加されるので``TYPE``は　``Url``にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/a0913668-1a07-cb85-fcae-69aea6624249.png)
大元の指示書にもジャンプできるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/da1e118f-2851-6fd6-10a6-aea6a694a33a.png)

:::note 
はじめは元のSpreadsheetに直接**図**として貼り付けようとしていましたがうまくいきませんでした。同じドライブ内に一度保存してそのURLをコピーを貼り付けることでうまく表示できるようになりました。
:::




### 👨🏻からのお題その２　

:::note warn
「お店毎に並べ方が変わるから、それがわかるようにしてほしい」
:::

シートを追加する⇒あらかじめ別のGoogleSheetで保存していたものを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/6aa3ec24-afe1-8f46-f094-141baf13fb24.png)
``View``の設定をする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/efa74e8f-0488-bcf3-c03b-657caa6b60cf.png)
``PRIMARY　NAVIGATION``　の横の``＋``を選び、新しい``View``の名前を付ける
先ほど追加したデータを選択して表示される形を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/6ac72bd2-e665-2e06-29a9-ccfdefb46197.png)

新しいViewができました！



### 準備段階の課題　
:::note warn
データベースの作成に時間がかかる
:::

ChatGPTにVBAコードを書いてもらえばいいんだよ！という情報をいただいたので意気揚々とチャレンジしてみましたが、難しかったです。ChatGPTに読み込んでもらいたくて元のエクセルをコピー＆ペーストするも貼りつかない。テキスト形式になってしまいます。スクリーンショットでやっと貼付に成功しました。できたと思ったら、データが複雑すぎるということでなかなかうまくいきませんた。
ChatGPTに何度も聞きながら、似た形の簡易版をでチャレンジ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835981/554449fe-2d55-fdf6-6621-9bd0a323d95d.png)

<details open><summary>できたコードはこちら</summary>

```
Sub TransformData()
    Dim wsSrc As Worksheet
    Dim wsDst As Worksheet
    Dim lastRow As Long
    Dim i As Long, j As Long
    Dim dstRow As Long
    
    ' 元のデータがあるシートを指定（シート名を"元データ"に変更するか、実際の名前を使用）
    Set wsSrc = ThisWorkbook.Sheets("元データ")
    
    ' 新しいシートを追加
    Set wsDst = ThisWorkbook.Sheets.Add
    wsDst.Name = "変換後データ"
    
    ' 新しいシートのヘッダーを設定
    wsDst.Cells(1, 1).Value = "エリア名"
    wsDst.Cells(1, 2).Value = "番号"
    wsDst.Cells(1, 3).Value = "名前"
    wsDst.Cells(1, 4).Value = "種類"
    wsDst.Cells(1, 5).Value = "年齢"
    wsDst.Cells(1, 6).Value = "性別"
    wsDst.Cells(1, 7).Value = "好きなもの"
    
    ' データの開始行を設定
    dstRow = 2
    
    ' エリア「鳥」部分のデータを変換
    For j = 1 To 3
        wsDst.Cells(dstRow, 1).Value = "鳥"  ' エリア名
        wsDst.Cells(dstRow, 2).Value = j  ' 番号
        wsDst.Cells(dstRow, 3).Value = wsSrc.Cells(3, j + 3).Value  ' 名前
        wsDst.Cells(dstRow, 4).Value = wsSrc.Cells(4, j + 3).Value  ' 種類
        wsDst.Cells(dstRow, 5).Value = wsSrc.Cells(5, j + 3).Value  ' 年齢
        wsDst.Cells(dstRow, 6).Value = wsSrc.Cells(4, j + 3).Value  ' 性別
        wsDst.Cells(dstRow, 7).Value = wsSrc.Cells(5, j + 3).Value  ' 好きなもの
        dstRow = dstRow + 1
    Next j

    ' エリア「海」部分のデータを変換
    For j = 1 To 3
        wsDst.Cells(dstRow, 1).Value = "海"  ' エリア名
        wsDst.Cells(dstRow, 2).Value = j  ' 番号
        wsDst.Cells(dstRow, 3).Value = wsSrc.Cells(7, j + 3).Value  ' 名前
        wsDst.Cells(dstRow, 4).Value = wsSrc.Cells(8, j + 3).Value  ' 種類
        wsDst.Cells(dstRow, 5).Value = wsSrc.Cells(9, j + 3).Value  ' 年齢
        wsDst.Cells(dstRow, 6).Value = wsSrc.Cells(8, j + 3).Value  ' 性別
        wsDst.Cells(dstRow, 7).Value = wsSrc.Cells(9, j + 3).Value  ' 好きなもの
        dstRow = dstRow + 1
    Next j

    ' メッセージボックスで処理完了を通知
    MsgBox "データの変換が完了しました！"
End Sub
```
</summary>

これを応用してデータの書換を進めます。

# まとめ:writing_hand:

なんとか形になりました！実用化できないか思案中ですがまだ残っている課題もあります。まずは、自分の担当商品の完成版を作って、たくさんの人に試してもらって、声をあつめて、広げていけるようにしたいと思います。最後に「商品陳列お助けアプリ　改」の動作確認です。




https://x.com/sak107312/status/1835318086620328044