効率UP！！在庫明細を確認しなくても写真で在庫情報がわかるシステムを作ろう🐦

# 取り扱う商品の在庫が多すぎて困っている😵‍💫
私が働いている職場は、お菓子、雑貨、おもちゃなど多種多様な商品を取り扱っています。
在庫の数も多く、**倉庫の商品一つ一つに商品情報が載った紙を貼って管理しています。**
その商品に貼っている紙情報とインターネットで管理している在庫明細情報と照らし合わせて、毎日在庫管理をしています。

たまに紙が何かの拍子ではがれてしまい、商品名がわからなくなってしまうことがあり、
その際は大量の在庫明細の中から、**名前を頑張ってみつけなださなければなりません。**
景品をみたらすぐになんの商品かわかるシステムがあれば、効率があがるのに・・・

そんなときに**Teachable MachineというAIで画像解析**できるサービスを知ったので、LINEに商品画像を送ったらその商品に関連した在庫明細を返してくれるLINEBotを作成してみました。


## 今回使用したツール
- LINE
- Make
- Teachable Machine
- Node-RED in enebular

在庫明細は実際のものを使用できないため、**ダミーデータ**を作成して使用しております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/6baf5fe5-d055-c719-bb5e-a932188e52c6.png)


## 完成したLINEBot

やりたかったこと）

①撮影した画像を**LINEBot**に送信する
②**Node-RED**でLINEサーバーから送信された画像を受け取る
③Node-REDと**Teachble Machine**を連携させて、送られてきた画像の商品名を判定する。
④判定した商品名と在庫明細の商品名を比較する。
⑤③の結果が**在庫明細の商品名に含まれる商品情報をLINEに返す。**

(完成したLINE Bot)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画像を送るだけで商品情報返してくれる～～✨<br>なんて楽なんだろう😊<br>AIってすごいね！！！<a href="https://twitter.com/hashtag/AI?src=hash&amp;ref_src=twsrc%5Etfw">#AI</a> <a href="https://twitter.com/hashtag/LINEBot?src=hash&amp;ref_src=twsrc%5Etfw">#LINEBot</a> <a href="https://twitter.com/hashtag/TeachbleMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachbleMachine</a> <a href="https://twitter.com/hashtag/%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0?src=hash&amp;ref_src=twsrc%5Etfw">#システム</a> <a href="https://twitter.com/hashtag/System?src=hash&amp;ref_src=twsrc%5Etfw">#System</a> <a href="https://t.co/w5kSrWhjig">pic.twitter.com/w5kSrWhjig</a></p>&mdash; yat (@Hd3KETe5R885059) <a href="https://twitter.com/Hd3KETe5R885059/status/1726298113328165127?ref_src=twsrc%5Etfw">November 19, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

::: note warn
**実際の商品データを使用できないため、ダミー情報を使用しています。**

:::


## 実装手順

### 全体図がこちらになります。
- **Node-RED**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/5586968d-c533-20f4-560c-98eba719e86c.png)

- **Make**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/347795b3-0633-1c26-76ef-d47f4fd1cb8f.png)


かなり全体像としては**シンプル**に見えるかもしれませんが、かなり中身を理解するのに時間がかかりました・・・
次からは実際に作成手順をお伝えしていきます。

### 1.事前準備

今回LINE Botを作成するにあたり事前に必要ことを一覧にしました。

- LINE DevelopersでLINE Botのチャネル作成
- Makeアカウントの作成
- eneblularのアカウント登録


### 2.実際に作ってみよう

#### ①Teachble Machineの準備

まずは初めにTeachble Machineの準備をします。

:::note info
**Teachble Machineとは**
Googleが提供する機械学習を手軽に扱えるようにするためのWebツールです。 取り扱えるのは、音声、画像、ポーズ（ジェスチャー）の3種類で、学習モデルを簡単に作れます。 Teachable Machineでは、学習モデルはプロジェクトと呼ばれています。

公式サイト「[Teachble Machine](https://teachablemachine.withgoogle.com/)」
:::

公式サイトにアクセスしたら、**使ってみる**をクリックしてください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/9756ba90-772e-ea78-d107-2fee8de71d3e.png)

