14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

「これどこにあるの?」 Teachable Machineを使って売り場探すLINE bot作成記録

Last updated at Posted at 2022-06-03

「これどこにあるの?」

こんにちは。

自社の店でも迷い子になる、コードとか見たらすぐ頭が痛くなるのにDXに関わっている部門で働くスーパーマーケット社員でーす。

近ごろは、人手不足が深刻だ。特別なスキルを要求するわけではなく、ごく普通のアルバイト人員を求めているのだが、採用に大苦戦するようになっている。・・・個々の店では不足する人手が補充されないため、残ったスタッフにさらに重い負荷がかかるようになり、やがて彼らが体や精神を壊して脱落するという“悪循環”に陥る店も少なくない。・・・小売や物流・倉庫業など「体力勝負」の業界に共通する悩みのようだ・・・

最近、このようなニュースがよく流しています。スーパー運営している自社も大きく影響され、本社の人も店舗支援に入らなきゃ。もちろん、よく行く店もあるし、年に一回も行かない店も断然ありえます。ですが、この時一番困るのは、お客さんから**「これどこにあるの?」と**のお問い合わせです。

答えはいつも 「申し訳ございません。この店に仕事をするのは自分も初めてですので・・・他のスタッフに聞かせていただきます。少々お待ちくださいませ。」 となり、店員さんを探すに 猛ダッシュ

「その場で、答えて案内できてしてほしい」 と考え、今回はTeachable Machineを使って売り場探すLINE botを作ってみよう。

完成品

9c55edc30799c2182004e6fdb890908a.gif

事前準備

  • Teachable Machine
  • LINE Bot
  • Make(旧Integromat)
  • Node-RED
  • SSSAPI
  • Google Spreadsheet (以下GSS)

作成過程

1. Teachable Machine機械学習

早速、Teachable Machineに商品の顔を覚えましょう。
今回はチョコレート、ドリップコーヒー、バナナ三品を学習しました。一品ずつ写真100枚ぐらいがあれば、結構高い精度で認識できます。
image.png

【結果】
OKでした
image.gif

2. Node-RED フロー作成、 Teachable Machine と連携

image.png

【結果】
こちらもOKですね。
image.png

3. Make と Node-RED 連携

image.png
image.png
image.png

【結果】
image.png

>>>>詳細設定はこちら<<<<

3-1 Webhooksモジュールを追加
Webhook nameを入れて、「Save」します。すると、Weebhookアドレスが生成します。
image.png
image.png

3-2 Webhookアドレス テスト
MakeをRun Once後、Weebhookアドレス後ろに?Product=ドリップコーヒーなどくっつけてブラウザーにテストします。Acceptedと答えてくると成功です。Make内も反映します。
image.png

image.png

3-3 Node-RED内設定

  • templateノードに認識したClassラベル表示する{{payload.0.class}}にセットし、.Productをくっつけます。

ここのProductはWebhook ID後の名前が一致しないとエラーになる (大文字小文字区別)

image.png

  • http requestノード設置
    image.png

  • httpノード設置
    image.png

4. Make とGoogle Spreadsheet 、SSSAPI 連携

商品の位置情報、棚割り情報はGSSに保管します。SSSAPIと連携した後、Make内HTTPモジュール、JSONモジュールでAPIリクエストをセットします。
image.png
image.png
image.png

作成当初、リクエスト結果がいつもGSS全体を出てきます。調べた結果、1件取得ではなく全体取得となるためです。この場を借りまして情報共有・注意喚起をします。
参考: 公式ヘルプ#1件取得

HTTPモジュールに、日本語を検索する際はの後に/encodeURL()をセット、括弧内WebhooksモジュールのProductを設置。
image.png

【結果】
ちゃんと1件取得しました。
image.png

5. LINE Bot に返信

最後に、返事の内容を充実させます。
image.png

文字より地図の方がわかりやすいです。事前に地図の画像をアップロードして、リンクもGSSに保管します。

最後に.png.jpgではないリンク(共有リンク)は反応しません。
参考: 公式ドキュメント

image.png
image.png

さらにさらに、この商品がセール中の場合、セール情報も合わせて送りましょう。
image.png

【結果】
(地図はテストものです)
image.png

全体流れ

image.png
image.png

完成感想

「えぇ!これおもしろい!」 ーー(女性、人事総務部、社員)

「けどPCカメラだけならちょっと・・・」 ーー(女性、店舗勤務、パートナー)

「LINEで写真を送って返事が来るならどう?」 ーー(男性、DX推進部、社員)

職場から思った以上の反応と意見をいただきましたw

やはり売り場探すのは難しいですね。

やりたかったこと

せっかく「PCしかできないならちょっと・・・」という意見もいただきまして、最初のゴールも「その場でわかる」と設定しました。LINE botに写真を送ればもっと楽になると思います。だた今回は、そこまでの能力がないので、今後再度挑戦してみましょう。
※6/4追記: 二日間試しましたが、ダメでした・・・ 詳しい理由がまだはっきり言えない、またやってみよう!

また、一点足りないのは、今回のTeachable Machineは、トレーニングしたものしかわからなく、それ以外のものが既存データ中似ているものに認識されました。自分の顔のみ映されたときもドリップコーヒーに認識されましたwwww。

完璧完成品まで、遠い道ですね。

参考

14
5
1

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
14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?