【Teachable Machine】使用できる商品券かどうかをLINE Botで回答できるようにしてみた

みなさん、お久しぶりです！
IT未経験のデジタル成長記録Vol.4です:fist_tone1:
今回はML（機械学習）のTeachable Machineで、使用できる商品券を教えてくれるLINE Bot作りに挑戦してみました！

https://twitter.com/tezukar9/status/1827983055019266260

## この問い合わせ回答、無駄じゃない？
私は商業施設で主にテナント管理を行っています。
日常業務でテナント従業員さんからかなりの頻度いただく問い合わせ1位が
###### 『この商品券初めて見たんですが、うちで使えますか？』 です…:sob:

電話で問い合わせをいただいて、その商品券の特徴を聞いて…
お客さまが目の前で待っている中でこのやり取りをするのってかなり無駄だなというのが率直な意見…。

今までは無駄だなと思っていても自分でどうにかできる範囲ではないとあきらめていましたが、先日[Teachable Machine](https://teachablemachine.withgoogle.com/)なるものを知り！

これはこの課題を解決するのにちょうどいいのでは！？となり、今回のLINE Bot作成にいたりました:point_up_tone1:

## Teachable Machineってなに？
みなさん、Machine Learning（機械学習）という単語を聞いたことはあるでしょうか？

> #### Machine Learning（機械学習）とは？
>データを分析する方法の１つで、データから、「機械」（コンピューター）が自動で「学習」し、データの背景にあるルールやパターンを発見する方法。 近年では、学習した成果に基づいて「予測・判断」することが重視されるようになった。

[Teachable Machine](https://teachablemachine.withgoogle.com/models/uALCRxtUx/
)はまさに、ML（機械学習）の無料サービスなのです！
現在のTeachable Machineでは、画像・音声・ポーズの3プロジェクトが選択でき、それぞれモデルをアップロード＋ラベルを付けるだけで機械学習モデルを作成することができます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/0e957644-f4b5-b8f7-439e-7dab1144bde7.png)

## 今回の使用ツール
- [ ] [Teachable Machine](https://teachablemachine.withgoogle.com/train)
- [ ] [LINE Developers](https://developers.line.biz/)
- [ ] [enebular](https://www.enebular.com/ja/)

## 1⃣ Teachable Machineでプロジェクトを作る！

1. [Teachable Machine](https://teachablemachine.withgoogle.com/train)へアクセスし、`Get Started`　をクリック
1. 今回は、`Image Project`を選択します
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/7607f7b0-66bc-7f69-db98-df72f6b4e7f0.png)
3. 続いて`Standard image model`を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/2b91b3f4-4d98-5ff9-502e-cf163aff3e19.png)
4. `Class1`…となっている箇所は登録する写真のグループ名を入力します。
    今回は商品券を使用可能・一部店舗で使用可能・使用可能（釣り有）・使用不可の4グループに分けて登録していきます
    ※グループの追加をしたい場合は`Add a class`を選択してください
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/658d538e-e63b-ca11-00b7-2f87d3bfdbdc.png)

4. 続いて写真の登録ですが、今回はデバイスに追加されている写真をアップロードしたいので、`Upload`を選択します
※その場で写真を撮る場合は`Webcam`を選択してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/a81981f2-96ef-8297-e780-6675780bf1bf.png)
5. 写真の登録がすべて完了したら、`Train model`をクリックします
すると、Previewのところに判定結果が出てくるようになります！
問題なければ`Export model`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/67601713-7079-a6c7-dffe-5a27e3cb685c.png)
7. `Upload my model`を選択し、その後出力されるYour sharable linkをあとで使用するので、コピーしておきます
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/54762940-cc96-4d92-34a3-cc69ba5ea008.png)

ここまででひとまずTeachable Machineの設定は終了です！
続いてLINE Botの土台づくりをしていきましょう:point_right_tone1:

## 2⃣ LINE Botの土台をつくる！
LINE Botは[LINE Developers](https://developers.line.biz/)から簡単に作成できます！

1. サイトへアクセスし、右上の `コンソールにログイン`をクリックし、自分のLINEアカウントでログインしてください
1. プロバイダーの`作成`をクリックし、お好みのプロバイダー名を入力します
1. 今回はBotを作成するので`Messaging API`を選択します
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/605c1fe7-42ed-856b-010b-f705c1005b7c.png)
4. その後の画面でチャネル名や業種などの必要事項を入力したあと、各種利用規約のチェックボックスにチェックを入れ、`作成`を選択します

これでBotの土台は完成です！
あとで使用しますので、`チャネルシークレット`と`チャネルアクセストークン`を取得してコピーしておきましょう！

<details><summary>チャネルシークレットとチャネルアクセストークンの取得方法はコチラから</summary>

この2つのコードを取得するには`チャネル基本設定`と`Masseging API設定`を見ます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/2dcc655b-0b48-75b8-abde-d612b16da9f0.png)

★チャネルシークレットは`チャネル基本設定`を下までスクロールするとあります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/3ad387e3-11cb-2028-0b02-48a9bbb0b27a.png)

★チャネルアクセストークンは`Masseging API設定`で下までスクロールするとあります！
　最初は発行されていない状態かと思いますので、`発行`を選択してコードを発行しましょう
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/e8f86a07-e9db-92d7-8a77-0df8af51819c.png)

</details>

## 3⃣ Node-REDの設定をする！

今回は [enebular](https://www.enebular.com/ja/)というサイトから、Node-REDというツールを使用して連携していきます。

フローの完成図はこんな感じです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/17ca08fb-f196-731b-31ae-0fe8a9fbeca4.png)


