ヒューマンエラーはデジタルツールでなくせるか（試作ツール完成版）

## 1年間に数十万回以上発生する作業　1度のミスも許されない ##
どんな厳格な職場で働いているのかと思われそうですが、食品中心の小売店に勤めています。
しかし、食品に関するお仕事されている方なら、うなずいていただけるはずです。
スーパーに行くと沢山のお惣菜が並んでいます。
店内で作っているお惣菜は、基本的に手作業でパック詰めをして、ひとつひとつ手作業でバーコードのついた商品ラベルを貼ります。**ラベル貼り作業**です。
基本的には一つの商品につき表と裏の2枚のラベルを貼りつけます。表には商品名・売価・バーコード、裏には原材料や**アレルゲン表示**が記載されています。
アレルギーをお持ちの方は原材料を確認して食品を購入しますが、万が一ラベル貼り間違えて、それを食べてアナフィラキシーを発症したら…。
**これが数十万回以上発生する作業であっても、1度のミスも許されない理由です。**
店舗では何重ものチェックを行っていますが、確認作業を行っているのは**人間**です。毎月、何百種類の商品数万個にそれぞれラベルを**手作業**で貼っています。
**300種類の物が合わせて30,000個あります。毎月ひとつひとつ手でラベルを貼ってください。時間には限りがあります。効率的に行って下さい。でも、決して間違えてはいけません。**
わたしたちが行っているのはそういう作業です。簡単なことではありません。
## Teachable MachineとLINE Botを使ってクロスチェック ##
前置きが長くなりましたが、わたしが今回作成したかったのは**人の目**での確認に加えてチェックをしてくれる**機械の目**です。
具体的には　**LINE Botで商品の画像を投稿する ⇒ Teachable Macchineが画像認識を行う ⇒ LINEBotに商品名が返ってくる**　というツールにより人間の目と機械の目によるクロスチェックの仕組みを作り上げたかったのです。LINEを使用することでトークという形で間違いなく確認作業をしている証拠も残ります。
***
### 実際できあがった完成品はこちら ###
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;![20230723_143238.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/57c1c609-57b2-3c85-0356-1c7c36fcac7c.gif)


### Node-REDのフロー ###
(FlowForgeを利用してNode-REDのフローを作成しています)
![スクリーンショット 2023-07-25 224001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/5a453888-ae74-50b3-52f7-069b58f2dbce.png)
LINE Botで画像を投稿 ⇒ Teachable Machineで判別 ⇒ LINE Botで返信という流れのフローです。
デバッグをそれぞれの工程に繋げておくと、エラー箇所がわかりやすくなるのでおすすめです。

![スクリーンショット 2023-07-25 224033.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/de60f48e-6d56-cfa9-0722-f22790279c7d.png)
まず、最初のフロー**http in**に上画像のように、POST と /linebot をそれぞれ入力します。
![スクリーンショット 2023-07-25 224137.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/3f58bb41-7c06-a8e7-9286-cbfefaad385c.png)
次にひとつめの**function**ノードに下のコードを貼り付けます。
```
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;

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

return msg;
```
![スクリーンショット 2023-07-25 224231.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/98bbb27c-304d-b79b-50f4-0d3f732aa821.png)
3つ目のノード**http request**は上の図のように入力します。URLには下記コードを貼付してください。
`https://api-data.line.me/v2/bot/message/{{{messageID}}}/content`
種別はBearer認証を選び、トークンにはLINE Botのチャンネルアクセストークンを入力します。
出力形式をバイナリバッファにするのを忘れずに。
![スクリーンショット 2023-07-25 224620.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/ee3dded6-70c4-fdcc-75a8-a9324784a194.png)
次にteachable machinノードです。
URLには自分が作成した画像認識モデルのURLを貼り付けてください。Teachable Machineについては最後に参考記事を紹介しています。
Imageにチェックを入れ忘れないようにしましょう。
![スクリーンショット 2023-07-25 224713.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/e7c5a8c2-a8d7-4d87-7f73-0194fee91e0b.png)
ふたつめの**function**ノードには下のコードを貼り付けます。
```
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `これは「${className}」!指差し確認して`
        }
    }
];
return msg;
```
![スクリーンショット 2023-07-25 224808.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/aafe0fcc-10b3-7b3f-8b75-9823501a0f52.png)
お疲れ様です。最後のノードです。
LINEのReplyノードのSecretにはLINE Botのチャンネルシークレット、Access Tokanには同じくLINE Botのチャンネルアクセストークンを入力します。
Node-REDの設定は以上です。

