その積み方で大丈夫？！初心者がLINEに送った画像をTeachable Machineに評価判定させるLINE botを作ってみました！

# Teachable Machineを使ったLINE botを作成する 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/0481cd0e-5796-2e71-efe3-48bfd82db650.png" width=20%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/9845b971-09f1-1da7-bdd4-90fddbb330b7.png" width=40%>

<font color="red">**「その積み方で大丈夫？！」**</font>
私は小売業の物流部門で働いています。店舗へは**カゴ車やカートと呼ばれる配送台車**に商品を積み込んで配送します。

配送を待つ台車の中には、**その積み方で崩れないかなぁ**という台車に遭遇し手直しすることもあります。

また、トラックの荷台スペースは限られていますので、**商品があまり積まれていないスカスカな台車**では、一度に配送できる商品も少なくなり配送効率が低下してしまいます。

そこで、最近**Teachable MachineというAIで画像解析**できるサービスを知ったので、LINEに配送台車の画像を送って**積み方の良し悪しを返してくれるLINE bot**を作成してみました。

:::note info
Teachable Machineとは
Googleが提供する**無料のAI作成ツール**。**画像、音声、ポーズ**のパターンの機械学習ができます。今回は画像のパターンの機械学習を活用します。
:::

## LINE botの作成に使用したツール ##
- LINE (LINE botの作成に使用)
- Teachable Machine (AIの機械学習に使用)
- Node-RED in ~~Heroku~~ (LINE、Teachable Machine、Makeの連携に使用)
  ⇒Heroku無料枠終了のためRenderに移行
- Make (Gmail送信用に使用)

:::note info
Node-REDとは
視覚的にわかる**GUIによってプログラムを書く**ことができる、ブラウザで動くプログラミング環境です。
プログラミングがわからなくても、APIとつなげたり、WEBアプリを作ることができます。~~今回はHerokuというサービスを使ってNode-REDを動かしています。~~
:::

~~Node-REDのインストールについては以下の記事を参考にさせて頂きました。~~
~~**＜参考にさせて頂いた記事＞**~~
　~~[Herokuのアカウント作成とNode-REDのインストール](https://zenn.dev/protoout/articles/15-setup-heroku-nodered)~~

(Heroku無料枠終了に伴う追加箇所)

:::note info
Herokuの無償プラン終了について
LINEbot制作時はHerokuという無料枠のあるPaaSを利用していましたが、2022年11月28日をもってHerokuの無料プランが廃止となっています。(Heroku自体が無くなったわけではありません)
代替先としてRenderというPaaSが良さそうなので、Herokuを使われていた方、筆者のように無料枠を活用したいという方がいらっしゃいましたら、ぜひ使ってみて下さい。
:::

https://zenn.dev/protoout/articles/55-nodered-render-setup


https://www.utokyo-ipc.co.jp/column/paas/


## LINE botの作成結果です ##

#### (やりたかったこと) ####
①LINEで撮影した画像を取得して**Teachable Machine**に送る。
②Teachable Machineで送られてきた画像の**良し悪しを判定**する。
③判定した結果に応じて行先を**分岐**させる。
④**悪い結果はLINEと指定のメールアドレス**に返す。
⑤良い結果はLINEのみに返す。

**どのようなイメージか動画で確認してみて下さい。**

#### (完成したLINE botです) ####

:::note info
**「××ダメ！商品事故！」のパターンのときの動画**

<font color="lightgreen">→　→　→　→</font>![低ezgif-3-4711b5c25c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/6d5ae854-3ab2-02fd-3015-5275d61c8fb6.gif)　**ちゃんと動いてますね！**
:::

:::note warn
サンプルはあえて商品事故写真を使っています。いつもこういう訳ではありません。
:::

・**Node-REDのフローにLINEで撮影した画像が送れています**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/8b726a0e-f6a3-de34-b35b-d527721db114.png" width=80%>

・**指定したメールアドレスに通知メールが送れていますね。成功です！！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/65f799c0-3c27-3154-69f0-db7305d51d6c.png" width=80%>

今回、初めてNode-REDを使ってみましたが、最初は一見簡単そうに見えましたが、
### 初心者にとっては・・・(ムズッ)！ ###

真似てやってみても**思ったように動作しない**、さっきまでできていた**動作が再現できない**…


**視覚的には繋げるだけ**なのですが、奥が深く更なる学習が必要だと感じました。
(初心者にはなんとなく難しい感じがして避けてきたコーディングの勉強しようかな)


### Node-REDのフローの紹介 ###
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/35c7bca9-c9ab-df83-3aaf-41c95e1d1a46.png)
(Node-REDのフローの流れ)
フローだけ見るとやりたかったことの流れをつなげているだけなんですが、かなり難しかったです！！(正直まだ理解しきれていません…)

## LINE botの作成手順 ##
### 1.事前準備 ###
LINE botを作成する前の事前準備の一覧です。
- LINE DevelopersでLINE botのチャネル作成。
- Herokuのアカウント登録とNode-REDのインストール。
- Makeのアカウントを作成。
- MakeとGoogleの連携をする。(Gmail用)

