お店のロゴから簡単に情報をゲット！Teachable Machineで画像認識LINEツール！ 


こんにちは！
デジタル学習を始めて2ヶ月の駆け出しエンジニア、おみえです。

私は仕事でいろんなショッピングセンターに行く機会が多いのですが、職業柄、気になるショップを見つけるたびに、「このお店ってどこの会社が運営してるんだろう？」と思うことがあります。ホームページを開いて、会社概要やブランド一覧を探すんですが、ページが分かれていたり、情報を見つけるのに時間がかかったりで、なかなか大変です。
そこで、ショップのロゴを画像で判別し、会社情報をLINEで教えてくれる📱ツールを作成しました！

# やりたいこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/70d25a99-0f07-0504-199d-e5d934b379d1.png)
以前のMakeを使ったLine Bot作成時のAPI使用を応用して作成します。

https://qiita.com/hoshieee/items/e499ecbdf2f79c0cd5d6

# 完成品
https://x.com/hoshiee38/status/1793655933509542223

※ロゴ・会社情報はサンプルを使用しています。

# 使用ツール
・[Teachable Machine](https://teachablemachine.withgoogle.com/)
・Node-RED ※[FlowFuse](https://app.flowfuse.com/)使用
・[Make](https://eu2.make.com/)
・[SSSAPI](https://console.sssapi.app/)
・[スプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)

# 作成方法

## Teachable Machineで機械学習モデルを作成する

::: note info
<b>Teachable Machineとは</b>
Google Creative Labが開発したウェブベースのツールで、機械学習モデルを簡単に作成し、ブラウザ上で実行できるようにするものです。プログラミングの知識がなくても、画像、音声、ポーズなどのデータを使って独自のモデルをトレーニングできます。
:::

今回は画像で判断してもらうので新しいプロジェクトから`画像プロジェクト`を選択します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/42023f8c-f55e-5b86-c8a6-37341109267d.png)


<details><summary><b><font color="blue">Teachable Machineの設定画面はこちらをクリック</font></b></summary>

①：画像で判断した答えを設定します。
②：学習させたい画像を読み込んでいきます。アップロードもしくはウェブカメラで読み込みます。ウェブカメラを長押しすると連続で画像を読み込んでくれます。
③：画像の設定が完了したら、モデルをトレーニングします。
④：サンプルをもとにモデルを作成してくれるので、きちんと認識できているか実際にカメラに向かって試してみます。問題ないようだったら、モデルをエクスポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/3513d194-60c7-66a4-d4fe-36b6943700f3.png)

⑤：モデルをアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/88dafa79-c489-1cbe-f75c-85fa34d422a2.png)

⑥：モデルのアップロードが終了すると、共有可能なリンクが発行されるのでコピーしてメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/e122ef01-43e9-62f2-845e-1d13d4927997.png)


</details>

:::note 
作成したモデルは、<b>`ドライブにプロジェクトを保存`</b>するか<b>`プロジェクトをファイルとしてダウンロード`</b>で保存しておくと、ブラウザを閉じた後でも作成した学習モデルを呼び出すことができます。
:::

コピーしたURLをWebブラウザに貼り付けてみて確認して問題なければ、以上で画像の学習モデルは完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/46b4f840-0529-5a5a-3aac-ba703a9e18b0.png)

## Node-REDで画像判断フローを作成する

LINEから送られてきた画像がどのショップロゴか判断し、Makeに繋げるNode-REDのフロー構造です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/ad0bb0d7-4b62-ffe5-98d7-89ef4041fd59.png)


今回使用するノードは以下となります。
必要なノードは、パレットの管理からノードを追加します。
【追加ノード】
①：`node-red-contrib-line-messaging-api`（追加）
②：template
③：http request
④：`node-red-contrib-teachable-machine`（追加）
⑤：`node-red-contrib-image-output`（追加）
⑥：chage
⑦：http request
⑧：debug

<details><summary><b><font color="blue">各ノードの設定画面はこちらをクリック</font></b></summary>

①：Webhookノード
Path：`/webhook`　Name:`webhook`
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/34bb9a3b-fd71-3987-eed0-511f8bc82698.png>


②：templateノード　
プロパティ：`msg.payload`
テンプレート：`{{line.event.message.id}}`
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/3e3215a2-9c23-1f3c-411d-f4bc089836c8.png>

③：http requestノード
URL：`https://api-data.line.me/v2/bot/message/{{{line.event.message.id}}}/content`
認証を使用　種別：`Bearer認証`、トークン：`LINEのチャネルアクセストークン`
出力形式：`バイナリバッファ`
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/2ffcdc6c-0559-ccc2-b37a-04279cdd73cd.png>

④：teachable machineノード
Url：`Teachable Machine作成時にコピーしたURL`
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/ea5142b7-fae7-14d6-1b61-59f065bc4ed9.png>

