MAGIC WAND（draft一旦公開）

概要

Magic Wand は、「音声による呪文詠唱」と「杖のジェスチャー」を組み合わせて、スマートホームデバイスを魔法のように操作する体験型Webアプリケーションです。

ユーザーは魔法使いになりきり、呪文を唱えながら杖を振ることで、部屋の照明や家電を操作できます。音声とジェスチャーの両方が揃った時だけ魔法が発動する仕様により、誤作動を防ぎつつ没入感のある体験を実現しています。

デモ動画

Joy-Con IRカメラによる杖振り検知デモ

キーポイント検出（YOLO + ONNX）による杖の軌道検出デモ

キーポイント検出（YOLO + ONNX）による杖のジェスチャー判定（V字）

画面UI

タイトル ホーム 接続確認 接続テスト画面

入力方式

連携デバイス

魔法発動の仕組み（インテントゲート）

1. 音声認識 — 呪文の詠唱を検出・照合（信頼度 ≥ 0.8）
2. ジェスチャー認識 — 杖の軌跡を判定（信頼度 ≥ 0.7）
3. 照合 — 呪文に対応するジェスチャーが 7秒以内に揃えば発動
4. 実行 — TP-Link Tapoスマートプラグの制御 or Phomemoプリンターで印刷

AI/ML・画像認識の実装

300枚以上の学習データを用意（写真を撮影）し、Roboflowというツールを使用して人力アノテーション作業！！！

今回はwandのクラス（杖全体）とtip（杖先）とgrip（持ち手）の２点のキーポイントを検出させるキーポイント検出で画像認識の実装をしました。 Roboflow作成のデータセットを用いてGoogle Colabでモデル学習させ、ONNX形式でエクスポート 出力したONNXファイルをONNX Runtime Webを用いてブラウザ上で推論を実行させています

Joy-Con (R) IRカメラ・IMUセンサーの実装概要

思ったよりJoy-Con IRカメラがしょぼかったので最終的には本番実装には含めませんでしたが、試行錯誤しながらテスト実装頑張ったのでそちらも紹介させてください

Nintendo_Switch_Reverse_Engineering ↑こちらのリポジトリを参考に実装を進めました

WebHID API を使い、ブラウザからJoy-Con (R) のIRカメラとIMU（加速度・ジャイロ）を直接制御しています。

【通信の流れ】 ブラウザ (WebHID API) ←→ Bluetooth HID ←→ Joy-Con (R) ├─ MCU (STM32) → IRカメラ └─ IMU → 加速度センサー + ジャイロスコープ

初期化シーケンス：

1. navigator.hid.requestDevice() でJoy-Con (R) に接続（vendorId: 0x057e）
2. IMUを有効化（サブコマンド 0x40）→ レポートモードを 0x31 に設定
3. MCUをスタンバイ → IRモードに切り替え → IRレジスタ（解像度・露出・LED強度）を書き込み
4. 50ms間隔のポーリングでIR・IMUデータを同時受信開始

データ受信（レポートID 0x31 の1パケットに全て含まれる）：

• Byte 2-3：ボタン状態（ビットマスクで各ボタンを抽出）
• Byte 12-23：IMUデータ（加速度XYZ + ジャイロXYZ、各16bit signed LE）
• Byte 48〜：MCU/IRカメラデータ

IRカメラの2モード：

• CLUSTERING（0x06）：光点の座標・強度・サイズを最大16個検出 → 杖トラッキングに使用
• IMAGE_TRANSFER（0x07）：160×120グレースケール画像を64フラグメントで転送

IMUセンサー：

• 加速度（accel）・ジャイロ（gyro）の3軸生値をリアルタイム取得

USJの杖は杖の先にある再帰反射材に赤外線を当て、反射した赤外線をIRカメラで捉えることで杖の振りを検知しているらしいです。それを再現したかったのですが、残念ながらJoy-ConのIRカメラでは実力不足でした... reddit：ハリーポッターの杖のセンサー

使用技術

速さと安定を求めた技術スタック!

• devbox で環境構築の手間をゼロ＋mac/windows間のトラブルを減らす
• Bun と oxlint、Vitest を組み合わせて、インストール・チェック・テストの待ち時間を従来の数分から数秒に短縮する

フレームワーク・ランタイム

Next.js (App Router) — Reactフレームワーク TypeScript — 型付き言語 React 19 — UIライブラリ Bun — パッケージマネージャ / ランタイム Devbox — 開発環境管理

開発ツール

Vitest — テストランナー oxlint — Linter Prettier — Formatter GitHub Actions — CI/CD CodeRabbit — AIコードレビュー Babel React Compiler — React最適化コンパイラ

UI・スタイリング

Tailwind CSS v4 — CSSフレームワーク Lucide React — アイコンライブラリ next-themes — テーマ管理 Google Fonts (Cinzel, Cormorant Garamond, MedievalSharp, Geist) — フォント

AI/ML・画像認識

Roboflow — 学習データのアノテーション・データセット管理 Python(Google Colab) — モデル学習・開発環境 ONNX Runtime Web — 杖検出モデル推論 (YOLOv8-pose) 独自実装 — ジェスチャー認識（軌跡の方向転換回数ベース）

　mediapipe使ってません！今回はYOLO+ONNXで実装しました。

ブラウザAPI

Web Speech API — 音声認識（日本語） WebHID API — Joy-Con接続 Web Bluetooth API — Phomemo M02Sプリンター接続 getUserMedia API — カメラ映像取得

IoT連携

tp-link-tapo-connect — TP-Link Tapoスマートプラグ制御

使用ハード

Joy-Con(R) スマートプラグ マジカルワンド（USJの杖）

開発メンバー

ひろ：音声認識 / IMUのジェスチャー判定 ゆっちん：UI担当 リタ：JoyCon IMU / 杖のキーポイント検出 アリス：IoT連携