｢これどこにあるの？｣ Teachable Machineを使って売り場探すLINE bot作成記録

## ｢これどこにあるの?｣

こんにちは。

自社の店でも迷い子になる、コードとか見たらすぐ頭が痛くなるのにDXに関わっている部門で働くスーパーマーケット社員でーす。

> 近ごろは、人手不足が深刻だ。特別なスキルを要求するわけではなく、ごく普通のアルバイト人員を求めているのだが、採用に大苦戦するようになっている。･･･個々の店では不足する人手が補充されないため、残ったスタッフにさらに重い負荷がかかるようになり、やがて彼らが体や精神を壊して脱落するという“悪循環”に陥る店も少なくない。･･･小売や物流・倉庫業など「体力勝負」の業界に共通する悩みのようだ･･･

最近、このようなニュースがよく流しています。スーパー運営している自社も大きく影響され、本社の人も店舗支援に入らなきゃ。もちろん、よく行く店もあるし、年に一回も行かない店も断然ありえます。ですが、この時一番困るのは、お客さんから**｢これどこにあるの?｣と**のお問い合わせです。

答えはいつも **｢申し訳ございません。この店に仕事をするのは自分も初めてですので･･･他のスタッフに聞かせていただきます。少々お待ちくださいませ。｣** となり、店員さんを探すに **猛ダッシュ** 。

**｢その場で、答えて案内できてしてほしい｣** と考え、今回はTeachable Machineを使って売り場探すLINE botを作ってみよう。

## 完成品

https://twitter.com/Ex2kSU5kdtINw9K/status/1532594328039997440

![9c55edc30799c2182004e6fdb890908a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/78f9c2f7-f878-f812-02a8-0e9a65e94fdc.gif)

## 事前準備

- Teachable Machine
- LINE Bot
- Make(旧Integromat)
- Node-RED
- SSSAPI
- Google Spreadsheet (以下GSS)

## 作成過程

### 1. Teachable Machine機械学習

早速、Teachable Machineに商品の顔を覚えましょう。
今回はチョコレート、ドリップコーヒー、バナナ三品を学習しました。一品ずつ写真100枚ぐらいがあれば、結構高い精度で認識できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/71699916-123b-56bd-aecd-5d46f2166564.jpeg)

::: note 
【結果】
OKでした
![image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/f3bae06a-495a-ed15-23a5-0acf63242318.gif)
:::

### 2. Node-RED フロー作成、 Teachable Machine と連携

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/0abe217a-7a4b-5693-b045-2c1ff02d2cd2.png)

:::note 
【結果】
こちらもOKですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/0040e29b-ac7b-edd2-b052-9c6e57f6a232.png)
:::

### 3. Make と Node-RED 連携

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/2623b398-30a2-2500-a6ab-65231aeaf83b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/bcb0b955-9073-cb8f-f4f5-4f668d100170.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/7235a23b-c15e-8255-5c11-9f893ec002e7.png)

::: note 
【結果】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/83206ecb-0339-2f0c-80d1-11df82b6ebaa.png)
:::

<details>
<summary><strong>＞＞＞＞詳細設定はこちら＜＜＜＜</strong> </summary>

**3-1 Webhooksモジュールを追加** 
`Webhook name`を入れて、｢Save｣します。すると、`Weebhookアドレス`が生成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/a3afa168-0b34-f067-77e2-de6ceabfb6ce.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/b0fc22f7-870c-749d-32b0-afc869a724bd.png)

**3-2 Webhookアドレス テスト**
Makeを`Run Once`後、`Weebhookアドレス`後ろに`?Product=`と`ドリップコーヒー`などくっつけてブラウザーにテストします。`Accepted`と答えてくると成功です。Make内も反映します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/8f015695-8ec3-8ee6-caa3-4a22aa53eac5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/de77f08b-d523-bfcc-6df8-452be92d0245.png)

**3-3 Node-RED内設定**
  - `template`ノードに認識したClassラベル表示する`{{payload.0.class}}`にセットし、`.Product`をくっつけます。

::: note warn
ここの`Product`はWebhook ID後の名前が一致しないとエラーになる **(大文字小文字区別)**
:::
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/f812981a-29d8-fdec-1055-982f1e4dac8a.png)

  - `http request`ノード設置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/b30c80f1-15db-eb68-093d-a773635e39e6.png)

  - `http`ノード設置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/bcb0b955-9073-cb8f-f4f5-4f668d100170.png)
