【LINEで品出し喚起！】Teachable Machineで品切れ判定作ってみた

「ご利用ありがとうございました！」

うちの本社にある無人店舗からは、いつも元気でかわいい声が聞こえてきます。

周りにお店が1件もない立地なために導入された無人店舗は、 **【Scan&Go（スキャンアンドゴー）】** というアプリをダウンロードして、自身のスマホで商品のバーコードをスキャンしてお買い物をします。お会計は登録したクレジットカードで行い、店を出る際は会計済みのQRコードをかざして出るという仕組みです。QRコードをかざすと、冒頭のあいさつをしてくれます。

https://ignica.com/apps/about/

商品の品出しは、無人店舗の主幹部署以外にも各部署が持ち回りで担当をしています。

先日その無人店舗で買い物をしようと、同僚と出向いた時のことです。
飲料の冷蔵ケースを見るなり同僚は、 **「え、全然商品ないやん:interrobang:」** と、あきれながら少ない商品を前出ししていました。

同僚は無人店舗の主幹部署に所属していて、いつもこまめに前出しなどのメンテナンスをしてくれています。その日の担当部署がどこだったのかは分かりませんが、外出やテレワークなどで本社不在時には品出しできませんので、 **全然商品ないやん状態** になってしまいます。

一言、「品出し頼む」の声掛けがあれば防げたことでしょうが、自身の業務が最優先ですのでなかなかそこまでは気が回りません。。。
# デジタルツールで解決
このような品切れを防止するためには、以下のことが必要だと考えられます。
1. 補充が必要なタイミングを判断をする
2. 補充が必要な場合はアラートを出してお知らせする

それでは、デジタルツールを使ってどのように解決できるか、 **チャレンジ** :fire:してみたいと思います。
# 完成品
https://twitter.com/kykadono/status/1574398700993925120
# 使用ツール
- [Teachable Machine](https://teachablemachine.withgoogle.com/?state=%7B%22folderId%22:%220AE2IzqKxXeu8Uk9PVA%22,%22action%22:%22create%22,%22userId%22:%22115987913368859040349%22,%22folderResourceKey%22:%22%22%7D)
- [Node-RED](https://nodered.jp/) 
- [Make](https://www.make.com/en)
- [LINE Developers](https://developers.line.biz/ja/)
- Googleスプレッドシート
# 作成開始！
流れは、「 *Teachable Machine* で画像認証を作成して *Node-RED* へ判定結果を渡し、 *Make* へ連携して *LINE* で配信する」です。
## Teachable Machineで画像認証
Teachable Machineは、Googleさんが無料で提供する誰でも簡単に機械学習モデルが作成できるツールです。画像・音声・ポーズの3種類から選ぶことができます。
### 今回は画像を選んで、必要な画像をアップロードします。
棚奥に「品切れ中」の紙を貼り、それが完全に見えていたら **【品切れ】** 、少し見えていたら **【要補充】** 、見えていない場合は **【OK】** の3つのモデルをトレーニングします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/7c4ba868-0ce9-e8bc-9314-1ead1d7d309e.png)
ちゃんと判定できていれば、モデルをエクスポートします。
![L02_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/1160f1ea-fc69-d241-a5dd-1bd9b726d573.png)
アップロード後にURLが発行され、 *Node-RED* との連携に使用します。
## Node-REDに連携
### 全体像はこちらです。
![L02_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/d780a0ee-b250-ddd0-0280-0bcc02cc137a.png)
### まずはノードを追加します。
[`node-red-contrib-browser-utils`](https://flows.nodered.org/node/node-red-contrib-browser-utils)
[`node-red-contrib-teachable-machine`](https://flows.nodered.org/node/node-red-contrib-teachable-machine)
[`node-red-contrib-image-output`](https://flows.nodered.org/node/node-red-contrib-image-output)


<details><summary>追加はパレットの管理の、【ノードを追加】から行います。</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/7617bac0-e21b-89b6-07af-d98dbde4c291.png)
</details>

### ノードを繋いでいきます。
`camera`ノードと`teachable machine`ノードを繋ぎます。`teachable machine`ノードには、エクスポートした際に発行されたURLをコピーして貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/3a787305-73ce-7d2e-ade8-b8129da04290.png)
`template`ノードには判定結果が入るように、`{{payload.0.class}}`と入力します。プロパティには、あとで *Make* に渡すために`payload`の後に`.tana`のような名前を付けておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/e1801d04-5541-439b-797b-ad50077da3f9.png)
### 判定結果で分岐させます。
次に、判定結果で分岐させるために、`switch`ノードを繋ぎます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/33e74d27-ddde-194f-08e0-d032a9f55b70.png)
プロパティには、先ほど付けた名前を入力します。分岐は、LINE配信するかどうかで分けたいので、【OK（配信しない）】と【その他（配信する）】の2種類を設定します。
配信する側は *Make* に繋げますので、ここで *Meke* 側の作成を行います。
## MakeとLINEを設定
### Makeの全体像です。
![L02_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/d38a57f4-97fa-6e5c-b8aa-67bc9a658eb6.png)
### Webhooksモジュールを追加します。
`Custom webhook`を選択して、Webhookの追加と保存を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/c8bb4279-8024-e9df-b20c-913399496639.png)
保存した後にURLが表示されます。そのURLをコピーしてブラウザのアドレスバーに貼り付け、『Accepted』と出れば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/4f7f4378-248a-9d73-fffb-8918fc8ea607.png)
### LINE配信の設定。
LINEモジュールは、`Send a Notification`を追加します。
<details><summary>LINEにログインをして、配信先を設定します。</summary>

  
Connectionを追加して保存すると、 *LINE* のログイン画面が開きます。
ログインすると、配信先を選ぶ画面に移ります。自分1人だけに配信するか、グループに配信するかを選べますので、今回は『無人店舗品出しアラート』のグループを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/4fd6aad9-7f3d-900d-6c26-b844bae1a8d4.png)