### 2.LINE bot作成の流れ ###
#### ①Node-REDでLINE画像を送る準備をする ####
**この段落で使用したノード**
- `http in`
- `function`
- `http request`
:::note info
**ノードとは**
ノードはNode-REDの構成要素で何らかの処理をするための機能のかたまりです。前方のノードから情報を受け取るか外部イベントを受け取ることで動きます。

情報は形式はJSONデータでマトリョーシカのようなデータ構造をしています。「データのマトリョーシカ」を次のノードに渡していくイメージです。
例）``msg``の中に``payload``が入り、``payload``の中に``文字列``が入る。
:::
- [x]  `http in`ノードのプロパティ 

`http in`ノードではHTTPのエンドポイントにアクセスすると処理が開始されるように設定します。

まず、`http in`ノードを**パレット**と呼ばれる左側のエリアから**ワークスペース**と呼ばれる中央のエリアに**ドラッグ＆ドロップ**します。

次に`http in`ノードをダブルクリックしてプロパティを開きます。プロパティでは、メソッド欄で`POST`を選択し、URL欄に`/linebot`と入力します。これで、`http in`ノードの設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/ce6c9239-204d-18be-06ee-b525b1b421ef.png)

- [x]  `function`ノードのプロパティ

次に`function`ノードをパレットからドラッグ＆ドロップして先ほどの`http in`ノードとつなぎます。ノードのに付いている「端子」と呼ばれる点をクリックして引っ張ると簡単にノード同士をつなぐことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/1868b773-c866-961c-980c-4d0b6f75f508.png)
次に`function`コードのプロパティを開き、コード欄に以下のコードをコピペします。
```javascript
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;

msg.messageID = messageID;
msg.replyToken = replyToken;

return msg;
```

- [x]  `http request`ノードのプロパティ

次に`http request`ノードをパレットからドラッグ＆ドロップして、先ほどの`function`ノードとつなぎます。プロパティの中身ですが、URL欄に以下のURLをコピペします。
```javascript
https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
```
URL内の`{{{messageID}}}`の`{}`が3つあるのがミソのようです。

次に認証を使用にチェックを入れ、種別は`Bearer認証`を選びます。`トークン`には事前に用意した**LINE botのチャネルアクセストークン**を貼り付けます。

最後に出力形式は`バイナリバッファ`を選択してLINE画像の送付準備は完了しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/0c63d349-9440-788a-7b17-236b9231ad44.png)
また、今回のLINE画像の送付は次の記事を大変参考にさせて頂きました！(ほぼそのままですが…)　**ありがとうございました！**
**＜参考にさせて頂いた記事＞**
[Teachable MachineとenebularとLINE Botで機械学習を体験しよう！](https://atlabo-handson-08.netlify.app/#2)

#### ②Teachable Machineの準備とNode-REDとの連携をする ####
**この段落で使用したノード**
- `Teachable Machine`
- `function`

まずTeachable Machineの準備をします。

Teachabl Machineは**こんなに簡単にできるの**？！というぐらい簡単に機械学習ができるGoogleの無料サービスです。公式サイト→ [Teachable Machine](https://teachablemachine.withgoogle.com/)

Teachable Machineは**人によって判定基準がまばらなことや、熟練の人でないと判別できないようなこと**の判定に向いていると考えています。Teachable Machineの準備は以下の折りたたみをご参照下さい。

<details><summary>(Teachable Machineの画像認識モデルの準備はこちら)</summary>
1)Teachable Machineサイトに入り、「**使ってみる**」をクリックします。
2)新しいプロジェクトから使いたい機能を選択します。(今回は画像プロジェクト)
3)プロジェクトを作成したらサンプルを撮影(画像アップロード)して**AIに学習させるための画像データを蓄積**します。
4)画像データを蓄積したらトレーニングを選択して**AIに機械学習させます**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/e3d03d0c-27f5-f606-9aeb-ce4c3b0d1ed2.png)
5)**これでTeachable Machineの完成です！！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/74324149-3352-7f99-5da7-e7a590714ef5.png)
</details>

***************************
次に`Teachable Machine`**ノード**をワークスペースにドラッグ＆ドロップしますが、`Teachable Machine`ノードは**最初からNode-REDのノードとしてある訳ではなく追加をする必要があります。**

**`Teachable Machine`ノードの追加、Node-REDとの連携**、**`function`ノードの設定**は先ほど紹介させて頂いた記事に詳しく載っていますので、本記事では割愛させて頂きます。

#### ③判定に応じて次のノードの行先を分岐させる。 ####
**この段落で使用したノード**
- `switch` 

`Teachable Machine`ノードから画像の判定結果を受け取る準備はできましたが、**判定内容によって対応を変えたい**と考えました。そこで、`switch`ノードを利用して、判定結果によって次のノードの行先を変えることにします。

- [x]  `switch`ノードのプロパティ 

`switch`ノードは値に応じてメッセージを振り分けるノードです。まず、パレットから`switch`ノードをドラッグ＆ドロップして、ひとつ前の`function`ノードとつなげます。

次に`switch`ノードのプロパティでを開きます。プロパティは`msg.`を選択し、`payload.events[0].message.text`と入力します。

