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)
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
850
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
61
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
130
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
980
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
3
1.7k
shake-upを科学する
rsakata
7
900
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1.1k
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
4
490
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
The Cult of Friendly URLs
andyhume
79
6.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Visualization
eitanlees
146
16k
Making Projects Easy
brettharned
116
6.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Agile that works and the tools we love
rasmusluckow
329
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
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 を組み合わせて
体験型の展示コンテンツなどに 今後、活用していきたい!
終わり!