Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用...
Search
you(@youtoy)
PRO
March 26, 2024
Technology
2.8k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you(@youtoy)
PRO
March 26, 2024
Transcript
12 slides
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 を組み合わせて
体験型の展示コンテンツなどに 今後、活用していきたい!
終わり!
More Decks by you(@youtoy)
See All by you(@youtoy)
つくって、体験してもらって、楽しんでもらう - 子どもも大人もワクワクするインタラクティブ体験を支える技術 -
you
PRO
0
70
コーディングエージェントでM5Stack系の開発を少し試した時の話 / M5 Japan Tour 2026 Autumn 東京
you
PRO
0
270
toio・myCobotでフィジカルAIっぽいことを行うための検討(とりあえず調査) / フィジカルAI LT(IoTLTによる開催)
you
PRO
0
470
Webの技術とガジェットで子どもも大人も楽しめるワクワク体験を提供する / Qiita Tech Festa Day 2026
you
PRO
1
390
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
you
PRO
0
210
クラウドファンディング版StackChan 3体(4体)をインタラクティブな体験型作品にして展示もした話 / スタックチャンお誕生日会2026
you
PRO
0
380
イベントで大活躍する電子ペーパー名札 〜その3〜 / ビジュアルプログラミングIoTLT vol.23
you
PRO
0
450
AI時代だけど、わりと力業で追いかけている技術情報収集の話 / 20260518
you
PRO
0
62
最近の技術系の話題で気になったもの色々(IoT系以外も) / IoTLT 花見予定会(たぶんBBQ) @都立潮風公園バーベキュー広場
you
PRO
1
480
Other Decks in Technology
See All in Technology
会社説明資料_最新版
demaecan
0
32k
あの日、見つかっていなかったらどうなっていたか
kazzpapa3
2
130
顧客合意を取りながら進めるAWSコスト削減の実践
optim
0
160
Kiro を使うコツ (頼み方、覚えさせ方、任せ方) | 目指せ Kiro マスター 09
inariku
PRO
3
140
bpf_arenaとstruct_opsを使うのが難しかった話
masu_mi
0
230
内製アプリとClaudeスキルのセキュリティチェック、 Backlogの課題で回しています。
ayaka_egaaa
0
170
【dbts2026】AIエージェントの 判断と探索を変える、 データベース エンジニアリング― 既存DBの処理と依存関係から作る、オペレーショナルオントロジー ―
shisyu_gaku
0
280
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
inariku
PRO
3
180
81天的 AI Agent 軟體開發團隊治理實務分享
regionbbs
0
160
【Oracle AI SPOTLIGHT ウェビナー】【特別開催:日本語で解説!】Oracle AI World 2026 最新情報フィードバック
oracle4engineer
PRO
1
170
これからのデータエンジニアの役割について考える / Rethinking the Role of Data Engineers in the AI Era
okiyuki99
0
410
Kiro アップデート 2026 年 11 月号 (11 月 8 日時点) | 目指せ Kiro マスター アップデート編
inariku
PRO
2
110
Featured
See All Featured
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
560
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
74
43k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
2
980
Odyssey Design
rkendrick25
PRO
3
940
Highjacked: Video Game Concept Design
rkendrick25
PRO
2
560
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
6
920
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
470
Abbi's Birthday
coloredviolet
5
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.2k