Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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.6k
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)
ローカルLLMをJavaScriptで(少しAIエージェントSDKなどの話も) / 冬のJavaScript祭り @Pleasanter Lounge
you
PRO
0
35
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
you
PRO
0
64
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
170
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
190
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
370
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
19
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
150
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
53
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
120
Other Decks in Technology
See All in Technology
ログ管理の新たな可能性?CloudWatchの新機能をご紹介
ikumi_ono
1
630
Haskell を武器にして挑む競技プログラミング ─ 操作的思考から意味モデル思考へ
naoya
6
1.4k
Microsoft Agent 365 を 30 分でなんとなく理解する
skmkzyk
1
1k
pmconf2025 - データを活用し「価値」へ繋げる
glorypulse
0
730
AWS Bedrock AgentCoreで作る 1on1支援AIエージェント 〜Memory × Evaluationsによる実践開発〜
yusukeshimizu
6
380
直接メモリアクセス
koba789
0
290
RAG/Agent開発のアップデートまとめ
taka0709
0
150
AI時代の開発フローとともに気を付けたいこと
kkamegawa
0
2.7k
Uncertainty in the LLM era - Science, more than scale
gaelvaroquaux
0
820
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
maaaato
0
270
A Compass of Thought: Guiding the Future of Test Automation ( #jassttokai25 , #jassttokai )
teyamagu
PRO
1
250
LLM-Readyなデータ基盤を高速に構築するためのアジャイルデータモデリングの実例
kashira
0
230
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.2k
Designing for humans not robots
tammielis
254
26k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Bash Introduction
62gerente
615
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Docker and Python
trallard
47
3.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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 を組み合わせて
体験型の展示コンテンツなどに 今後、活用していきたい!
終わり!