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
950
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.7k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
510
TypeScript で Optional Chaining を使ってみた
mascii
1
690
Vue.jsでCSS Modulesを使ってみた
mascii
0
130
不変量
mascii
1
140
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.3k
JavaScriptのバージョンの話
mascii
1
2.2k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
8
1.9k
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
290
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
1.4k
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
920
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
Rubyでつくるパケットキャプチャツール
ydah
0
150
テストコード書いてみませんか?
onopon
2
320
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
440
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
160
バグを見つけた?それAppleに直してもらおう!
uetyo
0
220
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
170
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
560
The Invisible Side of Design
smashingmag
299
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
KATA
mclloyd
29
14k
The Cult of Friendly URLs
andyhume
78
6.1k
Statistics for Hackers
jakevdp
797
220k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Bash Introduction
62gerente
610
210k
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上で利用可能にする • 誰も試していない組み合わせが動くと楽しい ◦ 必要なのは着実さであることを再確認