ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話（主にWeb HID API） / IoTLT @JLCPCB オープンハードカンファレンス

Transcript

1. 2025年9月21日 (日) IoT縛りの勉強会! IoTLT @JLCPCB オープンハードカンファレンス 豊田陽介（ ） @youtoy ブラウザのAPIで色々なデバイスを あれこれ扱ってみた話（主にWeb HID API）
2. 自己紹介 豊田陽介（ ） @youtoy ▶ IT系イベント主催、 　 登壇や運営なども ▶ 機械学習・IoT関連 　 の書籍を出版 ▶ 子ども向けのIT関連活動 　（ITが関係しない活動も）　　 プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など 最近は、生成AI・ ローカルLLMも
3. 【余談】デバイス系ではないけどブラウザ上で
4. 今日の話 デバイスを扱うブラウザの API（主に Web HID API） を使って様々なデバイスを扱う
5. 【例1】MacBookのパネルの開閉の角度を取得
6. 【例2】2台のルーレットコントローラーの数字取得
7. 【例3】コーディングをブラウザ上で行ったもの
8. 例1の元ネタ（ネットニュースにも載っていたもの） 元ネタは Macアプリだったけど、公開されている リポジトリを見てみたら HID での実装だった ⇒ Web HID API を使った実装でブラウザで取得 　 して p5.js で可視化した、という流れ
9. 例2の元ネタ（デイリーポータルZさんの記事など） 元ネタは Joy-Con との通信に「node-hid」を使った実装 ⇒ Web HID API を使った実装でブラウザでできるのでは？ （当初は、元ネタの通信部分はそのまま使って、改造を 　したような実装で試していて、その後、独自実装に）
10. 例2のテスト時の詳細はQiitaの記事に
11. 例3の実装：kurikitでのビジュアルプログラミング 作ったプログラムは USB経由で ボードへ書き込み ボードは「Arduino pro mini 互換機」、乾電池 でも動作し、モーター・Groveを接続可能
12. 例3の詳細はQiitaの記事に
13. 終わり！