TeachableMachineとLINEを連携させ、画像判定botを作る

## TeachableMachineとは？
　TeachableMachine（以下、TM）とは、Googleが提供する機械学習ツールで、誰でも簡単に機械学習に触れることができます。それでは実際に、Step.を踏みながら順序を追っていきましょう。

<details><summary><font color="Orange"><b>今回作成に至る経緯とは…</b></font></summary>
　私はショッピングモールで施設管理をしています。<br> 
 今回課題を発見したのは飲食店のグリストラップの清掃状況チェック。（グリストラップ…水と油は分離する自然の仕組みを使って、排水の油分他を取り除く装置。汚い・臭いの2K状態です。<br>
  排水を綺麗にするには、これが正しく機能してなければいけません。
 しかし、グリストラップ清掃はどこまでやるかの程度の調整が難しく、店長もそれをアルバイトに教える時間がない…
 そこで、グリストラップの写真を送れば、きちんと掃除がされているかを判定し、
 「綺麗」「汚い」どちらかで返すことにより、店長さんの負担軽減を画策しました。

 </details>

 ## Step.1 TeachableMachineの設定

   機械学習させましょう。
   とはいっても、ウェブサイトを開いて、写真を登録するだけ簡単にできます。
      ![0 tm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/d12604eb-0582-a08f-d1d7-9e14f1eed7e9.png)
    写真は、撮影ボタンを長押しすると連写されるので、この機能を使いましょう
    動作を安定させるため、100枚程度保存してください。

 ## Step2. Node-REDの設定
 　次にTMとLINEを連携させるのに、「Node-RED」というサービスを使います。
  プログラミングをノーコードかつ視覚的に行え、拡張機能も充実している為大変使いやすいです。
  どんな画面かというと…![0.1 全体図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/0883d46b-c944-6f11-3382-11b66da881ca.png)
　このような感じです。
 （×で囲った所は、テスト用のフローです、気にしないでください…）

　中身を見ていきましょう。1つ目のノード内はこれ
 ![①httpノード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/5c8fc89b-a38c-c36b-2112-0bdd4394d669.png)

2つ目の「function」内

![3.functionノード内.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/9b28e7d7-4e08-1dc2-f668-1d9bb0871832.png)

```java script:コードはこれ
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」内
![3.1 function.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/295eefef-355d-f3d8-eff5-66ca699da0fb.png)

選択式の設定等は写真が最新の状況です、
トークンには、LINE Developersにて「Messaging API設定」→「チャネルアクセストークン」を入力（コピぺ）します。

4つ目の「teachablemachine」内
![3.2 tm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/4b10ba22-296c-5a84-2d87-7e38580011a1.png)

5つ目の「function 2」内
![3.3 function2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/185bafa3-8000-3c43-f234-588ce8ccabf2.png)
```java script:コードはこれ
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `このGTは「${className}」\r\nです`
        }
    }
];
return msg;
return msg;
```

いよいよラストスパートです！最後に「reply」ノード内を見てみましょう。
![4.linereply.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580275/55b1d4d4-763f-bbea-9b27-979a3cd0dec3.png)
Nameはなんでも大丈夫です。
Secretには、LINE Developersにて「チャネル基本設定」→「チャネルシークレット」を入力（コピぺ）します。
AccessTokenには、LINE Developersにて「Messaging API設定」→「チャネルアクセストークン」を入力（コピぺ）します。

## Step.3 LINEの設定
ここまで来たらゴールは目の前です。最後に、LINE Developersにて「Messaging API設定」→「Webhook URL 」を見てください。ここには、Node-REDのURLバーをコピーして貼り付けた上で、
「https://（ユーザー名）.flowfuse.cloud/line_bot」のように書き換えて保存してください。
（Webhookの利用のチェックも忘れずに！）

## Step.4 動作の確認
上記で作成は以上です、あとはきちんと動くかどうかですが…
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">GT清掃くん、きちんと動いて嬉しい！！<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/4AdpIp39cF">pic.twitter.com/4AdpIp39cF</a></p>&mdash; obatan (@obatan_aa) <a href="https://twitter.com/obatan_aa/status/1727238414884557198?ref_src=twsrc%5Etfw">November 22, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
動きました！

## 振り返り
店長さんにこれを見せてみると、「めちゃくちゃ便利じゃないですか！」と上々の反応です。
グリストラップは営業中に開けるのが難しいので、実際にテストはできませんでしたが、もう少し精度が上がったら、お試しでお店に使ってみようと思います！

さて、今回無事動作しましたが、
・なぜかめちゃくちゃ反応が遅い
・汚い画像でもきれいと判定することがある…、の課題が分かりました。
判定はサンプル数を増やせば治るのか、それとも違うお店のを撮らせてもらったほうが良いのか、今後改良を続けていこうと思います。

### 参考にさせて頂いたWEBサイト

https://qiita.com/jiko111/items/5fcd75924f59d900e128
@jiko111(じーこ１１１)さん
とても参考にさせて頂きました、ありがとうございます！