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

Teachable Machineを使ったLINE botを作成する

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

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

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

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

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

LINE botの作成に使用したツール

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

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

Node-REDのインストールについては以下の記事を参考にさせて頂きました。
＜参考にさせて頂いた記事＞
　Herokuのアカウント作成とNode-REDのインストール

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

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

LINE botの作成結果です

(やりたかったこと)

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

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

(完成したLINE botです)

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

→　→　→　→　ちゃんと動いてますね！

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

・Node-REDのフローにLINEで撮影した画像が送れています

・指定したメールアドレスに通知メールが送れていますね。成功です！！

今回、初めてNode-REDを使ってみましたが、最初は一見簡単そうに見えましたが、

初心者にとっては・・・(ムズッ)！

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

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

Node-REDのフローの紹介

(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

ノードとは
ノードはNode-REDの構成要素で何らかの処理をするための機能のかたまりです。前方のノードから情報を受け取るか外部イベントを受け取ることで動きます。

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

• http inノードのプロパティ

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

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

次にhttp inノードをダブルクリックしてプロパティを開きます。プロパティでは、メソッド欄でPOSTを選択し、URL欄に/linebotと入力します。これで、http inノードの設定は完了です。

• functionノードのプロパティ

次にfunctionノードをパレットからドラッグ＆ドロップして先ほどのhttp inノードとつなぎます。ノードのに付いている「端子」と呼ばれる点をクリックして引っ張ると簡単にノード同士をつなぐことができます。

次にfunctionコードのプロパティを開き、コード欄に以下のコードをコピペします。

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ノードのプロパティ

次にhttp requestノードをパレットからドラッグ＆ドロップして、先ほどのfunctionノードとつなぎます。プロパティの中身ですが、URL欄に以下のURLをコピペします。

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

URL内の{{{messageID}}}の{}が3つあるのがミソのようです。

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

最後に出力形式はバイナリバッファを選択してLINE画像の送付準備は完了しました。

また、今回のLINE画像の送付は次の記事を大変参考にさせて頂きました！(ほぼそのままですが…)　ありがとうございました！
＜参考にさせて頂いた記事＞
Teachable MachineとenebularとLINE Botで機械学習を体験しよう！

②Teachable Machineの準備とNode-REDとの連携をする

この段落で使用したノード

• Teachable Machine
• function

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

Teachabl Machineはこんなに簡単にできるの？！というぐらい簡単に機械学習ができるGoogleの無料サービスです。公式サイト→ Teachable Machine

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

(Teachable Machineの画像認識モデルの準備はこちら)

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

5)これでTeachable Machineの完成です！！

---

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

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

③判定に応じて次のノードの行先を分岐させる。

この段落で使用したノード

• switch

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

• switchノードのプロパティ

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

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

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

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

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

それ以外の判定についてはルールにそれ以外を選択します。これで、1、2の条件以外のものは3のルートに進みます。

これで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ノードに貼り付けます。

• http requestノードのプロパティ

Node-RED側ではhttp requestノードを先ほどのswitchノードとつないでおきます。ここで、Makeと連携させたいのは悪い判定だった場合なので1と2のルートを選んでつなぎます。
http requestノードのプロパティの入力内容は表の通りです。

項目	入力内容
メソッド	GET
URL	MakeのWebhookのURL
ペイロード	無視
出力形式	UTF8文字列

これでNode-REDとMakeの連携は完了です！！

---

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

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

• Replyノードのプロパティ

最後に判定結果をLINEに返す、Replyノードの設定です。LINEへの判定結果の回答は全ての結果に対して行いますのでSwitchノードの1から3の全てのルートにつなげます。
　
ReplyノードのプロパティではSecretとAccess Tokenが求められます。事前に準備しているLINE botのチャネルシークレットとチャネルアクセストークンを貼り付けて下さい。

デプロイを忘れずに
フローを作成したらNode-REDでフローが動くようにデプロイする必要があります。画面右上のデプロイボタンを押して動作可能な状態にして下さい。デプロイをしないとフローは動きません。

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

今回の反省点を箇条書き

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

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

最後に

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

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

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

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

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