Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary

Transcript

1. 2025年11月1日 (土) HTML5 11th Anniversary @オンライン 豊田陽介（ ） @youtoy Webの技術で「特殊なゲーム用コントローラーや 他デバイスなど」とブラウザを連携させる
2. 自己紹介 豊田陽介（ ） @youtoy ▶ IT系コミュニティ主催、 　 イベント登壇や運営なども ▶ M5StackでIoT、AI・機械 　 学習の書籍を共著・単著で ▶ 子ども向けプログラミング 　サポート活動なども　 プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など
3. ブラウザで体験型コンテンツを作るのが好きです
4. これまでの発表 ▼ 9th・10th •「ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜」 •「"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など」 　・Webの技術でデバイス等を扱う実装を、チーム内で出た作品アイデアに合わせて利用 ▼ 7th・8th •「Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜」とその続編 ・音の機械学習 ＋ Bluetooth でのデバイス制御 ・デバイスとの有線での通信（シリアル通信） ・Webカメラ映像に対する顔や手などのリアルタイム認識 ・2D・3D描画や物理シミュレーション
5. 今日の内容をやる動機： 「体験型展示を作る活動用に 楽しい入力を扱いたい」
6. ブラウザで動く体験型の作品を色々作ってます AI・機械学習などを使った 透明マント／光学迷彩のWebアプリ NT東京2025 での体験型展示 100均の 空気ポンプ カスタム シェーダー サオコン＋ Joy-Con ロボット トイ（toio） ルーレット コントローラー ＋ Joy-Con 太鼓の達人用 コントローラー
7. モノづくり活動を やっている中で...
8. 【余談】自宅には3Dプリンタが2台あります これとWebアプリを組み合わせて、何か面白いことをしたい
9. このあたりに3Dプリンタを絡めると面白そう スマホ用ブラウザでの Canvas要素を使った描画とか使えそう
10. 本題「様々なアイテムを Webの技術でブラウザ連携」 という話へ
11. 今日の話題 その1 ブラウザのAPIで MacBook の 物理的な状態を取得する
12. 【その1】MacBookのパネルの開閉の角度を取得
13. その1の元ネタ（ネットニュース掲載もあり） 元ネタは Macアプリだったけど、公開されている リポジトリを見てみたら HID での実装だった ⇒ Web HID API を使った実装でブラウザで取得 　 して p5.js で可視化した、という流れ
14. やってはみたけど 使いどころは難しそう （そもそも体験型展示で不特定多数に触ってもらう形だと Mac の開閉部分が壊れそうｗ）
15. Web HID API
16. 今日の話題 その2 ブラウザのAPIで Joy-Con経由で使う ルーレットコントローラーの数字を取得する
17. 【その2】ルーレットコントローラーの数字取得
18. その2の元ネタ（デイリーポータルZさんの記事等） 元ネタは Joy-Con との通信に「node-hid」を使った実装 ⇒ Web HID API を使った実装でブラウザでできるのでは？ （当初は、元ネタの通信部分はそのまま使って、改造を 　したような実装で試していて、その後、独自実装に）
19. 当初は体験型展示に できそうか悩ましかったもの
20. ハッカソン参加時にチームメンバーとの開発で活用 チームメンバーが作ったゲームコンテンツとの組み合わせ
21. 会場ではコントローラー部分も 技術者の方にもそうでない方にも ウケが良かったです
22. 今日の話題 その3 ブラウザのAPIで Joy-Con経由で使う リングコン（リング型コントローラー）の リング内外方向の力のかかり具合を取得する
23. 【その3】リングコンを体験型展示に使った事例 過去作品の入力 にリングコンを 使う形に
24. その3の元ネタ（界隈の方の記事）
25. ルーレットコントローラー・ リングコンを使ってみて 分かったこと
26. その2・その3について試したことや分かったこと ▼ ルーレットコントローラー ・物理的・変わったコントローラーとの連携はウケが良かった ・ハッカソンでの開発ではフロントエンドと分離することで 　開発しやすくできた（WebSocket を介した連携にして分離） ・意外とルーレットが外れやすい？（すぐに戻せるけれど） ▼ リングコン ・過剰な負荷がかかりそうな使われ方をすることがあり 　扱い方を説明でフォローする必要がありそう ・運搬時にすごくかさばる（重くないけど体積が...）
27. ルーレットコントローラー・ リングコンなどにより 楽しい体験を提供できる！ （PCで普通に使えるんですね！ という驚きなどとともに）
28. 引き続き、ブラウザで使えるデバイス系 のAPI・ブラウザ上のJavaScriptで動く 技術で楽しい体験型作品を作りたい
29. 余談2： JavaScriptも絡めてできる 何か活用を考えたいもの
30. ミニPC「GMKtec EVO-X2」（128GB） Ryzen AI Max+ 395搭載 余談：ローカルで動くChatGPTみたいなもの 先々週の週末の朝、ローカルLLM用の強大な力（マシン）を入手 M4 Mac mini（24GB）、 M4 MacBook Air（16GB） New！ これまで
31. 終わり！