次に送られてきた判定を結果に応じて振り分ける処理です。今回は「××ダメ！商品事故！」と「×積みすぎです」という悪い判定結果がそれぞれでた場合と「それ以外」の判定結果がでた場合の3つのルートに振り分けます。

`switch`ノードの情報を入力する欄の1つ目に「××ダメ！商品事故！」、2つ目に「×積みすぎです」と入力します。この時送られてくるのは文字列なので`az文字列`を選択します。入力した文字列を含むものを振り分けたいのでルールには`contains`(~を含む)を選択します。

これで「××ダメ！商品事故！」が1のルートに、「×積みすぎです」が2のルートに振り分けられます。

それ以外の判定についてはルールに`それ以外`を選択します。これで、1、2の条件以外のものは3のルートに進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/8da6e442-adbb-aa79-9602-448de31fb9e8.png)
**これで`Switch`ノードの設定は完了です！** 

#### ④Makeと連携したGmail送信とLINEへの返信 ####
**この段落で使用したノード**
- `http request`
- `Reply`

ここではまず、**MakeとNode-REDを連携させる必要**がありますので、まず、Make側の準備をします。Makeのシナリオは`Custom webhook`モジュールと、`Send an email`モジュールです。

`Webhook`モジュールでNode-REDとの連携を行います。`Webhook`モジュールでAddを選択するとURLが発行されますが、最初は`Stop`となっていて使用できませんので、URLを有効にするために**URLをブラウザに貼り付け**ます。ブラウザに貼り付けて「**Accepted**」と表記されたら成功です。

`Webhook`モジュールに戻ったら、`Stop`と表記されていたものが`Successfuly determined`に変わっています。URLが有効になっていますので、コピーしてNode-REDの`http request`ノードに貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/8b8c6a46-c812-b4b8-49f1-5646b3317fbb.png)

- [x] `http request`ノードのプロパティ

Node-RED側では`http request`ノードを先ほどの`switch`ノードとつないでおきます。ここで、Makeと連携させたいのは悪い判定だった場合なので1と2のルートを選んでつなぎます。
`http request`ノードのプロパティの入力内容は表の通りです。
|項目|入力内容|
|:-:|:-:|
|メソッド|GET   |
|URL   |MakeのWebhookのURL   |
|ペイロード   |無視   |
|出力形式|UTF8文字列|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/318fdc0f-d4f1-347c-de44-e5203679b700.png)
**これでNode-REDとMakeの連携は完了です！！**
*********************

次にメールを送付するためにMake側の`Gmail`モジュールの設定を行います。まず、先ほどのMakeのシナリオの中から`Send an email`モジュールを選び、Addを選択して**MakeとGmailの連携**を行います。

Makeと連携したら、`Email address`に**送信したいメールアドレス**を入力して宛先を指定します。次に`Subject`にはメールのタイトルを、`Content`欄にはメール本文の内容をそれぞれ入力します。これで、悪い判定結果がでた場合は、Gmailからメールを送信する設定は完了です。

- [x]  `Reply`ノードのプロパティ

最後に判定結果をLINEに返す、`Reply`ノードの設定です。LINEへの判定結果の回答は全ての結果に対して行いますので`Switch`ノードの1から3の全てのルートにつなげます。
　
`Reply`ノードのプロパティでは`Secret`と`Access Token`が求められます。事前に準備しているLINE botの**チャネルシークレット**と**チャネルアクセストークン**を貼り付けて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/fc3e8a89-e35f-d126-5b4a-ceed73158cc9.png)

:::note info
デプロイを忘れずに
フローを作成したらNode-REDでフローが動くように**デプロイ**する必要があります。画面右上のデプロイボタンを押して動作可能な状態にして下さい。デプロイをしないとフローは動きません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/c92e2827-dd88-6fc8-b2bf-8e58e39628b3.png)
:::


#### これで今回のLINE bot作成の一連の作業は完了です！！！

# 今回の反省点を箇条書き
- Node-REDについてもう少し理解したかったができなかった。
- Teachable Machineの機能をあまりいかせなかった。
- 記事をダラダラ書いてしまった。特に後半見にくかったのではないか？

あげていけばキリがないのですが。。。**次回修正します！！**

# 最後に
今回の取り組みで配送台車の良し悪しを判定できるLINE botを作成し、**動かすことが出来ました！！**

しかし、これをそのまま実際の物流作業現場で使えるかというと**多くの疑問符が付きます**。積載の少ない台車が見つかっても、もうその店舗の商品がない場合や、**LINEで毎日1,000台車以上ある台車を撮影して回るのか**という課題もあります。

台車判定を切り口に深耕するなら、もう少し目的と課題を明確にする必要があると考えました。**例えば仕分間違いに特化した仕組みにする、教育を目的としたツールにする**など、大きな変更が必要です。

今回、**Node-REDやTeachable Machineという技術**について知ることができたことは大きな財産となったような気がします。今後はさらに**課題と目的を明確化(焦点をしぼる)**する、その上で**新たに知った技術を組み合わせて小さな改善を重ねる**、ことを目標としてこのような取組を続けていきます！！

#### ありがとうございました！！ ####