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
910
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
5
2.5k
Pros and Cons で考える Vue 2 Composition API
mascii
4
970
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
470
TypeScript で Optional Chaining を使ってみた
mascii
1
640
Vue.jsでCSS Modulesを使ってみた
mascii
0
130
不変量
mascii
1
130
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.2k
JavaScriptのバージョンの話
mascii
1
2.1k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.9k
Other Decks in Programming
See All in Programming
A New Era of Testing
mannodermaus
2
510
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
170
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
120
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Jakarta EE meets AI
ivargrimstad
0
390
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
53
Visualization
eitanlees
142
15k
Making Projects Easy
brettharned
113
5.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Testing 201, or: Great Expectations
jmmastey
36
7k
RailsConf 2023
tenderlove
28
810
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
4 Signs Your Business is Dying
shpigford
179
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上で利用可能にする • 誰も試していない組み合わせが動くと楽しい ◦ 必要なのは着実さであることを再確認