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

2025年9月21日 (日) IoT縛りの勉強会! IoTLT @JLCPCB オープンハードカンファレンス豊田陽介（） @youtoy ブラウザのAPIで色々なデバイスを
あれこれ扱ってみた話（主にWeb HID API）

自己紹介豊田陽介（） @youtoy ▶ IT系イベント主催、　登壇や運営なども ▶ 機械学習・IoT関連
　の書籍を出版 ▶ 子ども向けのIT関連活動　（ITが関係しない活動も）　　プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など最近は、生成AI・ローカルLLMも

【余談】デバイス系ではないけどブラウザ上で

今日の話デバイスを扱うブラウザの API（主に Web HID API）を使って様々なデバイスを扱う

【例1】MacBookのパネルの開閉の角度を取得

【例2】2台のルーレットコントローラーの数字取得

【例3】コーディングをブラウザ上で行ったもの

例1の元ネタ（ネットニュースにも載っていたもの）元ネタは Macアプリだったけど、公開されているリポジトリを見てみたら HID での実装だった ⇒ Web HID API
を使った実装でブラウザで取得　して p5.js で可視化した、という流れ

例2の元ネタ（デイリーポータルZさんの記事など）元ネタは Joy-Con との通信に「node-hid」を使った実装 ⇒ Web HID API を使った実装でブラウザでできるのでは？（当初は、元ネタの通信部分はそのまま使って、改造を
　したような実装で試していて、その後、独自実装に）

例2のテスト時の詳細はQiitaの記事に

例3の実装：kurikitでのビジュアルプログラミング作ったプログラムは USB経由でボードへ書き込みボードは「Arduino pro mini 互換機」、乾電池でも動作し、モーター・Groveを接続可能

例3の詳細はQiitaの記事に

終わり！

ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話（主にWeb HID API） / Io...

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

you（@youtoy） PRO

More Decks by you（@youtoy）

Other Decks in Technology

Featured

Transcript

2025年9月21日 (日) IoT縛りの勉強会! IoTLT @JLCPCB オープンハードカンファレンス豊田陽介（） @youtoy ブラウザのAPIで色々なデバイスを

自己紹介豊田陽介（） @youtoy ▶ IT系イベント主催、　登壇や運営なども ▶ 機械学習・IoT関連