次に新しいプロジェクトを作成する項目に移ります。
プロジェクトには**音声、画像、ポーズ（ジェスチャー）**の３種類から学習モデルを作れます。
今回は画像を使用するので、**画像プロジェクト**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/5d9b2ef4-2f08-8489-39ce-c6c341d662e0.png)

ここでは画像を読み込ませて学習モデルを作成していきます。
学習させたい画像を**アップロードまたは、カメラで録画します。**

つぎに画像のアップロードが完了したら、トレーニングをさせていきます。
トレーニングを行うと**AIが自動的に画像をサンプルをもとにモデルを作成します。**


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/436ccc5a-b0c1-774c-84c8-d78d17254d3b.png)

先ほどAIが作成したモデルをエクスポートしていきます。
エクスポートするとWebhookを利用して他のアプリケーションからこのモデルを使用することが可能となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/98957301-f024-bed7-0e71-811c9b12a4dd.png)

**以上でTeachble Machineの準備は完了です。**
次からはこの作成した学習モデルを使用してLINEBotから在庫情報を返すシステムを作成していきます。


#### ②Node-REDのフロー構造

LINE Botに送られた画像データをNode-Redで受け取りAIに画像を判定させて判定結果を出力するのは下記画像の**ノード**で構成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/037cbc3e-ff1b-caf0-7881-5329122c4945.png)


:::note info
**ノードとは**
ノードはフローの基本的な構成要素です。

ノードはフロー中の前方のノードからメッセージを受け取るか、 HTTPリクエストの受信やタイマー、GPIOハードウェアの変化のような外部イベントを受け取ることで起動します。 ノードはメッセージまたはイベントを処理し、 フロー中の次のノードにメッセージを送出します。

（ノードの種類）`function` `http in` `debug` などがあります。

もっと詳しく知りたい方は[こちらのサイト](https://nodered.jp/docs/user-guide/concepts)を確認ください。
:::

今回実装で使用したノードは下記になります。

- `http in`
- `function`
- `http request`
- `teachble machine`
- `template`
- `http responce`
- `debug`
- `image`

:::note warn
**必須ではないノード**
`debug` `image`は結果が正しく反映されているかを確認するためのノードとなるため、必ず必要というわけはありません。
ただし、システムが正しく動作しないときにどこで止まっているのか確認する必要があるため、デバックをする癖を身につけておこう。
:::

**次に各ノードのプロパティを確認したいと思う**

- [x]  `http in`**ノードのプロパティ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/2a0b24a3-e02c-64b2-b4d6-3be5f1fe7520.png)

メソッドをPOSTにして今回はURL欄に「/linebot」を入力します。

