レジにお客さまが並んだら教えてくれる！ 画像認識ツールを使えばずっとレジにいなくてもいいんです！

![1094733.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/d4f33b8e-6767-f672-616e-e79c7158ee8a.jpeg)

スーパーで働く私は、ただ今DXで課題を解決してみようといろいろ試行錯誤中です。
今回は画像認識ツールを使って課題解決への取り組みを考えてみました。

私が働くスーパーは24時間営業してる店舗もたくさんあります。
深夜はお客さまも少ないですから
従業員がレジにずっと立っていることはありません。
ですので、深夜のレジスタッフは他の仕事をしながら
お客さまのお会計の時だけレジに戻るのがほとんどです。

ただ、このレジに戻るタイミングが意外と難しいんです。
呼び鈴を用意してたりするのですが、
お客さまも気が付かなくてずっと待っていたりします。
少し離れたところで仕事をしていると、
スタッフもなかなか気が付かなくて、
お客さまにもご迷惑をかけてしまします。

そこで、レジにお客さまが並んだら自動で通知がくるシステムを考えてみました。

![イントロ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/ac2d6f98-c237-fa8e-506b-7a542748716d.png)

## 使用したツール

[LINE Developers](https://developers.line.biz/ja/)
[Teachable Machine](https://teachablemachine.withgoogle.com/)
[Node-RED](https://nodered.org/)



## LINE Developersにてアカウントを作成する

以下の公式の説明を参考にしてください。

https://developers.line.biz/ja/docs/messaging-api/getting-started/

今回はLINEBotは使用していませんが、いろいろ応用もできますので
参考までにこちらも案内しておきます。
[**LINEのBotを作成する方法**](https://developers.line.biz/ja/docs/messaging-api/building-bot/)

## Teachable Machineを使って機械学習をする

### ①レジにお客さまが並んでいるかどうかの状況を登録します。

![TeachableMachine1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/ce6e7461-9b0e-1745-333c-02698f3f1e2e.png)


**○誰も並んでいない時**
**○1人並んでいるとき**
**○2人並んでいるとき**

とりあえずこの3パターンを作りました。

### ②トレーニングをし、モデルの学習をします

### ③モデルをエクスポートし、URLをコピーしておきます

後ほど使用しますのでメモ帳などに張り付けておくといいです

![TeachableMachine2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/edfcd78a-592d-5a0e-2522-74f5771b293e.png)


## NodeREDを使ってフローを組み立てていく

今回はFlowFuseのサービスを利用してNodeREDを使いました。
アカウントの作成などの詳細はこちらの記事を参考にしてください。

https://qiita.com/cog1t0/items/84e467739dd85e3d7cb6

### 必要なノードのインストール

:::note
**node-red-contrib-browser-utils**
自分のPCのカメラの写真データを読み込んでくれるノード
:::

:::note
**node-red-contrib-image-output**
読み込んだ画像をNode-RED上に表示してくれるノード
:::

:::note
**node-red-contrib-teachable-machine**
先ほど仕様したTeachable-Machineで作成したモデルを使用するためのノード
:::

:::note
**node-red-contrib-line-messaging-api**
Lineにメッセージを送るためのノード
:::
上記のノードを以下の手順でインストールしていきます。

**①右上の3本線のハンバーガーをクリック**
**②パレットの管理を選択**

![NoedeRED2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/4d1e192c-8e3b-a0e2-ef6a-c49ceae5f655.png)

**③「ノードを追加」を選択**
**④真ん中あたりに使いたいノードを入力すると検索されます**
**⑤使いたいノードが出てきたら「ノードを追加」でインストールが始まります。**

![NoedeRED3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/0c5f58b7-1c74-d07e-b96d-395c16bd78f3.png)


### Node-REDのフローの流れ

![NoedeRED1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/fd7f7f9e-772b-955d-7de9-2f93953c080c.png)

**①カメラ**
　Webカメラなどを使用して画像の取り込みができます。
　レジの状況を映すための定点カメラのつもりで設定しましたが
　作業上の都合により今回は使用していません。

**②file inject**
　画像ファイルを取り込むためのものです。
　上記カメラの代わりに、こちらのノードを使って作業を進めました。

**③teachable machine**
　先ほど使用したTeachable Machineが利用できるようになるノードです。
　ノードを開くとURLを入力する箇所があります。
　ここに前述のURLを張り付けることで
　先ほどの機会学習したTeachable Machineと連携されます。

![NoedeRED4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/6dbc522e-42cc-f068-c8be-56430b97f5bc.png)

**④image previw**
　入力された画像を映し出します。

**⑤function**
　受信されたメーセージなどに対して、どのような処理をして次に送るかを
　`JavaScript`コードで入力します。
　今回は以下のコードを入力しました。

<details><summary>サンプルコード</summary>
// Teachable Machineノードの出力を取得
let resultClass = msg.payload[0].class;
// LINEに送信するメッセージを作成
msg.payload = {
    type: "text",
    text: "Teachable Machineの判定結果: 現在 " + resultClass
};
return msg;

</details>

![NoedeRED5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/74d87f35-0701-2c4d-ec76-9a129033c5f2.png)


**⑥Push Message**
　LINEのPushノードです。指定したLineのユーザーIDやグループIDにメッセージを送れます。

:::note warn
このユーザーIDは、スマホのLineから確認できるプロフィールにある個人のIDではありません！
:::

　**LINE Developersにある「あなたのユーザーID」です**

![LineDeveloper1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/5fadc401-adae-db30-94a3-3e4a191fc8b6.png)


　私はここで丸一日以上費やしました･･･
　また、アクセストークンとユーザーIDを入力後に
　勝手に省略されてしまいますが
　きちんと入力できていれば問題ありません。

![NoedeRED6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763781/023be835-dbed-01ab-3adf-72bde430e5eb.png)

**⑦debag**
　結果の確認用です
　
　以上でフローの準備ができました！
　最後に画面右上にある`デプロイ`をクリックして、出来上がったフローを更新します。
　
### 実行してみます!
　今回は作業の都合上、file injectに画像を入れてみます。

https://x.com/shuji012/status/1793786641695588806

　`Teachable Machine`で画像判定した結果が、LINEに送られてきました！

　今回は出力先をLINEにしたのですが、
　これを店内放送などに繋げれば活用方法を広げられると思います。

　また、深夜のレジだけでなく
　昼間はレジが混んだ時などに通知が行くようにすれば
　レジ混みの対応もスムーズになるかもしれません。

　コンビニなどでも役にたつかも？


## 課題

今回はまだまだ検証段階で、多くの課題があります。
**①TeachableMachineだと常にレジを監視できるのではなく、画像をとったその瞬間だけの判断になります。**
　本来の期待すべき機能は、
　お客さまが並んだ時に画像判定をして通知をしたいのであって
　そのタイミングで通知をするためにはどうしたらいいか、大きな課題です
**②レジ待ちではなく、通りがかっただけの場合との区別がつきにくいです。**
　「一定時間そこに留まる」などの条件付与が必要です。
**③LINEでテキストだけでなく画像も一緒に送れればより分かりやすいのですが画像の送信まではできませんでした。**
**④機械学習でなくてもセンサーでよかったり･･･(-ω-;)**

などなど、そのままでは実装できないかもですが
何かの発想のきっかけになることを期待しています！

## 追記(5/29)
様々なご意見をいただきましたので
課題の解決に向けての考察を追記させていただきます。

:::note warn
実装に向けてのアイデアですので、私の技術ですぐにできるかどうかは別とさせてください。
:::

### 赤外線などの人感センサーの導入
深夜などでレジに人が並んだことを通知するなら赤外線などの人感センサーで充分対応できます。
一般家庭でも人が通ると証明が点灯する人感センサーは数千円で簡単に購入できますし、
コンビニとかでもお客さまが入口のドアを通過すると来店を通知するチャイムが鳴ります。
同じモノをチャイム音を変えるだけでもいいのかもしれません。
（ただレジ前を通過するだけなのと、レジ前で並んでることの判別はできません）

### 昼間のレジ混みなどにも対応できるようにするには？
①のような単純なセンサーだと「レジに複数の人が並んだら通知する」といった
レジの混雑を通知することができないのかなと思われます。
赤外線でも超音波でも、人数を判別するには画像認識による方法が有効かと考えます。

### 画像認識による人物検出
例えば「OpenCV」の「物体検出」機能を使うと
「人」が「何人」いるかを判別できそうです。

### 動画ストリーミングで処理する
定点カメラを設置し（ご指摘の通りレジ前の真上に設置すると余計なものが映らないため誤判定を減らせると思われます）
毎フレームごと画像処理します。

### 複数回連続して同じ判定が出た時に通知するようにプログラミングする
例えばフレームレートを3fps（1秒間に3回の静止画を出力）として、
12回同じ判定が出た時に通知されるように設定します。
約4秒間です。
そうすることで、レジ前を通りがかった人なのか、待っている人なのかの判別と、
誤判別による通知を排除できます。
上記のNode-REDならば、フローの⑤`function`のノードにコードを入力することで可能かなと思われます。

### 一度通知したらしばらくは通知がいかないようなプログラミングする
そのままだと4秒ごとに通知がいってしまいます。
うっとおしいことこの上ないです･･･
ですので、一度通知をしたら、しばらくは通知がいなかい仕組みをつくらないといけません。
例えば、深夜レジの場合だと
・レジにお客さまが並ぶ→通知が行く
・レジで接客中（検出1人以上）→通知保留
・接客が終わり無人になる→保留がリセットされ、判定開始
フローにもう一つ`function`を追加する必要がありそうです。

### 深夜と昼間で仕様を切り替えます
深夜レジなら「人」が「1人」で通知、
昼間なら「3人」「4人」で通知するように切り替えます。
スイッチを作ったり、アプリ内で変更でもいいですし、タイマーでいいと思います。

### 通知先について
1.店内放送（深夜は必須）
2.スマホアプリ（LINEでもOK)
3.ブザーなどを専用のものを作成
　防犯ブザーみたいな携帯用にして、通知がくると音声とバイブで通知
　確認ボタンを押すと店内放送に「確認いたしました。もう少々お待ちください」
　などの放送が流れる。
このような仕組みにすることで、深夜従業員がバックヤードやごみ捨てなどで離れていても
レジ待ちのお客さまに対応できるようになるかなと考えます。