「IoTLT Advent Calendar 2024」ついにスタート！！

![HUMAN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/f06ab347-de55-937d-154e-b17ba554db1a.png)

**こちらは、「IoTLTのアドベントカレンダー2024」1日目の記事です！！
やったるぜ！！トップバッター！！**

https://qiita.com/advent-calendar/2024/iotlt


こんにちは～！！はっちゃんです！！:flushed:
某スーパーマーケットの本社で働いています。
店舗の困りごとを解決するため、全国各地を飛びまわっています。
　
今回は、**Techable Machine**を使って、**画像認識のモデル**を作成し、
「**買物カゴ回収のベストタイミングを店員に教えてくれる機能**」の実装を目指しました！
　
さらに・・・
**micro:bit**も組み合わせ、LED点灯によってアラート表示させることで、
「**一目瞭然でベストタイミングがわかるようにする**」ことにもチャレンジしました！
お初ですー！電子工作！！:joystick::tools:
　
(私の詳しい仕事内容については、こちらの記事で紹介しています:point_down_tone2::point_down_tone2:)

https://note.com/yuuki_1009/n/n5e5e034ea013

### :timer: 買物カゴ回収の作業は重労働！！予測不能！！

みなさんがスーパーマーケットでお買物をする時、
買物カゴや買物カートを回収する店員を見たことはないですか！？:eyes:
周囲に迷惑をかけないよう、目の前のお客さまを華麗に避けながら、
足腰をフルに使って作業されていますよね。
私も作業したことがあるのですが、体力も使って**かなりの重労働**なんです・・・:disappointed_relieved:
　
この回収作業は、
基本的に定時で作業の指示(例：30分置きに回収)がされているのですが、
**その日その時間によって買物カゴの溜まる量が異なる**ので、
さほど買物カゴが溜まっておらず、ムダ足になってしまうということもあるんです:scream:
その逆で、お客さんが山のように買物カゴを積み上げてしまい、
背を伸ばしながらその買物カゴを積み替えることも。事故の危険もありますよね・・・

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/f5a6c41e-d549-cb79-87a4-e0d7894cbf10.png)

とにかく、状況の**予測が不可能**なので、
具体的な指示も意味をなさず、その場の店員の判断で作業している店舗もあります。
「**買物カゴの回収作業は旧態依然のまま、ムダの巣窟になっているんです**」
　
そこで、
**■買物カゴの溜まった量を、
　「多い・少ない・無し」の３つのステータスに区分して可視化すること**
**■買物カゴが“多い”時に、視覚的なアラートで店員に知らせること**
を要件として、ムダの少ない作業の実現を目指しました！！:muscle_tone3:

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/7a2ba364-92ab-56ba-735b-4870c85734f9.png)



 
# :gear: 実現したいこと
**1. 　Techable Machineを使って、
　　買物カゴの量が「多い・少ない・無し」を“画像認識”で機械学習させる。**
　
**2.　 Scratch(プログラミングソフト)を使って、
　　機械学習させたデータとmicro:bitを連携させる。**
　　
**3. 　買物カゴの量に応じ、micro:bitが連動してLEDが点灯する。**
<font color="Red">　　⇒メールやチャットでは、その通知に店員が気づくのに遅れてしまうため、
   　　　視覚的に即座に状況把握が可能な、LED点灯を実装機能として選択しました！

    
:::
<details>
  <summary>:hammer_pick: 使用したツール</summary>
・Techable Machine

・micro:bit

・Microbit More (micro:bitの機能をすべて利用できるようにする)

・Scrach3.0

・Scratch Link (Scrach3.0と連携して、外部デバイスを操作する)

</details>

:::
:::note info
**micro:bitとは？**
子供のプログラミング学習向けに開発されたマイコン搭載の基盤です。

LED、押しボタン、加速度センサー、磁気センサー、Bluethoothによる
無線通信機能などを備えています。

