初心者が１週間で画像解析をしてLINEBotを作る方法

私は電子マネーの営業側で活動しており、決済サービスの分野ではクレジット、電子マネー、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と連動したときにうまくいきませんでしたが、ロゴを反転させて送ってみると解析通りの回答が返ってきました。
・今回作ってみたものは、業務に生かせるようなものではありませんでしたが、新しく学習した技術と技術を組み合わせて、新しいことができると可能性が広がると感じました。