画像で判定！Teachable Machineで定位置管理アプリを作成！


おはこんばんちは、ずんです。
とある小売スーパーの、とある店舗のお惣菜部門で働いています。

# とても大事な「５Ｓ」

お惣菜売場の作業場ってどういうところか、皆様イメージできますでしょうか。
基本的にはご家庭の台所のバージョンアップ版、とでもいいましょうか。
大型のフライヤー、オーブン、鉄板などなど…。
そして使用する調理器具や備品も、たくさんの種類、たくさんの量を管理しています。
そこで大事になるのが**５Ｓ**という言葉です。

５Ｓとは**整理、整頓、清掃、清潔、しつけ**の5つを指す言葉ですが、製造作業に限らず、職場環境を整えるためによく使われていますね。
私たちの職場でもこの５Ｓのルールを守ることで安心、安全で、作業がしやすい環境を維持しています。

今回はこの５Ｓに、デジタルツールを活用してみようと思います！

### Teachable Machineではさみの定位置管理をしよう！

お惣菜の作業場にはさまざまな備品がありますが、今回は…

![はさみの定位置・定数管理.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/066167eb-3c5c-4c94-a7d0-4de8424c9f31.jpeg)

こちらのはさみの定位置管理に挑戦しようと思います！
（※業務に関連する内容が映り込んでいる部分を黒塗りしています。）

6本すべて揃っていれば**OK**、1本でも揃っていないと**NG**という条件で、機械学習ツールの**Teachable Machine**に画像で判定をしてもらいます。

ちなみに、はさみが1本でも揃っていないとうちの職場ではこうなります…。
（興味があれば、お読みください）
<details><summary>「はさみ騒動」</summary>

ある日の作業場でのことです。
一日の製造がすべて終わり、片付けや翌日の準備も完了したのでみんなで帰ろうとしていた時、1人が慌てた様子で言いました。

**「はさみが1本ない！」**

これはうちの職場では重大な事件です。はさみ、つまり**刃物**です。
どこかに置きっぱなしにされている？それとも違う場所に片付けてしまった？
**もし歯が開いた状態になっていたり、気付かず誰かの手や体に触れてしまったら…？！**
大急ぎで、作業台と床の隙間、ゴミ箱の中、冷蔵庫や冷凍庫の中など様々な場所を確認しました。しかし、どれだけ探しても一向に見つからない…どんどん血の気が引いていきます。

**（これは本当にやばいかもしれない…上長にも報告しなきゃ…）**

はさみの捜索をいったん中止して、事務所にいた副店長に急いで報告しに行きました。

「〇〇副店長、大変申し訳ありません…うちの作業場のはさみが1本見つからなくて…」
**「あっ、俺が持ってったわ」**

膝から崩れ落ちました。

いやすみません、実際には崩れ落ちてません。心象表現です。
話を聞くと、お肉部門の主任が「作業場のはさみが古いので新しいものが欲しい」と副店長にお願いしたところ、「あ、総菜の作業場が余裕あったから貰ってくるわ」と**私たちが作業場にいない時間帯に持って行った**、というオチでした。ちゃんと報告して…！！！

私が大変慌てて報告をしたことと、定位置・定数管理の説明をしたことで事の重大さを理解していただけたようで、副店長は平謝り、はさみは無事返却、お肉部門の作業場にはあたらしいはさみが支給され、この騒動は終結しました。
**（が、この騒動によって私含むお総菜部門3人が無駄に30分残業しました…。）**
</details>


# 使用したツール
+ [Teachable Machine](https://teachablemachine.withgoogle.com/)
+ [CodePen](https://codepen.io)
+ [Google SpreadSheet](https://workspace.google.com/intl/ja_jp/products/sheets/)
+ [GAS](https://workspace.google.co.jp/intl/ja/products/apps-script/)
+ ChatGPT（コードの作成、偉大なる相談役）

# 完成したのがこちら

https://x.com/zunnzunn0210/status/1929269644927365555

# 製作過程

### Teachable Machineに画像を学習させる

まずはTeachable Machineで「はさみOK！」と「はさみNG！」のクラスを作成、それぞれにサンプルの画像を100枚前後アップロードしました。

![TeachableMachine1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/6b7fdf30-94be-43fb-b602-a9fae52af3c0.png)

モデルをトレーニングさせ、プレビューでいくつかの画像をアップロードしてテストしてみた結果がこちら。

![TeachableMachine2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/cff4d004-e5f8-4107-87c1-ec0d7cfaf94a.png)

ばっちり学習してくれていますね。

### Teachable MachineとCodePenを連携

Teachable Machineの機能をアプリとして使用するために、CodePenと連携させます。

先ほど作成したモデルをエクスポートし、作成されたURL（共有可能なリンク）をCodePenのコードに反映させます。

![TeachableMachine3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/983afa1b-c97f-419a-a899-95b7ae004d10.png)

![CodePen1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/f3169b8a-e9dd-46dd-8b10-96c8c1a768a4.png)


「ファイルを選択」のボタンから画像をアップロードすると…

![CodePen2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/c4dfb37e-108d-4364-a0ff-27e2f369c3db.png)


アップロードした画像のプレビューと、判定結果がこのような感じで表示されました！
これで、はさみの定位置管理がきちんとできているか、画像から判定できます！

# 判定結果を記録、管理者へ通知

定位置管理の判定アプリとしてはここまでで完成ですが、**判定結果の自動記録**と、**判定結果がNGだった場合に管理者へ通知する機能**も追加で作成してみました。

判定結果を記録するために、まずはGoogleスプレッドシートを作成し、A列から順に「日付」「判定結果」「通知日時（NG判定だった場合）」などの必要な項目を入力していきます。
このスプレッドシートに**CodePenに表示された判定結果を自動で記録**、そして「判定結果」が「はさみNG！」だったときに**管理者へ警告のメールが自動で送信される**ようにしていきます。

CodePen、GASに必要なコードをChatGPTに作成してもらい、それぞれ入力と設定を進めていきます。

![GAS1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/d941f492-8ccf-4b43-9988-d07fbe58d918.png)

![GAS2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/353d8ec8-a3ed-4a3c-b59e-7762acf942a0.png)


このような内容でデプロイし、発行されたwebアプリのURLをCodePen側のコードにも反映させて保存。
もう一度はさみの画像をアップロードして、一連の動きがうまく動くかテストをしてみましょう…。

https://x.com/zunnzunn0210/status/1929273870986498515

上手く動きました！追加要素も無事完成です！
ちなみに、通知のメール内容はこのような感じです。

![警告通知.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/58bf76a5-99a7-4e1f-9013-68f06f71215a.png)


# これって目視でいいのでは？
備品を定位置管理する仕組み作りが無事完成しました。
ですが正直なところ、「これくらいなら**すべて目視チェックでいいのでは？**」というのが本音です。

しかし、これが監視カメラが複数台あり、備品などの管理チェック項目が非常に多い工場や大型の作業場のような環境の場合、大変有効な仕組みなのではないかと思います。
また、チェック内容をデジタルツールで自動管理できれば紙ベースのチェック表や人の手で管理する仕事を減らすことができますし、異常がある場合に警告してくれるシステムは事故防止にもつながります。

うちの店舗の作業場は残念ながら工場などと比べれば規模は小さく、作業場に常時録画されている監視カメラもついていませんが、今回のプロダクトから**デジタルツールの活用でこういう仕組みづくりができる**、という学びが得られただけでも大収穫！としましょう！

最後までお読みいただき、ありがとうございました！