完成したフローのURLの`https://○○○○.flowforge.cloud/●●●●●●`のcloud/以降の部分を削除しlinebotを付け加え、`https://○○○○.flowforge.cloud/linebot`という形にします。このURLをLINE Botのwebhookとして設定し、Teachable MachineとLINE Botの連携ができました。
***
## ツールを試用して見えた課題 ##
上の動画では編集していますが、実際にはレスポンスに40秒近くかかっているので、現場で使用するには工夫が必要です。
**商品の写真を撮る ⇒ 商品にラベル貼る ⇒ 返ってきた文を確認する**という工程にするならば、多少LINEの返事が遅くても使えそうですが、実際に試してもらった現場の人間からは、ひとつの商品で2回もスマートフォンを操作するのは面倒だし混乱すると不評でした。ただし、ミスを減らすという点では有効との評価もありました。
**商品の写真を撮る ⇒ 返ってきた文を確認する ⇒ 商品にラベル貼る**という流れが作業しやすいため、今後の改良点としてレスポンスを早めることに取り組みます。


<details>
<summary>Node-REDとMakeを連携せる方法にチャレンジして完成しなかったくだり(7/20投稿)</summary>
意気込みは高かったのですが、残念ながら~~LINE Botで商品の画像を投稿する ⇒~~**Teachable Macchineが画像認識を行う ⇒ LINE Botに商品名が返ってくる**という中途半端な出来上がりの結果となりました。
まず作成したNode-REDのフローがこちらです。
![スクリーンショット 2023-07-17 203646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/e8e278f0-6449-e813-4bf0-fe95107bfcae.png)
赤枠の部分が、今回実現できなかった**LINE Botで商品の画像を投稿する**部分の試行錯誤の跡になります。現場で使用する際にはパソコンいちいち持ち込むわけにも行かず、スマートフォン（そして多数の人が使い慣れているLINE）を用いるのが絶対条件のため、本当に残念でした。

次にMakeで上記のNode-REDを受けてLINEに返すシナリオを作成しました。
![スクリーンショット 2023-07-20 212056.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/8276a0c7-e9e6-1a09-a575-36a91ccbb7ad.png)
Node-REDとMakeを連携させたのは知ったばかりの方法を使いたかったからですなのですが、初心者は参考記事も豊富にあるNode-REDだけで完結させるやり方を選べば良かったかもしれないと、後悔していたりもします。
***
実際に現場の人間に使ってみてもらいましたが、**確認作業としてはいいけれども、わざわざパソコンの前に商品を持ってきて画像判断を待つのは現実的ではない**と、至極もっともな回答でした。
**スマートフォンで作業場内で完結するなら有効かもしれない**という励ましももらえましたので、近日中に最初の構想通りのツールを完成させる予定です。(7/25　試作ツール完成)
</details>



今回のツールの作成にあたってはたくさんの方の記事を参考にさせていただきました。
感謝いたします。

https://qiita.com/jiko111/items/5fcd75924f59d900e128

https://qiita.com/katourina0120/items/f457a1f30918894872dc

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

https://qiita.com/kuma_ssss/items/098715c74c087a19aa65

https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1

https://qiita.com/sunny3104gogo/items/9ac38987976964f3f985

https://qiita.com/navy-blue919/items/6f3719f7a4004163e55d

![最後にねこをそっとそえて (600 × 800 px) (400 × 533 px).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3462049/7c3402e8-756d-a525-247a-9249407cc149.png)