1.  [enebular](https://www.enebular.com/ja/)にアクセスし、`サインイン`します
会員登録が済んでいない方は会員登録を済ませてから次に進みましょう！
1.右上の`プロジェクトの作成`を選択し、プロジェクト名を設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/58b27eba-f45d-a299-6708-1eee62a7065b.png)
3. 設定が完了すると先ほどの画面にプロジェクトが追加されているかと思いますので、追加したプロジェクトを選択してください
3. 選択すると英語のフローが並んでいるかと思いますが無視して、右下の`＋ボタン`をクリックします
3. アセットの作成というタブが開くのでそのまま`作成`へ進み、アセットが追加された先ほどの画面に戻りますので、作成したアセットをクリックし右上の`編集`を選択します
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/14ca35fb-e609-e4ea-fe4b-17db330d6c6d.png)
5. ノードを追加、繋げていきます

<details> <summary> 追加したいノードがない！？そんなときはコチラ🌟
</summary>

1. 右上のメニューバーを開き、`パレットの管理`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/3c4392e3-1120-ec7a-9bef-ed0e43784eb0.png)
2.`ノードを追加`を選択し、検索バーで欲しいノードを検索して`追加`します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/792e4cbb-250c-4505-310f-32e308a96440.png)

:::note info
🌟今回使うノード🌟　
　・Teachable Machine : `node-red-contrib-teachable-machine`
　・LINE : `node-red-contrib-line-messaging-api`
:::
　 
</details>

① `http in`
・メソッド：`POST`
・`ファイルのアップロード`にチェック
・URL：/好きな文字列　（今回はwebhookにしています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/199f0ca5-11e2-3214-bf6a-26d6a5eb680a.png)

② `http response` 
・ステータスコード：`200`を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/916ea6e7-5c95-fe57-6cbb-318080b87df6.png)

③ `function` 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/9ea72303-00f7-9bd7-3ae5-382e7a9e918f.png)

下記コードをコピペします
``` javascript
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;
msg.messageID = messageID;
msg.replyToken = replyToken;
return msg;
```

④ `http request`
・メソッド：`GET`
・URL：https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
・ペイロード：`無視`
・`認証を使用`にチェック
・種別：`Bearer認証`
・トークン：2⃣ の工程でコピーしておいた`チャネルアクセストークン`を入力
・出力形式：`バイナリバッファ`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/e1186ecd-bc04-2ee2-3d62-676405e6dcf6.png)

⑤ `teachable machine` 
・Mode：`Online`
・URI：1⃣ でコピーしておいたTeachable Machineの`Your sharable link`を入力
・Output：`Best prediction`
・`Image`にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/7b6b4662-8d24-d94a-c29e-6b56592cb2c4.png)

⑥ `function`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/9ee370a0-b2e5-47c2-27be-df58fc565d61.png)

下記コードをコピペします
```javascript

const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
     {
 "type": "message",
 "replyToken": msg.replyToken,
 "message": {
     "type": "text",
     "text": `この画像は「${className}」\r\nになります`
    }
  }
];
return msg;
```

⑦ `Reply` ※配置すると`Reply Message`に変わります
・Secret：２⃣ でコピーしておいた`チャネルシークレット`を入力
・Access Token：２⃣ でコピーしておいた`チャネルアクセストークン`を入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/b9193087-42a5-5402-77be-c1d9ef80b00e.png)


⑧ すべての入力が完了したら右上の`デプロイ`をクリックし、その横の`インフォメーションボタン`からリンクをコピーしておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/1708ebb2-c585-0380-2581-710b32659036.png)


:::note info
#### ノードの詳細を編集するには？
編集したいノードをダブルクリックすると右側に表示されます！
:::

## 4⃣ LINEと繋げる！

 [LINE Developers](https://developers.line.biz/)の`Messaging API設定`から`Webhook設定`を開き、3⃣ の工程の最後にコピーしておいたリンクに３⃣-5-①で設定した`/好きな文字列`を付け足して貼り付けます！
 
:::note warn 
#### 注意
・Webhookの利用にチェックが入っているか確認！
・リンク貼り付け後`検証`をクリック、`成功`と出るか確認！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/63a1ba2c-4a50-87ee-4721-c775460d99f3.png)
:::

## 最後に

完成してから職場の先輩に使ってみてもらったところ大絶賛！
ただし、実際に現場へ導入できるかどうかは別問題…
とても便利な反面、間違った判定結果が出てしまった時のリスクが怖いとのフィードバックをいただきました:sob:
（でもごもっともなフィードバック、もっと精度を上げて実際に導入できるように頑張ります！:thumbsup_tone1:）

今回のLINE bot作りはこちらの記事を参考にさせていただきました!!

https://qiita.com/kuma_ssss/items/098715c74c087a19aa65#line-developers%E3%81%A7webhook%E3%82%92%E7%99%BB%E9%8C%B2

- 2024.09.01改善内容_商品券名の表示がされるようにする

https://twitter.com/tezukar9/status/1830139309221151070

このBotを見てくださった方より、「商品券名が分かるとその判定が正しいか間違っているのか人の目でも確認できるので良いのでは？」とのご意見を頂き内容修正しました！

結論として変更する場所は、`Teachable Machineのクラス名`のみ！
クラス名に「○○商品券で使用可能」「○○商品券で使用不可」と記載しておけば、上記の設定方法のまま商品券名+使用可否が分かります(^_-)

ぜひご参考ください！