8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Teachable MachineとStretch3でつくるAI手洗いチェッカー ~福祉イベントで実演します~

Last updated at Posted at 2025-09-20

はじめに:手洗いの意識、どこへ?

コロナ禍で身につけた手洗いの習慣は、日常の中で薄れていませんか?
本記事では、身近なIT技術を使って、手洗いの大切さを再認識する 「AI手洗いチェッカー」 の制作過程をご紹介します。

image.png

image.png

私たちの手のひらには毒性の有無を問わずおよそ1,000,000個のウイルスが存在しています。
その手を流水で15秒洗うだけで1%の10,000個に減りますが、石鹸をつけて丁寧に洗うと、ウイルスは数個にまで減ることが報告されています。

制作の背景:AIによるコード生成と挫折

当初、AIにコードを生成させ、機能的で近未来的なUI(逃した魚は大きい理論)を持つ手洗いチェッカーを作ろうとしました。
しかし、そこで予期せぬ壁にぶつかります。
なんか、毎回壁にぶつかっている気がします。

AIが生成したコードでは、Teachable Machineのモデルが読み込めず、カメラ映像も映りません。
Geminiは何度も何度も同じような修正を行ったり来たり。
最後には、あなたが提案したコードが間違っているからです、みたいなことを言い出すし。
もういい、ChatGPTに聞くから!
ChatGPTにGeminiが作ったコードのデバッグをお願いしたけど、解決より先にトークンが尽きて終わり。
先人が残した数々のコードを参考にしたり、ブラウザのF12開発者ツールを初めて使うなど、悪戦苦闘を3日間続けました。
結局、このコードを動かすことはできず、一度は挫折しました。

image.png

制作ツール:挫折が生んだStretch3との出会い

コード生成は諦め、次に選んだのが子ども向けツール 【Stretch3】 でした。

Stretch3は、ブロックを組み合わせるだけで直感的にプログラムを組める、ノーコードツールです。
Scratch(スクラッチ)が子供向けのプログラミング教育のツールとして使われています。
Stretch3(ストレッチ3)はScratch(スクラッチ)に拡張機能を強化した改良版になります(ややこしや)。
なんと、ChatGPTとの接続もできてしまいます!
挫折の末にたどり着いたツールでしたが、そのシンプルさのおかげで、楽しくプログラミングの骨格を学べました。

AI手洗いチェッカーの仕組み

完成した手洗いチェッカーは、正しい手洗いを音声でガイドし、そのポーズをAIで判定するというものです。

AIモデルの準備

手洗い6ステップ(手のひら、手の甲、指先、指の間、親指、手首)の正しいポーズをカメラで撮影し、Teachable MachineでAIモデルを学習させます。
5名に協力いただいて、様々な手の形を撮影させていただきました。
まだまだ認識が甘いので、ぎりぎりまでサンプルを増やしていこうと思います。

プログラミング

Stretch3で「手のひらを洗う」という音声ブロックと、そのポーズを認識する判定ブロックを組み合わせます。

動作フローの完成

このブロックを6ステップ分つなげることで、手洗いチェッカーのフローが完成。
正しいポーズが取れていると、AIが次のステップへと案内してくれます。

image.png

制作を終えて:機械学習技術の可能性

実際の手洗いでは時計や指輪は外します。

今回の開発は、手洗いという日常的な行為をテーマにした「お遊び」かもしれませんが、この経験を通じて機械学習技術の可能性を実感しました。

この画像認識技術は、工場の品質管理や医療現場でのリハビリ支援、スポーツのフォームチェックなど、様々な分野に応用できるはずです。

今回の開発は、最高のUIを追い求める中で一度は挫折しました。
しかし、シンプルなツールで目的を達成できたことで、IT技術の本当の価値は、複雑さではなく、身近な課題を解決する力にあるのだと改めて気づかされました。

今回の作ったツールは、下記のイベントで使ってみる予定です(精度を上げられれば)。
メインは蛍光塗料と紫外線を使った洗い残しをチェックする器具です。

ご近所の方がいらっしゃいましたらお立ち寄りください。

image.png

image.png

※実施後の記事はこちら。

追記 PADとの連携についてAIに聞いてみた。

Power Automate Desktop(PAD)でTeachable Machineの判定結果を利用する具体的な方法についてですね。
PADでTeachable Machineの判定結果を取得するには、ウェブブラウザを介して結果を抽出します。これは、Teachable Machineのモデルをウェブページとして公開し、そのページからテキスト情報を取得するという手順になります。

ステップ1:Teachable Machineモデルの準備と公開 🖥️
まず、Teachable Machineで作成したモデルを公開可能な状態にします。
Teachable Machineでモデルを学習させる:
画像、音声、またはポーズを分類するモデルを作成・学習させます。
モデルをエクスポートする:
「モデルをエクスポート」を選択し、「ウェブカメラモデル」タブで**「アップロード」**をクリックして、モデルをクラウドに公開します。
これにより、モデルの判定機能を持つウェブページが生成され、そのURLが提供されます。

ステップ2:PADでのウェブブラウザ操作 🤖
次に、PADで公開されたウェブページにアクセスし、判定結果を取得するフローを構築します。
ブラウザの起動:
「ブラウザー自動化」アクションの 「新しいMicrosoft Edgeを起動する」(または他のブラウザ)を使用して、ステップ1で取得したモデルのURLを開きます。
ウェブページ要素の取得:
モデルのウェブページには、判定結果(例:Class_1、Class_2)が表示される要素があります。PADの 「ウェブページからデータを抽出する」 アクションを使用し、この要素のテキストを抽出します。
データ抽出ウィザードを使って、判定結果が表示される部分を右クリックし、「要素のテキストを抽出」を選択します。
このアクションの出力は自動的にPADの変数に格納されます。この変数は、デフォルトでDataTable型になります。
変数の設定:
Data Table型の変数から、判定結果の文字列だけを取り出します。
「変数の設定」 アクションを使用して、%抽出データ[0][0]% のように指定し、新しい変数に判定結果のテキストを代入します。これにより、例えば Class_1 や Class_2 といった文字列が、使いやすい変数として扱えるようになります。

ステップ3:判定結果に基づいたフローの実行 ⚙️
判定結果の文字列が変数に格納されたら、その変数を利用して、さまざまな自動化処理を実装します。
条件分岐 (If):
「If」アクションを使用し、%変数名% = 'Class_1' のように条件を設定します。
この条件に基づいて、「もし判定結果が Class_1 ならば、この処理を実行する」といった形でフローを分岐させることができます。
メッセージボックスの表示:
「メッセージボックスの表示」 アクションで、判定結果をユーザーに通知します。
アプリケーションの実行:
判定結果に応じて特定のアプリケーションを起動したり、ウェブサイトで特定の操作を実行したりするフローを構築できます。
このように、Teachable Machineの判定結果をPADの変数として扱うことで、現実世界の事象をトリガーにした強力な自動化フローを作成することが可能になります。

まぢですか、めっちゃいろいろ使えるじゃないですか。

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?