飲食店　トングの残量を検知してくれるシステムまであと一歩のLINEBotを作ってみた

はじめまして！
飲食業で働いている会社員です。普段は店舗を回ったりしています。

飲食業といっても色々ありますが、商品をひとつひとつ製造し、陳列販売する形式で、商品はお客様がトングとトレイで取って頂くスタイルの事業です。パン屋さんをイメージして頂くとわかりやすいかもしれません。

パン屋さんをイメージに出しましたが、少しパン屋さんの店内をイメージして頂けるとありがたいです。
入り口にある商品を取るためのトング＆トレイ置き場があります。ここから店員さんのいるレジまで６ｍほど離れています。この距離感でトング＆トレイを切らさないように洗浄する必要があります。切らしてしまうとお客さまに負の感情を与えてしまいますし、店員さんも負の感情を持ってしまうことになります。この業務の負荷を改善したくチャレンジしました。

WEBカメラで定点観測を行い、少なくなってきたら通知される仕組みを作りたい！のですが、まず今回は、写真判定からトングの残量をお知らせしてくれるLINEBotを製作しました。

# 　完成品！試作一号「トングの仕業」

https://twitter.com/j30229/status/1647214793823236096?s=20

「トングの仕業」という名前はいつの間にかやってくれるという意味を込めました。
# 　完成するまで
## 使用ツール
・[Teachable Machine](https://teachablemachine.withgoogle.com/ "Teachable Machine")
・[LINE Developers](https://developers.line.biz/ja/ "LINE Developers")(とLINE Official Account Manager)
・[Node-RED](https://nodered.org/ "Node-RED")
## 製作開始
### 1-1 Teachable machineで画像を読み込む
[Teachable Machine](https://teachablemachine.withgoogle.com/ "Teachable Machine")に入り、「Image Project」をクリックします。今回のケースでは、トングの残量を４つに分類しウェブカメラからそれぞれ画像を200前後読み込ませました。これをトレーニングをすることで画像の判定ができるようになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/7c031901-7bdf-c5e5-e9e8-4f28117fb57a.png"width="75%">

トング50％以上の画像

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/5176d8e3-ba8a-3d77-fbc2-0308df327586.png"width="75%">
トング20％以下の画像
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/01274f3f-593e-dafe-d66b-db35103855fc.png"width="75%">
画像の右下を見るとしっかり判定できています。判定できることが確認できたのでモデルをエクスポートしてリンクをコピーできるようにしておきます。これでTeachable　machineの設定は完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/1f4cde89-cc03-0392-c053-d0c08bc792d0.png"width="75%">

### 1-2 Node-REDでフローの作成

[Node-RED](https://nodered.org/ "Node-RED")でフローを作成していきます。フローの全体図がこちら
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/09962113-50a8-10c2-7c52-03add266399d.png"width="75%">
左上から
①ネットワークカテゴリ```http in```もしくはLINEカテゴリ```webhook```
②機能カテゴリ```function```
③ネットワークカテゴリ```http request```
④分析カテゴリ```teachable machine```　
⑤機能カテゴリ```function```
⑥LINEカテゴリ```ReplayMessage```　
ノードを追加の際は「パレットの管理」よりノードの追加から```line-messaging-api```を検索し追加してください。

それぞれの設定を確認してきます。
①```http in```
メソッドを```HOST```URLを```/webhook```と入力。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/4c51019d-b072-348f-aae4-ff0f4e8fa396.png"width="75%">
②```function```
コードは下記のコードを貼る。
```javascript
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;

msg.messageID = messageID;
msg.replyToken = replyToken;

return msg;
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/27556c65-3ac5-6557-7e35-3360e0a6e89e.png"width="75%">


③```http request```
URL　```https://api-data.line.me/v2/bot/message/{{{messageID}}}/content```
認証を使用　```チェック入れる```
種別　```Bearer認証```
トークン　```LINEのチャネルアクセストークンを貼る```
出力形式　```バイナリバッファ```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/de85b8a0-7936-1537-f4c1-a332d400443b.png"width="75%">

④```teachable machine```
URL```１－１で作成したTeachable Machineのモデルのリンクを貼る。```
IMAGEはチェックを入れる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/f37071ab-924b-39da-9ab6-6199e5bda464.png"width="75%">

⑤```function```
コードは下記のコードを貼る。

```javascript
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `残量は、「${className}」です`
        }
    }
];
return msg;
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/3a51a023-83a8-f83a-3655-353fe34d31ac.png"width="75%">
⑥```ReplayMessage```
Secret```LINEのチャネルシークレットを貼る```
Access Token```LINEのチャネルアクセストークンを貼る```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/9a120f04-53bd-f32c-2b2e-5262a1c538c4.png"width="75%">
これでNode-RED側の準備は整いました。最後にデプロイを忘れないようにしましょう。
### 1-3 LINE Developersと連携する
LINEBot側の設定をします。LINE Developersからmessaging API設定に入りWebhookを設定します。

Webhook URLは使用したNode-REDを表示しているページのURLのうち、.com/までをコピーし末尾にwebhookを付けます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293453/07829078-2c2b-4f00-8dde-6042ee80569a.png"width="75%">

https://qiita.com/cog1t0/items/e44e2a3ca872b2a8be0f

こちらの記事を参考にさせて頂きました。ありがとうございます。

これで全ての設定が完了しました！

# 最後に
冒頭でもお伝えした通り、「WEBカメラで定点観測を行い、少なくなってきたら通知される仕組みを作りたい！」を目標とした第一歩となります。中々動作せずenebularを使用してみたり試行錯誤の日々でした。ご協力頂きました皆様ありがとございました。最終目標目指して地道に頑張っていきたいと思っています。
以上、最後まで読んで頂きありがとうございました。