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 でリングコン のセンサー値を取得してみた
Search
Masaki Koyanagi
June 15, 2021
Programming
1
1k
WebHID API でリングコン のセンサー値を取得してみた
IoTLT vol.76 @YouTube
https://iotlt.connpass.com/event/213454/
Masaki Koyanagi
June 15, 2021
Tweet
Share
More Decks by Masaki Koyanagi
See All by Masaki Koyanagi
Vitestを使った型テストの始め方
mascii
6
2.9k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
560
TypeScript で Optional Chaining を使ってみた
mascii
1
730
Vue.jsでCSS Modulesを使ってみた
mascii
0
140
不変量
mascii
1
190
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
200
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
640
React 使いじゃなくても知っておきたい教養としての React
oukayuka
12
1.3k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
2.8k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
290
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
Reactの歴史を振り返る
tutinoko
1
140
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
CDK引数設計道場100本ノック
badmintoncryer
2
580
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
It's Worth the Effort
3n
185
28k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
BBQ
matthewcrist
89
9.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Fireside Chat
paigeccino
37
3.5k
4 Signs Your Business is Dying
shpigford
184
22k
Music & Morning Musume
bryan
46
6.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
@mascii_k IoTLT vol.76 @YouTube WebHID APIでリングコン のセンサー値を取得してみた
自己紹介 ますきー (@mascii_k) (株)ビザスク フロントエンドエンジニア 前回登壇はIoTLT vol.33 (2017/11/16)
デモ
デモ • 既にデモは始まっている • ブラウザのコンソールでJSを実行し、リングコン でスライドを操作をしている
デモのコード • Zenn, GitHubで公開中 https://zenn.dev/mascii/articles/ring-con-with-web-hid https://github.com/mascii/demo-of-ring-con-with-web-hid
どのように実現したか?
❌ Web Bluetooth API ❌ Gamepad API ◦ ボタン・スティックの入力のみ取得可 ✅
WebHID API ◦ Chrome 89 から利用可 ◦ デバイスのすべての機能を利用できる (※ HIDのコマンドがわかっていれば) ブラウザAPIの選定
HIDコマンドわからない問題 • Joy-Con(単体)のHIDコマンドは 2017年から調べられていた ◦ WebHID APIでも使える • リングコンを動かすための HIDコマンドは長い間わかって
いなかった…
2021年、リングコンを操った者が現れる • Windows向けの実装を発見 ◦ リングコンの動き→スティックの動きに変換 できるもの ◦ ソースコード(Visual C++)と実行バイナリが 配布されていた
WebHID APIでの実装に移植開始 • まずは「Lチカ」でWebHID APIに慣れる
Chromeでセンサー値を受信する • Ring-Con Driverのコマンドをトリガーに、 Chromeでのセンサー値の受信に成功した
Windowsなしでも動くようにする • デバッグログとC++のソースコードを頼りに、 WebHID APIでの実装に移植ができた
IoTに必要なデバッグ術
IoTに必要なデバッグ術 • Lチカは慣れるためにマスト • 誰も試していない組み合わせに挑戦するとき ◦ 確実に動く組み合わせを見つけテストする ▪ 初期不良の可能性を排除できる ▪
正しく動くときの状態を把握できる ◦ 徐々に理想像に近づけていく ▪ 一度に多くの変更をしない ▪ 飛躍しない
IoTに必要なデバッグ術 ESP32だと動かない! センサーの ライブラリ を修正 Arduino Unoなら動いた! https://qiita.com/mascii/items/4859767b5204ff70c2c9 ESP32でも動いた!
まとめ
まとめ • WebHID APIは、リングコンのようなニッチな HIDデバイスをWeb上で利用可能にする • 誰も試していない組み合わせが動くと楽しい ◦ 必要なのは着実さであることを再確認