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
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用...
Search
you(@youtoy)
PRO
March 26, 2024
Technology
0
2.5k
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you(@youtoy)
PRO
March 26, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
250
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
3
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
130
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
40
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
95
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
210
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
130
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
3.1k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
150
Other Decks in Technology
See All in Technology
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
730
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
620
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
110
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
240
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
240
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4.2k
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
8
4.3k
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
190
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
170
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
How to Ace a Technical Interview
jacobian
280
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Designing Experiences People Love
moore
142
24k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
YesSQL, Process and Tooling at Scale
rocio
173
14k
GitHub's CSS Performance
jonrohan
1032
470k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Transcript
2024年3月26日 (火) IoT縛りの勉強会! IoTLT vol.109 @クラスメソッド / オンライン 豊田陽介( )
@youtoy WebHID API で Joy-Con・DUALSHOCK 4 の センサーをブラウザから利用する
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・機械学習・IoTの書籍を出版 ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10
から) プライベートでの活動 ・ガジェット大好き ・ビジュアルプログラミング/JavaScript やガジェット、AI・機械学習系を使った 試作をしたり ・最近、ブラウザのデバイス系API に再度 手を出してる 好きなこと、他
今日の話題は「WebHID API」 ブラウザでハードウェアを扱えるAPI Chrome v89(2021/3)リリース
過去の IoTLT の登壇ネタで 登場したことがある このあと軽く紹介
以前登場した時の事例 2つ:vol.69 と vol.76 @n0bisuke さん(2020年11月) デモ内容: 1)Joy-Con + WebHID
API のデモサイト紹介 + ブラウザ操作で Joy-Con を振動させる 2)ブラウザから MacBook のキーボードの バックライトを制御する @mascii_k さん(2021年6月) デモ内容: リングフィット アドベンチャーのリングコン (Joy-Con をつけて使うもの)を使って LT の スライドを制御する ⇒ C++ の非公式な実装を JavaScript に移植
Gamepad API と WebHID API の違い(の一部) API で扱える内容 (Joy-Con・DUALSHOCK 4
を例に) ユーザーによる デバイス接続許可 Gamepad API ボタン押下、スティックの 動き、振動 不要 WebHID API 上記+ センサーや LED など 必要
余談:先ほどの Gamepad API 関連の補足 使えるブラウザ Gamepad: vibrationActuator プロパティ Firefox以外 ※
MDN で「非標準、標準化の予定もなし」 という注意書きあり Gamepad: hapticActuators プロパティ Firefox のみ Gamepad API で振動を扱う話の注意点
デモ2つ: ⇒ 内蔵のセンサーの値をブラウザで 取得して利用 ※ せっかくなので他の API も組み合わせて
1)toio + Web Bluetooth API を組み合わせて
2)micro:bit + Web Serial API を組み合わせて
体験型の展示コンテンツなどに 今後、活用していきたい!
終わり!