⑥：changeノード
値の代入：`msg.id`　
代入する値：`msg.payload.0.class`
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/dbf6e476-deec-1409-7bdb-e794f86d3cfa.png>


:::note 
idをパラメーター名にしてTeachable Machineで判断した答えを持ってきたいので
`id（パラメーター）＝payload.0.class（値）`という設定にします。
”0”にTeachable Machineで出た答えが入ります。
:::

⑦：http requestノード
URL：`MakeのWebhook URL`、ペイロード：`クエリパラメータに追加`
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/cd8204a4-6285-67ae-b91e-dc06de12e4d5.png>

:::note
MakeのWebhook URLの最後に`?id={{{payload.0.class}}}`を追加します。
④のchageノードで設定した値が入りMakeのWebhookに引き継がれます。
:::

⑧：デバッグノード
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/5c5f628a-ce55-bb03-3889-5dcd395014a4.png>

以上で、Node-REDの設定は完了です。
</details>

各ノードを設定し、デプロイ後に動作確認します。デバッグ欄に`class：”Teachable Machineの答え”`が出ていれば設定は問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/6e1bafb3-0dad-d1c5-6f7b-e3dc346820a8.png)

## LIVE Developersの設定
Node-REDのWebhookをLINEのWebhook URLに設定が必要です。
Node-REDアドレスバーの`https://team-`から始まるURLの最後に`/webhook`を追加してLINE DevelopersのWebhook URL欄に貼り付けます。検証ボタ欄ンを押して成功が出ればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/a39aeda4-a1b5-359c-2980-ae3b872386db.png)

## Node-REDから受け取った値をMakeでAPIを検索し情報をLINEに送るフローを作成する


 <details><summary><b><font color="blue">Makeの設定画面はこちらをクリック</font></b></summary>
 ①：Webhookモジュールの設定
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/11f3a283-6c31-8609-da55-d4b824fe0812.png)

:::note warn
このままの設定ではNode-REDから送られてきた値を受ける場所がないので、URL下の`Copy address to clopboard`でURLをコピーした後、`Redetermine date structure`をクリックして、コピーしたURLをブラウザのアドレスバーに貼り付け、パラメーター名を設定します。ブラウザに`Accepted`が出ればＯＫです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/7fe4e7f7-57b6-7601-67d0-129f479f11d4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/1abab270-41a8-cf4e-8068-cdae343ca0cc.png)
:::
②：HTTPモジュールにAPIを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/db1f3d92-2c9c-b445-7d73-cfe27d63ff86.png)

:::note
今回はスプレッドシートをAPI化できるSSSAPIを使用しました。
https://sssapi.app/
スプレッドシートを作成し、Googleドライブに保存しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/fc985cbf-78f9-37fc-5aee-3ec54625f278.png)


URLを設定する際は、フィルタリングが必要になるので以下を参照して設定します。
参照：https://sssapi.app/help/api_call
:::
③：JSONモジュールの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/8d540237-9a90-43da-a6f4-de88d7b63b0b.png)

:::note
SSSAPIで作成したAPIのJSONを`Generate`で登録します。
:::

④：LINEへの送信メッセージ
<img width=400 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/48e9e3f6-9e4e-9cf8-a2f4-7e0bdd2373c7.png>

以上で、Makeの設定は完了です。
</details>

# 実際使ってもらってみた
同僚に実際に使ってもらって感想を聞いてみました！
> ・知らないショップメモってあとからホームページで調べてる...これ便利！
> ・スプレッドシートなら共有で情報更新していける！
> ・カメラをかざすだけとかだったら送る手間すら省けるんじゃない？

写真を撮ってLINEに送るという時間すらも省ければもっと時短になるかも？
以下のような方法もあるようなのでいろいろチャレンジしてみたいと思います！

https://qiita.com/okinakamasayoshi/items/bbaaac9d58d68f2ce693

https://qiita.com/n0bisuke/items/7731e8ce9f2bbbf4d4ed

# 最後に
今回は、以前作成したLINE Botの技術を生かして、Node-REDからMakeに接続する形にしました。`http requet`ノードでAPIを呼び出せばそのままLINEにReplyができるかと思うのですが、APIを呼び出す設定に悩み、そこまでいきつくことができませんでした。Node-REDはノーコードというよりローコードなのか、Makeとは違って少しプログラミングの知識が必要だなと感じました。

# 【試行錯誤】様々なツールとTeachable Machineの連携にチャレンジ
:::note
<b>いろんな方法でTeachable Machineを連携実装するチャレンジをしました！</b>
- [x] Google Apps Scriptで作ったLINE Botでの作成
- [x] Node-REDのみで作成
- [x] Makeのみで作成
- [x] CodePenからLINE Botに情報を返信するGoogle Apps Script

結果どれもうまく作成できませんでした。まだまだ私の実力不足です。
ChatGPTに聞くと「できます」と答えてくれるのでできるはず！と信じてチャレンジしようと思います。駆け出しエンジニアののびしろは無限大です💪
:::