Go to Qiita Advent Calendar 2024 Top
LoginSignup
14
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yat

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

Last updated at Posted at 2023-11-19

取り扱う商品の在庫が多すぎて困っている😵‍💫

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

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

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

今回使用したツール

  • LINE
  • Make
  • Teachable Machine
  • Node-RED in enebular

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

image.png

完成したLINEBot

やりたかったこと）

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

(完成したLINE Bot)

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

実装手順

全体図がこちらになります。

  • Node-RED

image.png

  • Make

image.png

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

1.事前準備

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

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

2.実際に作ってみよう

①Teachble Machineの準備

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

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

公式サイト「Teachble Machine」

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

image.png

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

image.png

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

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

image.png

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

image.png

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

②Node-REDのフロー構造

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

image.png

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

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

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

もっと詳しく知りたい方はこちらのサイトを確認ください。

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

  • http in
  • function
  • http request
  • teachble machine
  • template
  • http responce
  • debug
  • image

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

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

  • http inノードのプロパティ

image.png

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

  • functionノードのプロパティ

image.png

プロパティ内のコード欄に以下のコードをコピーして貼り付けを行います。

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ノードのプロパティ

image.png

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

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

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

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

  • Teachble machineノードのプロパティ

image.png

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

  • templateノードのプロパティ

image.png

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

{{payload.0.class}}
  • 2個目のhttp requestノードのプロパティ

image.png

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

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

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

③Makeのフロー構造

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

image.png

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

Makeについて知りたい方は下記サイトをご確認ください。

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

  • webhook
  • Google Sheets
  • Router
  • LINE

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

  • webhookモジュールの設定

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

image.png

  • Google Sheetモジュールの設定

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

image.png

  • １個目のLINEモジュールの設定

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

image.png
image.png

  • ２個目のLINEモジュールの設定

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

image.png

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

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

  • 商品名の中に判定結果が含まれている、かつスプレッドシートのD列にデータが格納されている
    image.png

  • 商品名の中に判定結果は含まれていない、またはスプレッドシートのD列にデータが存在しない
    image.png

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

参考資料

①Teachable MachineとenebularとLINE Botで機械学習を体験しよう！
②LINE Messagin API を利用できる Node-RED のノードの新機能（Bot の返信で画像を利用）を enebular 上で試す

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

最後に

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

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

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

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

14
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?