私は電子マネーの営業側で活動しており、決済サービスの分野ではクレジット、電子マネー、QRコード決済、ポイント（ポイ活）等は抵抗なく自由に使いこなすことができますが、仕事になるとアナログで不便なことが多くあります。
デジタル化を模索している中で今回Teachable Machineという技術を知ったので使ってみることにしました！
先日、LINE Botも学んだため、連動させて結果を表示できればと考えてみました。
電子マネーのロゴデザインが何度も変わっている電子マネーがあり、旧ロゴと新ロゴの見分けがつかない加盟店様や担当者がいるので、Teachable Machineで学習し、見分けられるようにしたかったのですが、細かい違いで識別するのが難しかった為、現在使われている電子マネーのロゴデザインを使用して識別できるか試してみました。
完成した動画
始めTeachable Machineの結果がLINE Botにうまく反映されず間違った答えが返ってきてました（失敗です）
https://twitter.com/maminnie1107/status/1680925933149257730?s=20
その後LINEから送るメッセージのロゴを反転させてみたところ正しい回答が返ってきました！
https://twitter.com/maminnie1107/status/1682992474724397057?s=20
使用したもの
• Node-RED
• LINE Developers
• Teachable Machine
手順
１． LINE Developersの設定
①LINELINE Developerでプロバイダー作成
普段使っているLINEのアカウントでログイン
プロダクト→MessagingAPI→詳細はこちら＋→今すぐはじめようへ進む
チャネルの種類、プロバイダーは初期設定のまま、プロバイダー名は任意。
会社・事業者の所在国・地域は「日本」を選択。
チャネル名はLINE上で表示される名前（ここでは「プロトアウトボット」）
チャネル説明はどのようなLINEBotかわかりやすい内容を入力。
大業種、小業種は自由に選択。
同意欄にチェックを入れて作成。
プロバイダが作成されたら、このLINE Botと友達になります。
QRコードを読み込んで友達追加をします。
「Messaging API設定」の中の応答メッセージを編集。
Greeting message「オフ」Webhooks「オン」Auto-resuponse messages「オフ」
を設定。
基本的な設定は以上です。
LINE Developersはこの後も使用するため、ページは開いたままにする。
２． Teachable Machineの機械学習
① Teachable Machineにアクセス
使ってみる⇒画像プロジェクト⇒標準の画像モデルの順に進む
WAONのロゴと入力した欄は画像の名称を入力。LINE Botで回答する時の文言になるため、どのような画像かわかるようにする。
画像サンプルはパソコンの画像カメラ撮影かアップロードから選択。
画像の登録が終わったら「モデルをトレーニングする」を押す。
画像の登録が終わったら「モデルをトレーニングする」を押す。
「モデルをアップロード」を押す。
アップロードが完了すると共有可能なリンクにURLが表示されるため、コピーボタンでURLを他に保存する。
３． Node-REDでノードを作成します
ノードの完成図は以下の通りです。
ワークスペースにノードと呼ばれるものを配置していきます。
ワークスペースの左側はノードが並んでいますが、もし使いたいノードがない場合は右上の「三」を押して「パレットの管理」を押します。
今回は「line-message-api」と「Teachable Machine」を追加しました。
「ノードを追加」を押し、検索画面にノード名を入れると候補が絞られるため、その中から選び、右側の「ノードを追加」を押す。追加されると「追加しました」となる。
ノードの配置について
① 「http inノード」
左上の検索欄にhttpと入力しノードを検索、「http inノード」をワークスペースに配置する。
「http inノード」をダブルクリックし、下記の内容を設定、「完了」を押す。
※URLは任意の文字でOK。最初に「/」を入れることを忘れずに
② 「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ノード」
ダブルクリックで表示される画面で以下の内容を設定、「完了」を押す。
URL：https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
認証を使用：チェックを入れる
種別：Bearer認証
トークン：LINE Developersの「Messaging API設定」ページの下部にある「チャネルアクセストークン」の文字列をコピペ
出力形式：バイナリバッファ
④ 「Teachable Machine ノード」
ダブルクリックで表示される画面で以下の内容を設定、「完了」を押す。
URI：Teachable Machineでアップロードした際のURLをコピペ。
Image：チェックを入れる
⑤ 「functionノード」
ダブルクリックで表示される画面で、以下の内容を設定、「完了」を押す。
コードは以下の内容をコピーし貼り付けます。
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
{
"type": "message",
"replyToken": msg.replyToken,
"message": {
"type": "text",
"text": `この画像は「${className}」\r\nになります`
}
}
];
return msg;
⑥ 「Replyノード」
配置すると「ReplyMessage」と表示されます。
ダブルクリックで表示される画面で以下の内容を設定、「完了」を押す。
Secret：LINE Developersの「チャネル基本設定」ページの下部にある「チャネルシークレット」の文字列をコピペ
AccessToken：LINE Developersの「Messaging API設定」ページの下部にある「チャネルアクセストークン」の文字列をコピペ
以下のように線で繋げて完成。
最後に右上の「デプロイ」を押す。
４． LINE DevelopersでWebhookを登録
LINE Developersのページは「Messaging API設定」ページの「Webhook設定」
そこへ貼付するURL以下の通り。
・Node-REDページのアドレスバーにあるURLをコピー
・.com/の後ろは削除し、http inノードのURL欄に入力した/以降を追加。
今回の例だと、https://nodered-*****-*****.*****.com/line_bot になります。
・そのURLをLINE Developersのページは「Messaging API設定」ページのWebhookURL」へコピーして貼り付ける。
・「Webhookの利用」はONにする。
作ってみて
・始めロゴの画像解析はTeachable Machineの中では問題なくできていたものが、LINE Botと連動したときにうまくいきませんでしたが、ロゴを反転させて送ってみると解析通りの回答が返ってきました。
・今回作ってみたものは、業務に生かせるようなものではありませんでしたが、新しく学習した技術と技術を組み合わせて、新しいことができると可能性が広がると感じました。