Node-REDとTeachable MachineそしてLINEへの連携にチャレンジ

---
## Node-REDとTeachable Machineを使ってみる！！
皆さん、こんにちは！私は沖縄の小売業で働いているサラリーマンです！
Teachable Machineの使い方を学習したので応用編としてNode-REDと連携するしました。
初めてのチャレンジなので苦戦しましたが、限られた時間の中で形になったことを記事にしました。

## 使用したツール
**●Teachable Machine**　https://teachablemachine.withgoogle.com/train
![0826-1_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/5e505c9a-0520-8d47-e1b8-4989407027f1.jpeg)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/625b128b-7822-e4fa-c21d-0a67df2086d6.png)

**●Node-RED**　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/f6ffcd28-f2c2-8d19-d5bb-911cc973f848.png)

**●Make**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/12c0bc6f-f2ec-aee7-abdc-26904ee799a6.png)

## Node-REDとTeachable Machineを繋げる
**①パレット管理にノードを追加する**
**②ノードを新規にインストールして追加**
**③必要なコード**
* node-red-contrib-teachable-machine
* node-red-contrib-browser-utils　
    （自分のPCのカメラの写真データを読み込んでくれるノード）
* node-red-contrib-image-output　 
    （読み込んだ画像をNode-RED上に表示してくれるノード)

**④ノードを配置する**    
* 入力パレット・・・camera
* 分析パレット・・・teachable machine
* 出力パレット・・・image
* 機能パレット・・・template
* 共通パレット・・・debug
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/ffc9c42a-8453-31ff-12cb-93eb1b41d8b8.png)

**⑤Teachable Machineと連携する**  　
➀Urlの欄に自分で作ったTeachable MachineのモデルがアップロードされたURL（画像②）を貼り付ける
![0826-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/e336c860-ec05-7a7b-6105-a3253f128831.png)
画像②Teachable MachineのモデルがアップロードされたURLは下記の黄色箇所
![0826-3 (2).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/7392c7da-4950-7253-d482-88911315fa29.png)

Templateのノードをダブルクリックします。 テンプレートのコード記入欄に以下のコードを貼り付けます。
結果は「{{payload.0.class}}」です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/ec08d411-d417-986e-4955-da3e8b321984.png)
**⑥デプロイする** 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/65fb2446-9da7-8bd9-dddc-ea3e30829193.png)
**⑦Webカメラの前で本を構えて、cameraノードの横のボタンを押します** 
成功したら下記のような判定結果が表示されます。
　　　　　　⇒実際はCameraが機能せずに失敗となりました。
      参考画像　成功していたら下記のようになっております。
~~![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/c075bb74-1b3f-05e0-c0f3-9b523344b048.png)~~

## Webhookを使ってNode-REDとMakeを繋げてみた！！
参考資料　https://www.youtube.com/live/elTc1JrCoi0
**①Makeを開く**
**②Custamu webhookを追加する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/52e72085-4afd-b838-e6b3-c2649b91c1c6.png)
**③Send a Notificationを追加する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/f81bd61b-cb11-92d7-f68b-83a63f8db7d2.png)
**④WebhookとLineを繋げる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/15ca1d67-aee7-faf3-8b2c-bc647d96070c.png)
Run once 押すと下記の内容で通知が届く

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/1512f92b-ff6c-859a-7d43-6ad377c81a82.png" width="25%">

**⑤Node-REDとMakeを繋げる**
下記の順番でノードを入れる
* Camera
* teachable machine
* image preview
* template
* http　request
* http　response
* 最後にdebug
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/4d9fd92d-61da-b492-9d59-f12a467d35b4.png)


## 課題が残る結果に！！
本来実施したかったことは、**Node-RED**の**Camera**からで写真と撮り、**Teachable Machine**に画像データが行き画像判別して、またその情報を**Node-RED**から**Make**に送り、**Make**と連携した**LINE**から通知がくる想定でした。
しかしながらCameraから画像をとることができずに**Node-RED**をうまく動かすことができなかった。
原因は下記のノードがうまく設定されていないことだと考えられます。
* node-red-contrib-browser-utils　
    （自分のPCのカメラの写真データを読み込んでくれるノード）
 
 **ChatGPTにも聞いて下記の回答を頂きましたが、成功することはできなかった**
 
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/7f22d0b8-7318-56b1-3874-dc36b8d692e9.png)
  
## あとがき
今回チャレンジしたNode-REDとTeachable MachineそしてLINEへ繋げる内容でしたが結果うまくいかなかった。
**残念!!**  Teachable Machineの画像識別は比較的に簡単にできましたが、その他への連携が難しい。まだまだ知識と経験不足であり未完成の状態でした。
しかしながら今回チャレンジして**Node-RED**と**Teachable Machine**の活用の機会は多くあるとこを実感いたしました。今後も手を動かし習得していきたいと考えております。

最後まで読んでいただきありがとうございます。