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)
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
160
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
100
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
96
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
49
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
52
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
230
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
Other Decks in Technology
See All in Technology
原則から考える保守しやすいComposable関数設計
moriatsushi
3
410
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
200
堅牢な認証基盤の実現 TypeScriptで代数的データ型を活用する
kakehashi
PRO
2
220
OpenTelemetry Collector internals
ymotongpoo
5
540
Rubyで作る論理回路シミュレータの設計の話 - Kashiwa.rb #12
kozy4324
1
300
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
360
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
160
IIWレポートからみるID業界で話題のMCP
fujie
0
250
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
New Cache Hierarchy for Container Images and OCI Artifacts in Kubernetes Clusters using Containerd / KubeCon + CloudNativeCon Japan
pfn
PRO
0
150
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
340
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
120
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
51k
Speed Design
sergeychernyshev
31
990
Thoughts on Productivity
jonyablonski
69
4.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Side Projects
sachag
454
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
900
How GitHub (no longer) Works
holman
314
140k
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 を組み合わせて
体験型の展示コンテンツなどに 今後、活用していきたい!
終わり!