Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / Io...
Search
you(@youtoy)
PRO
September 21, 2025
Technology
0
130
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you(@youtoy)
PRO
September 21, 2025
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
86
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
140
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
270
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
13
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
40
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
100
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
210
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
140
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
3.1k
Other Decks in Technology
See All in Technology
Wasmの気になる最新情報
askua
0
180
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
620
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
740
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
110
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
160
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
230
Building a cloud native business on open source
lizrice
0
150
Introdução a Service Mesh usando o Istio
aeciopires
1
270
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
150
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
120
Kubernetes self-healing of your workload
hwchiu
0
320
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Code Review Best Practice
trishagee
72
19k
Faster Mobile Websites
deanohume
310
31k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
RailsConf 2023
tenderlove
30
1.3k
Done Done
chrislema
185
16k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Embracing the Ebb and Flow
colly
88
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Applications with DynamoDB
mza
96
6.7k
Designing Experiences People Love
moore
142
24k
Transcript
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の記事に
終わり!