- [x] `function`**ノードのプロパティ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/b73770de-b64d-73ae-089a-e4b73a663e5c.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;
```

- [x] １個目の`http request`**ノードのプロパティ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/c0c04b4f-7b5c-a791-2e18-e03b2788888b.png)

URL内には下記URLを入力します。

```javascript
https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
```

次に認証を使用にチェックを入れ、種別は`Bearer認証`を選びます。
`トークン`には事前に用意した**LINE Botのチャネルアクセストークン**を貼り付けます。

最後に出力形式は`バイナリバッファ`を選択してLINE画像の送付準備は完了です。

- [x] `Teachble machine`**ノードのプロパティ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/07d2f689-f806-c71c-b571-5dc718eac2ee.png)

URLにTeachble Machineで作成したモデルのURLを貼り付けます。

- [x] `template`**ノードのプロパティ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/d634f1c7-e5ef-c4e3-e38f-f8f8fc94c7f0.png)

テンプレートの欄に下記コードを入力することでTeachble Machineで判定した結果を文字列として出力します。

```javascript
{{payload.0.class}}
```

- [x] 2個目の`http request`**ノードのプロパティ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/d8310416-aa51-2847-28af-2970a3644298.png)

URLにはMakeのWebhookモジュールで使用するURLを記入する。

これにて、LINEBotで送られてきた画像をあらかじめAIに判定させて、結果をhttpに返すという仕組みが完成しました。

次はその判定結果をもとに在庫明細の情報と照らし合わせて一致したデータをLINEBotで返してもらう仕組みお伝えします。

#### ③Makeのフロー構造

先ほどのNode-REDで判定した結果をもとに在庫明細と比較して一致したルールによりLINEに返信をするのは下記**モジュール**で構成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/a98c6c18-e147-6a4c-163e-fdbe7ba742bd.png)

:::note info
**モジュールとは**
モジュールはMakeで使用されるツールのことを指します。

Makeについて知りたい方は下記サイトをご確認ください。
- [ノーコード開発をはじめよう！最強ツールmake(旧integromat)の登録方法を分かりやすく解説します](https://note.com/nocode_dev/n/n4498ead35102)
- [【ノーコード入門】LINEを使った簡単な設定で最強ツールmakeを試してみる](https://note.com/nocode_dev/n/nb2d4e39eb25f)
:::

Makeで使用したツールは下記になります。

- `webhook`
- `Google Sheets`
- `Router`
- `LINE`

次に各モジュールの設定を確認していきたいと思います。

- [x] `webhook`**モジュールの設定**

WebhookでNode-REDの２個目にある`http request`ノードと連携することでAIが判定した結果をMakeで受け取ることが可能となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/866ad76a-6d6c-66bf-41f0-c37dc140acb6.png)

- [x] `Google Sheet`**モジュールの設定**

Node-Redから受け取った値がスプレッドシートのD列の商品名に含まれているどうかを判定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/28747c0e-ac95-6779-217f-82541508c0ca.png)

- [x] １個目の`LINE`**モジュールの設定**

判定した結果に伴い分岐させてLINEbotに返信させる値を決めます。
もし商品名の中にNode-Redから送られてきた結果が含まれており、**かつ**スプレッドシートのD列にデータが格納されている場合はA列、B列、D列、F列、G列、H列の値とE列の画像を返す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/463351df-8afc-4526-ed5a-18aa9a3b4712.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/49f7f175-35bd-e3a0-55fb-feccfd5a255b.png)


- [x] ２個目の`LINE`**モジュールの設定**

先ほどの分岐でD列に文字列が存在しない場合、**または**商品名の中に判定結果が含まれていない場合は「在庫が存在しません」と返す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/54d5e408-c42f-9d46-4ab5-0293461fffc4.png)

:::note warn
ここでは分岐となるRouterモジュールの中身が重要になってきます。

以下にそれぞれの分岐の中身画像を添付しておきます。

- **商品名の中に判定結果が含まれている、かつスプレッドシートのD列にデータが格納されている**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/2a9e87c2-ce05-21f2-79cb-6b8b68be4796.png)

- **商品名の中に判定結果は含まれていない、またはスプレッドシートのD列にデータが存在しない**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/f2c0ba70-2313-63ca-b8b4-b19cf4a7ae04.png)

:::

**上記でMakeの設定が完了となり、LINEBotの完成となります。**


## 参考資料

①[Teachable MachineとenebularとLINE Botで機械学習を体験しよう！](https://atlabo-handson-08.netlify.app/#2)
②[LINE Messagin API を利用できる Node-RED のノードの新機能（Bot の返信で画像を利用）を enebular 上で試す](https://qiita.com/youtoy/items/287a0782fdd185fc2004)

上記二つを確認することで、**Node-RED**と**LINEBot**を連携させる仕組みがよく理解できました。

## 最後に

今回作成したシステムでもし在庫の商品名がわからなくなったとしても、**画像を送信するだけで商品情報を返してくれるLINEBotを作成することができました！！**

しかし、今回作成したシステムはこちらが用意したデータで検証しているため、**実際には大量の商品データをどこかしらから入手しAIに読み込ませる必要がある**ため、現状では現実的ではないかもしれない。

もしこのシステムをよりよいものにするのであれば、商品画像の入手、AIに新規データを読みこませる技術、など多くの課題は残っています。またほかの技術を見つける必要があると思うため、また新しい技術を模索しようと思う。

今回、使用した**Teachable Machine、Node-RED**という技術は簡単に操作することが可能であり、またこれからも使用していきたいと思います。今後はさらに新規技術と組み合わせて課題を解決できるシステムを作っていきます！！！