プログラミングによってLEDに文字を点灯させたり、
加速度センサーを使って傾きを利用してゲームのコントローラとして活用したり、
アイディア次第でいろいろな使い方に応用することができます。
:point_right_tone2: [micro:bitについて、もっと詳しく知りたい方はこちら](https://papu-navi.com/microbit/)

![Plan (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/c2314e40-5e37-48a9-219b-707e77bdc9d1.png)

:::
　 
:dividers:【実装のシナリオ】
![Plan (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/ee376ef7-f645-2415-4d58-87bc6f797b4b.png)
　
:triangular_flag_on_post:【実装後のあるべき姿】
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/e582a901-907c-404f-b6eb-14c762cfa5d9.png)



# :pushpin: 完成形がこちら！
画像認識の正確性と、LED点灯切り替えの早さが想像以上でビックリ！！
対象が買物カゴではない時も、しっかり判別してくれています。

https://x.com/yuukihatsugai/status/1837622766109184299


# :wrench: 実装手順
## 事前準備
### :large_blue_diamond: micro:bitの購入
まずは、maicro:bitを購入しましょう！
maicro:bitはAmazonなどのネットで購入可能です。
3,000円弱の値段(セット商品)はしますが、手軽に電子工作できることを考えれば安い！:clap_tone2:
基盤単体でも販売されていますが、
初めての方は、USBケーブルや電池ボックスが付属しているセットの購入がオススメです！

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/c9fbcd9a-da56-a2e1-160d-a5779334d07c.png)

### :large_blue_diamond: Microbit Moreを使うための準備
「Microbit More」とは、
**Scrachでマイクロビットを使えるようにする拡張機能**のことです。

Scrachに最初から入っている拡張機能は限られていますが、
Microbit Moreではmicro:bitに備わっているすべての機能が使えるようになります。
今回は、Teachable Machineの画像認識モデルと連携させていきますので、
必須の作業になります！:ok_woman_tone1:
:point_right_tone2: [-スクラッチ（Scratch）とは？小学校のプログラミング学習でも有名！-](https://www.star-programming-school.com/article/programming-scratch/)
　
:one: **Scrach Linkのインストールする**
Microbit Moreとmicro:bitを接続するには、
パソコンに「Scratch Link」というアプリを入れる必要があります。
:point_right_tone2: [インストール手順はこちら　
-Scratch Linkのダウンロードとインストール方法-](https://living-maou.com/scratch-scratchlink/)
　
:two: **micro:bitにプログラムを転送する**
micro:bitにMicrobit Moreと接続するためのプログラムを転送します。
:point_right_tone2: [プログラム転送方法はこちら　
-【マイクロビット】パソコンとのつなぎ方・外し方、プログラムの転送方法-](https://living-maou.com/microbit-usb-connection/)
　
:three: **キャリブレーション(較正)する**
キャリブレーション(較正【こうせい】)とは、
磁気センサーが正しく動くように調整することです。

micro:bitのLED画面に「TILT TO FILL SCREEN」と表示されるので、
基盤本体をグルグルかたむけて、LEDをすべて点灯させます。
スマイルマークが表示されたら、キャリブレーションは終了です！:slight_smile:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/5c6dcce6-64ed-7268-f341-4aad3773b8ff.png)

### :large_blue_diamond: micro:bitとMicrobit Moreをつなぐ
まず、以下の作業を忘れずに実施します。
・Scratch Linkを起動する(ツールバーにアイコンが表示されます)
・Bluetoothがオンになっているか確認する
　※micro:bitとパソコンはBluetooth（無線通信）でつながります
 
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/08931c4b-6c2d-61f1-ebce-3333d1f6bb36.png)
　
:one: **Microbit Moreのエディターを開く**
[Microbit Moreのサイト](https://microbit-more.github.io/index-ja.html)にアクセスし、
「エディターを開く」をクリックし、Microbit Moreエディターを開きます。

![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/e3bf0adc-5587-697b-4f06-f1a78bbae60a.png)
　
:two: **Scrachからmicro:bitをペアリングする**
Scrachの編集画面が開くので、以下の手順で操作をします。
①「拡張機能を追加」をクリックする
②「Microbit More」の拡張機能をクリックする
③使用するmicro:bitを選択し、ペアリングする

![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/36df2177-1b27-18b1-1948-9b6fa84658ee.png)
　
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/358f9d33-1d8d-62a8-7b64-325277d8314d.png)
　
![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/432862fb-7242-d945-3ed2-c3baae8602b5.png)

 


## Teachable Machineで画像認識させる(モデルの作成)
### :large_blue_diamond: 画像のアップロード、モデルのトレーニング
画像認識をさせるまでの手順は以下を参考にしてください。
:point_right_tone2: [画像認識の手順はこちら　
-Googleの無料サービスTeachable Machineで画像認識モデルを作成してみたｰ](https://living-maou.com/microbit-usb-connection/)

### :large_blue_diamond: 画像認識させる際のポイント①
１つの対象に対して、「前面、横面、斜め」の写真(各125枚のサンプル)を用意しました。
画像認識の精度が向上します！
※各サンプルの画像はすべて同じ写真です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/7d9bd027-7b6f-f9be-d24c-8a4081c914ad.png)

### :large_blue_diamond: 画像認識させる際のポイント②
仮に、買物カゴがカメラに写っていない時はどうなるのか！？
関係のないものをカメラに移してみると・・・買物カゴとして認識してしまいますね:sweat:

その時は、買物カゴが写っていないサンプル画像を数種類用意し、
それを「買物カゴではないもの」として画像認識をさせます！(今回はサンプルを4種類用意)
すると、買物カゴ以外がカメラに映った時、「買物カゴじゃないよ～」と教えてくれます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/0c7c5ded-842d-4a25-54ab-d283c5555c3a.png)


## Scrachでプログラムを作成する
### :large_blue_diamond: ブロックを組み込み、LEDを点灯させる
:one: **Techable Machineの画像認識モデルを連携する**
Techable Machineで作成した画像認識モデルを使えるよう、
拡張機能の「TM2Scrach」を追加します。

![画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/769c5d78-0890-87fc-1730-c25f679d51d7.png)
　
図のようにブロックをつなげ、
モデルURL部分に、画像認識モデルをアップロードした際に表示される、
「共有可能なリンクのURL」を貼り付けします。

:::note info
**ブロックとは？**
Scratchでプログラムを作るのに欠かせないのがブロックです。
ブロックはスプライトや背景の機能、動きなどをコントロールできます。
またキーボードからの入力などを受け取ることが出来ます。

プログラムの作り方はその名の通りブロックをつなげていけば出来るので、
キーボードの入力がほとんどなく、
プログラム初心者にもハードルが低く理解しやすいものとなっています。

直感的でわかりやすく、簡単にプログラミングができます！！:computer:
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/f08facce-0fec-5ed3-0b84-7082692aa59e.png)
　
:two: **ブロックを組み合わせ、買物カゴの量によってLED点灯表示を変化させる**
買物カゴの量が多い場合のプログラムを作成していきましょう！