</details>

### 4. Make とGoogle Spreadsheet 、SSSAPI 連携

商品の位置情報、棚割り情報はGSSに保管します。SSSAPIと連携した後、Make内`HTTP`モジュール、`JSON`モジュールでAPIリクエストをセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/da320c11-2cf1-0614-ce38-089d7cd32da2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/b9cdc922-a1de-2b76-9fe9-1642b8218840.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/f82a575f-abd9-d04b-d53d-d6a69c0f45af.png)

::: note warn 
作成当初、リクエスト結果がいつもGSS全体を出てきます。調べた結果、1件取得ではなく全体取得となるためです。この場を借りまして情報共有･注意喚起をします。
参考:  [公式ヘルプ#1件取得](https://sssapi.app/help/api_call#1%E4%BB%B6%E5%8F%96%E5%BE%97)
:::

`HTTP`モジュールに、日本語を検索する際は<App ID>の後に`/encodeURL()`をセット、括弧内`Webhooks`モジュールの`Product`を設置。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/d86f9051-e12f-a3a7-e3ea-a48f2be0d705.png)

::: note
【結果】
ちゃんと1件取得しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/92c5b181-adb0-66dd-3257-47c0751625bd.png)
:::

### 5. LINE Bot に返信

最後に、返事の内容を充実させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/29e89501-5c7c-4180-0a49-44ea551aacdf.png)

文字より地図の方がわかりやすいです。事前に地図の画像をアップロードして、リンクもGSSに保管します。

::: note warn 
最後に`.png`、`.jpg`ではないリンク(共有リンク)は反応しません。
参考:  [公式ドキュメント](https://developers.line.biz/ja/docs/messaging-api/message-types/#image-messages)
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/4ea76f38-fe91-be2d-87b7-2928b186d09a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/2407092f-518f-6d0e-31b1-419afb331824.png)

さらにさらに、この商品がセール中の場合、セール情報も合わせて送りましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/cc3ec7d8-ef10-272e-8535-c5ee074c9d6a.png)

::: note 
【結果】
(地図はテストものです)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/b97cfd75-3982-a25c-2164-1f1059e8fe79.png)
:::

## 全体流れ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/6646660b-7f3f-028b-6791-af064ecb4959.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/654fb418-2168-bbfb-ed6f-bdcb1f78c423.png)


## 完成感想

> **｢えぇ！これおもしろい！｣** ーー(女性、人事総務部、社員)
>
> **｢けどPCカメラだけならちょっと･･･｣** ーー(女性、店舗勤務、パートナー)
>
> **｢LINEで写真を送って返事が来るならどう？｣** ーー(男性、DX推進部、社員)

職場から思った以上の反応と意見をいただきましたw

やはり売り場探すのは難しいですね。

## やりたかったこと

せっかく｢PCしかできないならちょっと･･･｣という意見もいただきまして、最初のゴールも｢その場でわかる｣と設定しました。LINE botに写真を送ればもっと楽になると思います。だた今回は、そこまでの能力がないので、今後再度挑戦してみましょう。
**※6/4追記：** 二日間試しましたが、ダメでした･･･  詳しい理由がまだはっきり言えない、またやってみよう！

また、一点足りないのは、今回のTeachable Machineは、トレーニングしたものしかわからなく、それ以外のものが既存データ中似ているものに認識されました。自分の顔のみ映されたときもドリップコーヒーに認識されましたwwww。

完璧完成品まで、遠い道ですね。

## 参考

https://qiita.com/sasakikoudai/items/1aae94a8e3e6feeef3df

https://qiita.com/ishioka-nozomi/items/1b0720759b0f02c6e5b9

https://qiita.com/imurasho-ichi/items/5f6b3960db54dd160ce8

https://www.yukibnb.com/entry/linemessagingapi_sheet_sticker#%E7%94%BB%E5%83%8F%E3%82%92%E8%BF%94%E4%BF%A1%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84%E5%A0%B4%E5%90%88

https://qiita.com/21HideK/items/4005559995ac2f270528

https://www.ultra-noob.com/blog/2020/94/