この商品、前はいつ買ったんだっけ？LINEで過去の買物データを見たい #protoout


## 目的

**私は小売業で管理系を担当するAさんです。**
**お客さまは常に「賢くお買い物したい」と必死です。**
**スーパーで商品を手にしたとき「この前いくらっだたかな…」。過去に買物したときの売価や日付はすぐに思いだせないでしょう。そんなお客さまがスマホから機械学習させた画像から商品データをLINEに結果を返してくれたら便利じゃないかな。ということで、Teachable MachineとNode-REDを連携させてみました。**

## 使用したツールは5種類
![使用したもの.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/f6a213aa-b5fe-b327-9265-3468ddd0e73c.jpeg)
- Teachable Machane
- Node-RED
- Googleスプレッドシート
- MAKE
## Teachable Machineに機械学習させる
- Teachable Machineに画像を取り込む　
  自宅にある飲み物をかき集めてパソコンのカメラで画像を取り込みました。これが大変で、明るさやカメラのスペックのためか判定確率がバラバラなところから始まりました。最初が肝心、特に機械学習の判定が低いとこの仕組みは全く価値なしです。撮影環境を整えて、取り込みたいものだけがはっきりと認識学習させるためにも背景を白か黒で統一するなど工夫が必要です。

<details><summary>学習させた商品と画像枚数☟</summary>

```rb
1	青森りんご	王林	405
2	大正製薬	RIZIN DRY	509
3	伊藤園	お~いお茶	405
4	森永製菓	Inゼリー	406
5	伊藤園	充実野菜	275
6	カゴメ　	秋のフルーツこれ一本	142
7	伊藤園	毎日一杯の青汁	298
8	伊藤園	ビタミン野菜	242
9	森永ＴＢＣ	一日の鉄分	232
10	ヤクルト	蕃爽麗茶	214
11	ヤクルト	ザクロmix	296
12	グリコ	野菜足りてますか	269
13	ヤクルト	ジョアストロベリー	379
14	コカ・コーラ	２５０㎖	261
15	大塚製薬	オロナミンＣ	216
16	アサヒ	ウィンルキンソンドライ	272
17	アサヒ	ドライゼロ　スパーク	246
18		水	247

```
</details>

画像が多いと学習するのに時間がかかるようです。
学習10回やってリンクが生成されるまで平均7~10分ぐらいかかりました。
:::
![賢く買い物したい_teachable Mchine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/1722af41-2f8d-8af9-a894-12a3e4db3789.png)

 
```
アップロード完了
https://teachablemachine.withgoogle.com/models/soSDalKsS/
```
:::
## 学習結果を連携させる
##### Node-REDでフロー作成 #####
- 画像を取り込み判定した結果「お～いお茶」100％の判定が返された結果をリンクに置き換えるため `http request`>`http`を配置しました。
![賢く買い物したい_Node-RED.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/467e7b51-78da-2c55-bb1e-9492ddd66190.png)
- `http request`nodeの設定
`Webhook`からリンクをURLにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/3f767d69-438e-a36b-9022-3cc8cb5ad48f.png)

---

#### お買い物リストをGoogleスプレッドシートで作成しておく ####
- GoogleドライブでGoogleスプレッドシートを起動し商品一覧を作成します。これが家計簿の役割になるお買い物リストです。今後はこのシートにLINEから自動で買物リストを入力して連携できるよう学習して実装していきます。
:::note info
最終的にLINE画面には品名や売価、前回購入日などを表示したいので、Teachable Machineの判定の表示の数字をもとにこの表からナンバーで割り出すようにします。
:::
![賢く買い物したい_Google Spred Sheets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/680b7440-85b7-2695-0dac-49febd40da76.png)
---
### 機械学習の結果をMAKEと連携させる ###
- 使用したモジュール
   - Webhooks <b> Custom webhook
   - Google Sheets <b> Search Row
   - LINE <b>Send a Push Message
![賢く買い物したい_MAKE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/4b80bb0a-5adf-c7f9-b927-f5602ca84aa1.png)

:::note info
TO : `自分で作ったID`
　　　LINE Developers > Basic setting > Your user ID 

Message > Type > `text`

Text > (画像の通りです）
　　　※読みやすさを考え、表示位置を整列させて区切り線を配置しました。
:::
![LINEモジュール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/9fd679e9-b618-d68a-8f56-484ccd7d4a93.png)


### いざ送信！結果やいかに ###
（笑）ぴくっとしか動いたいないように見えますが、お~いお茶の買物履歴を返す事が出来ました。
![RPReplay_Final1663483557_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/e98ab24d-8e2b-fc67-c027-f5b1f196dc8a.gif)
過去に買物していないものはこのように`品名　不明`と返してくれます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/394e6bba-2a87-ed9c-d39b-1fa6ea3919dc.png" width="32%)">

## おわりに
今回は機械学習`Teachable Machine` をメインに取り組みました。
LINE Botを作る過程で、もしかしてNode-REDだけでいけるのではないかと思いました。次のチャレンジは、LINEから画像を送信する入口の部分を作りこんでいきます。

#protoout