「画像ラベル(のどれか)を受け取ったとき」のブロックを挿入します。
「のどれか」をクリックして、「買物カゴ　多」を選択します。

![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/b5ea4904-18d7-151b-e3f6-427218404233.png)
　
次に、「パターン(♡)を表示する」のブロックを挿入します。
LED点灯表示の初期設定は、ハートマークになっていますが、
自由にアレンジをして、点灯表示箇所を変更することができます！:grin:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/2aa40271-ef3f-55c9-1f65-c30b2c4fcc41.png)
　
最後に、同じ手順で
「買物カゴ　少」「買物カゴ　無」「買物カゴじゃないよ～」各ステータスの
プログラムを作成して、完了です！！:blush:

実際にプログラムを動かしてみると・・・
買物カゴの量を認識して、LED点灯表示も変化してします！バッチリです！！:v_tone2:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/6bedaca5-c5fc-1a67-7c38-ed518339d4d6.png)

![238338a507fb136679430c30ca9e602a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/f3d1a87f-8484-6d8d-db2e-3a82fdfdf39c.gif)

# :pencil2: あとがき　～夢中になれるモノづくり～
### :raising_hand_tone1: 現場の声！実際どうですかねー？
実際に、店舗で買物カゴ回収の作業をやっているHさんに動画を見てもらいました！
Hさんは、私がよく巡回する店舗で働いているパート従業員の方で、
周囲のメンバーからの信頼も厚く、何でも相談できる方です。

![Hさん.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/ea9368b5-b2f9-2b76-deeb-d9a8476dc89c.png)

フィードバックを受けて、
①人の目で判断したり、チェックしたりしている作業は他にもあるので、
**さまざまな場面で応用ができそう**だなと思いました。
 
②今回は、積み上げた買物カゴ1台に対しての画像認識であり、
実際は複数台が売場各所に置かれています。
画像認識させる領域やカメラ設置の位置や台数までは考慮していなかったので、
よい気づきとなりました。
そうすると、アラート祭りになってしまうので、
**micro:bitを連携させる範囲やアラートの制御**についても課題になりそうです。
　
③視点が部分最適に留まってしまっているので、
**定量的なデータも機械学習させて、全体最適で回収のルート案内**ができるようになれば、
より作業効率が良くなりそうです。
最終的には店舗内の他のデバイスと連携し、
包括的な店舗管理システムに進化させることも可能だと考えています。

### :bulb: 想像力が広げる無限の可能性
プログラミングを通じて、
思い通りに現実の物体を動かす楽しさは、今までにない経験でした！！:thumbsup_tone2:
　
 また、小さなアイデアでも、
「**現実の課題に対し、変化をもたらす可能性がある**」と改めて実感しました。
技術の進化は目覚ましいですが、
大切なのは、それをどのように活かすかという「**想像力**」だと私は考えています。
**少し目線を変えてみたり、新しい組み合わせを試してみたりする**ことで、
解決できる課題は無限に広がっていきます。
　
今後も、一つひとつのアイデアを大切にしながら、
新しい可能性を見つけていきたいと思います！
電子工作おもしろいぞー！！micro:bitは初心者にオススメ！！:kissing_closed_eyes:

## **カレンダー、明日は@youtoyさんです！おたのしみに～**:santa:

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/0adee3f5-c534-683a-42fe-3ed0ea9014ae.png)
　
【参考記事】

https://ameblo.jp/gameprograming/entry-12672689816.html

https://learn.switch-education.com/scratch-tm-microbit/