こんにちは！
デジタル学習を始めて2ヶ月の駆け出しエンジニア、おみえです。
私は仕事でいろんなショッピングセンターに行く機会が多いのですが、職業柄、気になるショップを見つけるたびに、「このお店ってどこの会社が運営してるんだろう？」と思うことがあります。ホームページを開いて、会社概要やブランド一覧を探すんですが、ページが分かれていたり、情報を見つけるのに時間がかかったりで、なかなか大変です。
そこで、ショップのロゴを画像で判別し、会社情報をLINEで教えてくれる📱ツールを作成しました！
やりたいこと
以前のMakeを使ったLine Bot作成時のAPI使用を応用して作成します。
完成品
※ロゴ・会社情報はサンプルを使用しています。
使用ツール
・Teachable Machine
・Node-RED ※FlowFuse使用
・Make
・SSSAPI
・スプレッドシート
作成方法
Teachable Machineで機械学習モデルを作成する
Teachable Machineとは
Google Creative Labが開発したウェブベースのツールで、機械学習モデルを簡単に作成し、ブラウザ上で実行できるようにするものです。プログラミングの知識がなくても、画像、音声、ポーズなどのデータを使って独自のモデルをトレーニングできます。
今回は画像で判断してもらうので新しいプロジェクトから画像プロジェクトを選択します。
Teachable Machineの設定画面はこちらをクリック
①：画像で判断した答えを設定します。
②：学習させたい画像を読み込んでいきます。アップロードもしくはウェブカメラで読み込みます。ウェブカメラを長押しすると連続で画像を読み込んでくれます。
③：画像の設定が完了したら、モデルをトレーニングします。
④：サンプルをもとにモデルを作成してくれるので、きちんと認識できているか実際にカメラに向かって試してみます。問題ないようだったら、モデルをエクスポートします。
⑤：モデルをアップロードします。
⑥：モデルのアップロードが終了すると、共有可能なリンクが発行されるのでコピーしてメモしておきます。
作成したモデルは、ドライブにプロジェクトを保存するかプロジェクトをファイルとしてダウンロードで保存しておくと、ブラウザを閉じた後でも作成した学習モデルを呼び出すことができます。
コピーしたURLをWebブラウザに貼り付けてみて確認して問題なければ、以上で画像の学習モデルは完成です。
Node-REDで画像判断フローを作成する
LINEから送られてきた画像がどのショップロゴか判断し、Makeに繋げるNode-REDのフロー構造です。
今回使用するノードは以下となります。
必要なノードは、パレットの管理からノードを追加します。
【追加ノード】
①：node-red-contrib-line-messaging-api（追加）
②：template
③：http request
④：node-red-contrib-teachable-machine（追加）
⑤：node-red-contrib-image-output（追加）
⑥：chage
⑦：http request
⑧：debug
各ノードの設定画面はこちらをクリック
①：Webhookノード
Path：/webhook Name:webhook
②：templateノード
プロパティ：msg.payload
テンプレート：{{line.event.message.id}}
③：http requestノード
URL：https://api-data.line.me/v2/bot/message/{{{line.event.message.id}}}/content
認証を使用 種別：Bearer認証、トークン：LINEのチャネルアクセストークン
出力形式：バイナリバッファ
④：teachable machineノード
Url：Teachable Machine作成時にコピーしたURL
⑥：changeノード
値の代入：msg.id
代入する値：msg.payload.0.class
idをパラメーター名にしてTeachable Machineで判断した答えを持ってきたいので
id（パラメーター）＝payload.0.class（値）という設定にします。
”0”にTeachable Machineで出た答えが入ります。
⑦：http requestノード
URL：MakeのWebhook URL、ペイロード：クエリパラメータに追加
MakeのWebhook URLの最後に?id={{{payload.0.class}}}を追加します。
④のchageノードで設定した値が入りMakeのWebhookに引き継がれます。
⑧：デバッグノード
以上で、Node-REDの設定は完了です。
各ノードを設定し、デプロイ後に動作確認します。デバッグ欄にclass：”Teachable Machineの答え”が出ていれば設定は問題ありません。
LIVE Developersの設定
Node-REDのWebhookをLINEのWebhook URLに設定が必要です。
Node-REDアドレスバーのhttps://team-から始まるURLの最後に/webhookを追加してLINE DevelopersのWebhook URL欄に貼り付けます。検証ボタ欄ンを押して成功が出ればOKです。
Node-REDから受け取った値をMakeでAPIを検索し情報をLINEに送るフローを作成する
Makeの設定画面はこちらをクリック
①：Webhookモジュールの設定
このままの設定ではNode-REDから送られてきた値を受ける場所がないので、URL下のCopy address to clopboardでURLをコピーした後、Redetermine date structureをクリックして、コピーしたURLをブラウザのアドレスバーに貼り付け、パラメーター名を設定します。ブラウザにAcceptedが出ればＯＫです。
②：HTTPモジュールにAPIを設定
今回はスプレッドシートをAPI化できるSSSAPIを使用しました。
https://sssapi.app/
スプレッドシートを作成し、Googleドライブに保存しておきます。
URLを設定する際は、フィルタリングが必要になるので以下を参照して設定します。
参照：https://sssapi.app/help/api_call
③：JSONモジュールの設定
SSSAPIで作成したAPIのJSONをGenerateで登録します。
④：LINEへの送信メッセージ
以上で、Makeの設定は完了です。
実際使ってもらってみた
同僚に実際に使ってもらって感想を聞いてみました！
・知らないショップメモってあとからホームページで調べてる...これ便利！
・スプレッドシートなら共有で情報更新していける！
・カメラをかざすだけとかだったら送る手間すら省けるんじゃない？
写真を撮ってLINEに送るという時間すらも省ければもっと時短になるかも？
以下のような方法もあるようなのでいろいろチャレンジしてみたいと思います！
最後に
今回は、以前作成したLINE Botの技術を生かして、Node-REDからMakeに接続する形にしました。http requetノードでAPIを呼び出せばそのままLINEにReplyができるかと思うのですが、APIを呼び出す設定に悩み、そこまでいきつくことができませんでした。Node-REDはノーコードというよりローコードなのか、Makeとは違って少しプログラミングの知識が必要だなと感じました。
【試行錯誤】様々なツールとTeachable Machineの連携にチャレンジ
いろんな方法でTeachable Machineを連携実装するチャレンジをしました！
- Google Apps Scriptで作ったLINE Botでの作成
- Node-REDのみで作成
- Makeのみで作成
- CodePenからLINE Botに情報を返信するGoogle Apps Script
結果どれもうまく作成できませんでした。まだまだ私の実力不足です。
ChatGPTに聞くと「できます」と答えてくれるのでできるはず！と信じてチャレンジしようと思います。駆け出しエンジニアののびしろは無限大です💪