初心者が１週間で画像解析をして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](https://developers.line.biz/ja/)
•	[Teachable Machine](https://teachablemachine.withgoogle.com/)

## 手順
１．	LINE Developersの設定
①[LINELINE Developer](https://developers.line.biz/ja/)でプロバイダー作成
　普段使っているLINEのアカウントでログイン
　プロダクト→MessagingAPI→詳細はこちら＋→今すぐはじめようへ進む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/7d49b030-e1a9-d93c-2a34-c4e0e7b3e3a5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/0f06d3d2-1f59-04fc-a9ef-268130864360.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/8a4c2808-1aed-ee41-7a96-4c657891d278.png)
　チャネルの種類、プロバイダーは初期設定のまま、プロバイダー名は任意。
　会社・事業者の所在国・地域は「日本」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/64604360-6005-6d95-e1db-7890d730fa76.png)
　チャネル名はLINE上で表示される名前（ここでは「プロトアウトボット」）
　チャネル説明はどのようなLINEBotかわかりやすい内容を入力。
　大業種、小業種は自由に選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/0579d2be-5cf9-590e-2cc7-977d31537b45.png)
同意欄にチェックを入れて作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/2701669e-2893-6e91-ee8f-8dc39c6f03ce.png)
　プロバイダが作成されたら、このLINE Botと友達になります。
　QRコードを読み込んで友達追加をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/0e997d6a-1c02-1841-3bb7-492fd8e3c8db.png)
　「Messaging API設定」の中の応答メッセージを編集。
　Greeting message「オフ」Webhooks「オン」Auto-resuponse messages「オフ」
　を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/de203677-7372-e26e-2400-8d19e199cdd2.png)

基本的な設定は以上です。
LINE Developersはこの後も使用するため、ページは開いたままにする。
 
２．	Teachable Machineの機械学習
①	[Teachable Machine](https://teachablemachine.withgoogle.com/)にアクセス
使ってみる⇒画像プロジェクト⇒標準の画像モデルの順に進む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/534a1379-02fe-efe1-8124-e64fdd658666.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/74db8a1c-5bbf-f1cd-9e11-a2f5ed62b111.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/0afe95e4-f0e4-569a-880a-3165268a750d.png)
WAONのロゴと入力した欄は画像の名称を入力。LINE Botで回答する時の文言になるため、どのような画像かわかるようにする。
画像サンプルはパソコンの画像カメラ撮影かアップロードから選択。
画像の登録が終わったら「モデルをトレーニングする」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/053cb8fe-2bf8-aa26-3900-ab1425d56e4a.png)
画像の登録が終わったら「モデルをトレーニングする」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/23052b95-5eb2-c1ea-f162-937d111f40fc.png)
「モデルをアップロード」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/e0c347cd-dc41-fc97-da55-2625611c0e86.png)
アップロードが完了すると共有可能なリンクにURLが表示されるため、コピーボタンでURLを他に保存する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/92298396-682e-ac54-0851-169035be1ed2.png)

３．	Node-REDでノードを作成します
ノードの完成図は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/4e83ca38-b14b-37f9-1e3a-ed55bc0d9f74.png)
ワークスペースにノードと呼ばれるものを配置していきます。
ワークスペースの左側はノードが並んでいますが、もし使いたいノードがない場合は右上の「三」を押して「パレットの管理」を押します。
今回は「line-message-api」と「Teachable Machine」を追加しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/c38d8c31-d508-9887-539f-ea03a198acfa.png)
「ノードを追加」を押し、検索画面にノード名を入れると候補が絞られるため、その中から選び、右側の「ノードを追加」を押す。追加されると「追加しました」となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/33cc5cb1-3b75-c6ba-ab0a-17effb2c590f.png)
ノードの配置について
①	「http inノード」
左上の検索欄にhttpと入力しノードを検索、「http inノード」をワークスペースに配置する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/8e222bf6-9585-fed4-eff0-c0b8faaf15f6.png)
「http inノード」をダブルクリックし、下記の内容を設定、「完了」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/684b2db8-71c1-732c-8f89-a4ca102ef6c6.png)
※URLは任意の文字でOK。最初に「/」を入れることを忘れずに

②	「functionノード」
「http inノード」の横に「functionノード」を配置し、線でつなぎます。
その後、ダブルクリックで表示される画面に以下の内容を設定、「完了」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/81d63a02-f3a4-6102-7f49-8dfb8ee8ff3a.png)
コードは以下の内容をコピーし貼り付けます。
``` javascript
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設定」ページの下部にある「チャネルアクセストークン」の文字列をコピペ
出力形式：バイナリバッファ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/71172f8c-ae98-0433-10a4-8c57509a8511.png)
④	「Teachable Machine ノード」
ダブルクリックで表示される画面で以下の内容を設定、「完了」を押す。
URI：Teachable Machineでアップロードした際のURLをコピペ。
Image：チェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/b479d75d-3d0f-545a-b248-de01455c7bbd.png)
⑤	「functionノード」
ダブルクリックで表示される画面で、以下の内容を設定、「完了」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/f722e437-028f-6022-f3b7-3d557140597e.png)
コードは以下の内容をコピーし貼り付けます。
``` javascript
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設定」ページの下部にある「チャネルアクセストークン」の文字列をコピペ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/d23031fc-baeb-c153-401d-d92ef1130d9d.png)
以下のように線で繋げて完成。
最後に右上の「デプロイ」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477447/124cf5d9-bc1d-8b92-0576-b6d9889cbb3e.png)
４．	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と連動したときにうまくいきませんでしたが、ロゴを反転させて送ってみると解析通りの回答が返ってきました。
・今回作ってみたものは、業務に生かせるようなものではありませんでしたが、新しく学習した技術と技術を組み合わせて、新しいことができると可能性が広がると感じました。