LINE Bot初号機をTeachable MachineとNode-Redで進化
今回こんなノードフローで作成してみました。
ここまでのあらすじと課題
私は小売業の会社に勤務しており、市場価格の変動が激しくそのチェックに手間がかかります。特にECは価格変動スピードが店頭よりも速く追うのが大変です。自社店舗や競合店の巡回時に店頭価格を見た際、現場では携帯しか使用できないため「ECと比較してどうなのか」を確認するのは大変効率が悪いため困っておりました。そこで、前回はLINEに商品コード（JAN）を打ち込むと3大ECモール(Amazon、Rakuten、Yahoo)それぞれの最安値がその場で分かるというLineBot初号機を作ってみました。MakeとSSSAPIを活用し事前に価格調査をまとめたスプレッドシートからデータを引張りLINEへ返すものでした。
【前回記事】
しかし、実際運用してみて使い勝手に課題を感じました。店頭で通常13桁ある商品コード（JAN）の数値をLINEへ手打ちするのはかなり面倒だし、間違いやすいという点です。そこで今回は「Teachable Machine」と「Node-Red」を活用して、手打ち作業をなくし商品を撮影するだけで各モールの最安値がLINEに返ってくるという進化版に挑戦しました！
目次
今回使用したツール
Teachable Machineの設定
Node-Redの設定
各ノード設定
完成！！
今回使用したツール
LINE Bot
Teachable Machine
Node-Red
SSSAPI
今回、LINE Botは多くの方の記事ありますし、SSSAPIの設定については私も前回記事でも触れているので詳細設定については割愛します。
Teachable Machineの設定
「Teachable Machine」はGoogleが提供する、簡単に機械学習のモデルを作成できるサービスです。 Teachable Machineでは「画像プロジェクト」「音声プロジェクト」「ポーズプロジェクト」の3種類のモデルが作成可能ですが、今回は「画像プロジェクト」を作成します。
1.さっそく機械学習
商品の外箱を複数撮影し、画像サンプルとして登録します。各商品のJANをタイトルにします。
方法はウエブカメラ撮影でもPC内の画像アップロードでもかまいません。
その後、モデルトレーニングを行いモデルエクスポートすると設定完了です。
下記写真では一つ目の商品をカメラにかざすと100％合致判定が出ています。各商品の判定率が低くないかチェックして次の工程に入ります。
2.モデルエクスポートが完了すると下記の画面になります。
共有可能なリンクは後でNode-Red内で使用しますのでどこかにキープです。
また、先程画像学習した画面左上のメニュークリックしGoogledriveへ、学習したプロジェクトを保存しておくと今後便利です。
Node-Redの設定
1.使用するノード一覧
| 番号 | 分類 | ノード |
|---|---|---|
| 1 | LINE | Webhook |
| 2 | ネットワーク | http request |
| 3 | 分析 | Teachable Machine |
| 4 | 機能 | templete |
| 5 | ネットワーク | http request |
| 6 | 機能 | function |
| 7 | LINE | RepyMessage |
ちなみに番号2と5は同じノードです。
2.ノードフロー
3.必要なノード取得
デフォルトではLINE（番号1＆7） Teachable Machine(番号3) は実装されていないため、メニューからパレット管理を選択しノードの追加を行います。
下記のテキストで検索すると追加できるようになります。
node-red-contrib-line-messaging-api
node-red-contrib-teachable-machine
プロセス詳しく解説されている記事貼っておきます、ご参考までに。
各ノード設定
初挑戦につき、詳細が全く分からないため各ノードにデバックをつけ設定をmsgオブジェクトに変えておくことで、詳細を確認しながら進めました。
こんな感じ。
1.LINE Webhook
Pathは任意で入力です。
これもドキドキしながら調べつつたどり着きました。
2.http request
URLは下記を入力します。
https://api-data.line.me/v2/bot/message/{{{line.event.message.id}}}/content
トークンは使用する一般的な認証の名前が「Bearer認証」で、Line-DevelopersのMessaging API設定から、チャンネルアクセストークンをコピーして貼り付けます。
その他は下記画像のとおり設定です。
3.Teachable Machine
前述の学習・設定済みのプロジェクトでコピーしたURLをここで使用します。
その他の項目は、下記画像の通り設定します。
4.templete
Teachable Machineからの情報を次のGoogle sheetsのデータから情報を取り出すための設定をします。
デバッグウィンドウで確認すると、payloadのclassなかに 商品コード（JAN） が入っていることが確認でき、これをキーにSSSAPIからデータを返したい！
よって{{payload.0.class}}をテンプレートに入力します。
5.http request
ここで、上記でテンプレート化した商品コード（JAN）をSSSAPIに送り、データを取得します。
SSSAPIで連携したいスプレッドシートのURLを貼付け。（詳細は前回記事参照下さい）
その他の項目は、下記画像の通り設定します。
6.function
ここが今回の最難関でめちゃく大変でした。頭から煙出ました！
商品コード（JAN）をキーにして、商品名・モール名・それぞれの最安値をメッセージとして受取りたい、そのために複数列の情報を切り分けなければ。。。
さっぱりやり方のイメージがわきません。
でも前回やったMake ならUIも優れていて、商品コード（JAN）を送ることができれば「HTTP」モジュールからSSSAPIにつないで返せば簡単に解決できるとイメージできたのでMakeに繋げることに挑戦してみます。
構想はよさそうだが、どうやって商品JANのみをテキストでNode-RedからMakeへ送るかわからない、やっぱり甘くない。
それにMake内でのトラブルもどんどん増える。。。折りたたんでます。
HTTP make a request でValueに event message text項目が出なくなりました
send a replyの reply token にも event reply token 項目がなくなってしまいしました。
さっそく、データソースとなるスプレッドシートは以下のとおりで、1行に入っている列情報は5つです。
連携したhttp requestのデバックを確認すると以下です！無事5つの列情報は取得できているようです。しかし、問題はpayloadの中に入っているこの5つを切り分けて、メッセージとして取り出す方法がわからないです。
迷走してあれこれいろんなノードを試した結果、functionノードなら解決できそうなことにたどり着きました！でも、functionノードの編集を開くとその設定方法はなんとJavaScript！知識ゼロです。。。
しかしながら、我々にはChatGPT先生がいます。先生は質問の仕方が大事です。
何度か質問しなおして、やっとこさ
コードをGETです。
// HTTPリクエストからのpayloadを整形してメッセージを生成
var message = "各ECモールの最安値は以下のとおりです。\n"
+ "ID: " + msg.payload["id"] + "\n"
+ "商品名: " + msg.payload["商品名"] + "\n"
+ "Amazon: " + msg.payload["Amazon"] + "円\n"
+ "Rakuten: " + msg.payload["Rakuten"] + "円\n"
+ "Yahoo: " + msg.payload["Yahoo"] + "円";
// メッセージをmsgオブジェクトにセット
msg.payload = message;
return msg;
これをノードに貼付けで完成！
デバックでチェック。うむ！切り分けとメッセージ化できてる。
余談：最初に返ってきたコードに違和感ありました。ChatGPT様も間違えますが素直に認めて好印象です(笑) 必ず自己責任で確認を。折りたたんでます。
7.LINE RepyMessage
ここまでくれば簡単です。
Line Developersで
Secret:チャンネルシークレットの値を入力
AccessToken：チャンネルアクセストークンの値を入力
完成！！
正直かなり苦戦したけどNode-Redで環椎できたことの達成感が大きいです。
やりたいことできて、めちゃくちゃうれしい！((´∀｀))ｹﾗｹﾗ
今後の改善すべく課題は、
1.「Teachable Machineレスポンス速度が遅い」最初の動画は4倍速です😢
2.「リアルタイムでの価格更新」今後のさらなる学びの中で挑戦です。
では引続き勉強してまいります。