</details>

あとはメッセージ内容を設定すれば完了ですが、そこに当日の品出し担当部署を入れたいと思いますので、Google Sheetsモジュールの`Search Rows`を追加します。
そこに連携するGoogleスプレッドシートには、日付と担当部署名が入力されていますので、当日の日付で検索をするために、Toolsモジュールの`Set variable`を追加します。
日付表記は、`formatDate`でGoogleスプレッドシートの日付表記と合わせます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/57623bb0-6e75-20c0-3e9f-499dc8634bc6.png)


<details><summary>Google Sheetsには、Toolsで作成した日付でフィルタをかけて、担当部署を呼び出すように設定します。</summary>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/7458da08-6a43-f8e0-8f1d-a28ed5db3d2f.png)
</details>

これでLINE配信のメッセージ内容が完成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/647cce94-889c-b936-5584-005753724180.png)
## Node-REDとMakeを連携
Webhooksモジュールを開いて、URLを再度コピーします。
### Node-REDに戻ります。
`switch`ノードの2番目【その他（配信する）】の先に、`http request`ノードを繋ぎ、URLに先ほどコピーしたWebhookのURLを貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/12d2ee46-e31d-2186-edf1-2c55f475a7a2.png)
# 作成完了！
ちゃんとLINE配信されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801955/33b46a0f-ebb7-bb97-34b6-720c0c16c783.png)
# 反省と次のチャレンジ
画像認証からアラートの配信まで、一通りの流れは作成できましたが、今のままでは **カメラを起動しないとこのシステムが動くことはありません。** これでは、アラートが全く機能しません。

トリガーにはお買い物終了時の「ご利用ありがとうございました！」のあいさつを使用するために、 **音声認識** について調べてみましたが、ノーコードでは難しいものばかりでした。
これは、時間をじっくりとかけて取り組む、次回へのチャレンジ:fire:にいたします！


ご覧いただきましてありがとうございます。