私の戦闘力は53万です。販促物の強さを判定するスカウター

# 販促物の強さ判定
私はスーパーマーケットに勤務しております。その中でよくある課題が…
**「販促物の優先順位がわからない」**
近所のスーパーを思い出していただくとわかりやすいかと思いますが、売場では「今日は〇〇の日5％引き」「△△デーポイント5倍」などお客様の購買を促すために様々ポスターが取り付けてあります。
そのようなポスターやPOPのことを販促物と呼んでおります。
そんな販促物は当然様々な種類があります。ただ限られた売場内で取り付けるため、販促物によって優先順位を決めて取り付けなければなりません。

**例えば**
下画像の左の販促物と右の販促物の場合やはり１割引はお客様に与えるインパクトが強いので 
**「1日の日曜日」** になった際は左の販促物を優先的に多く取り付けます。
![販促物サンプル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/b1695b03-d5f8-86b4-2cef-dcb21b93960c.png)


# 完成品
https://twitter.com/akao_DX/status/1552435176424472576?t=KkzxgJmY3g6fqeWv2cW0ZA&s=19

強さといば **戦闘力！** 販促物の強さを戦闘力と表現しています。
LINEで販促物の画像や写真を送るとその戦闘力を答えてくれます。

# 使用ツール
* [Heroku](https://id.heroku.com/login)
* Node-RED
* [LINE Developers](https://developers.line.biz/ja/)
* [Teachable Machine](https://teachablemachine.withgoogle.com/)
:::note info
HerokuとNode-REDの初期設定はこちらの記事を参照してください。
[herokuに作る無料Node-Redサーバ（Postgresも付いてくるよ）](https://qiita.com/juicy/items/b4c97f75418d189f45a7)
※無料で利用する為、1,2の設定のみで大丈夫です。
:::

またLINE DevelopersとTeachable Machineについてもそれぞれ下記リンクを参考にしてください。

https://developers.line.biz/ja/docs/messaging-api/getting-started/

https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1

# 完成までの流れ
**1. LINE Developersの設定**
**2. Teachable Machineでの機械学習**
**3. Node-REDでのノード作り**
**4. LINE DevelopersでWebhookを登録**


* 機械学習の様子です。
画像データはなるべくいろいろなものを学習させます。販促物の元画像データだけでなく写真など学習させる画像が多いほうが正確に判定してくれます。
![機械学習モデル.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/0b32aed4-a39a-a892-3c18-b4bb5b56fdf7.png)

* Node-REDで作成したフロー
![node全体.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/14c72901-cf46-7572-1040-6687008a6f18.png)


<details><summary><font color="Green">フロー作成の詳細はこちら</font></b></summary>


**1. http in ノードの配置**
ノードをダブルクリックで表示される画面で、下記のように設定。
![httpin.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/62ec73ac-b836-14dd-6bdc-f81e3b951de9.png)
※URLは任意の文字で良いです。最初に/を入れてください。

**2.function ノードの配置**
ノードをダブルクリックで表示される画面で、下記のように設定。
![function.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/b7880b0a-991a-4de5-4007-18a630ba963e.png)
コードはこちら
```rb
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;
msg.messageID = messageID;
msg.replyToken = replyToken;
return msg;
```
**3.http request ノードの配置**
ノードをダブルクリックで表示される画面で、下記のように設定。
![httprequest.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/33796210-647b-ab3a-4c63-db51037a9a69.png)


>URL: https\://api-data.line.me/v2/bot/message/{{{messageID}}}/content

認証を使用: チェックを入れる
種別: Bearer認証
トークン: LINE Developersの「Messaging API設定」より「チャネルアクセストークン」の文字列をコピペします。
出力形式: バイナリバッファ

**4.Teachable Machine ノードの配置**
ノードをダブルクリックで表示される画面で、下記のように設定。
![teachable.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/6ea09d19-1fed-c74e-9b78-9058aea9676e.png)

URL: Teachable Machineでアップロードした際のURLをコピペします。
Image: チェックを入れる

**5.function ノードの配置**
ノードをダブルクリックで表示される画面で、下記のように設定。
![function2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/01f7e049-8673-efce-8c41-3b04c6a5f132.png)

コードはこちら
```rb
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
     {
 "type": "message",
 "replyToken": msg.replyToken,
 "message": {
     "type": "text",
     "text": `こいつは「${className}」だ`
    }
  }
];
return msg;
```
**6.Reply ノードの配置**
ノードをダブルクリックで表示される画面で、下記のように設定。

![LINEReply.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/e604d0c9-2b6c-9726-d857-82c652ae648d.png)

Secret: LINE Developersの「チャネル基本設定」より「チャネルシークレット」の文字列をコピペします。
AccessToken: LINE Developersの「Messaging API設定」より「チャネルアクセストークン」の文字列をコピペします。

**7.image ノードの配置**
これはあってもなくても大丈夫です。

最後にデプロイを忘れずに！
</details>

* Webhookの登録
![webhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/6b40671a-27fa-6255-f2cc-c7d3396ec714.png)

LINE Developersのページは「Messaging API設定」ページの「Webhook設定」
そこへ貼付するURL以下の通りにします。
Node-REDページのアドレスバーにあるURLをコピー
.com/の後ろは削除、代わりにhttp inノードのURL欄に入力した/以降を追加します。
そのURLをLINE DevelopersのWebhook設定にある、Webhook URLへコピペします。
**※「Webhookの利用」を必ずONにするのを忘れずに！**

以上完成です。

# あとがき
Teachable Machineというものがあると知っておもしろそうだと思って作ってみましたが
販促物の画像データ集めが意外に大変でした…
最初は販促物の元データのみ、つまり一つの販促物につき一枚の画像で登録していたら全く判別してくれず、サイズ違いの画像を探したり、印刷したものを写真で撮ったりして学習データを増やさなければなりませんでした。
それでも学習データが足りないのか誤判定や判定できないことがたまにあるため今後もちまちま画像集めをしていきたいと思います。
今後もし会社で実用化するためには、今ある販促物を網羅して登録、それぞれについてたくさんの画像を機械学習させることができるかがカギになると思います。
~~まぁそもそも販促企画の種類をもっと減らしてくれればスカウターも必要無いんですけどね…~~

以上
最後まで読んでいただきありがとうございます。
少しでも何かの参考になれたら幸いです。
今後もいろいろと挑戦して発信できたらと思います。よろしくお願いします。