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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Masaki Koyanagi
June 15, 2021
Programming
1
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
3.2k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.2k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
600
TypeScript で Optional Chaining を使ってみた
mascii
1
770
Vue.jsでCSS Modulesを使ってみた
mascii
0
150
不変量
mascii
1
220
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.5k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3.1k
Other Decks in Programming
See All in Programming
Claude Code Skill入門
mayahoney
0
420
Linux Kernelの1文字のミスで 権限昇格ができた話
rqda
0
2.1k
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
seitarof
3
1.2k
Angular-Apps smarter machen mit Gen AI: Lokal und offlinefähig - Hands-on Workshop!
christianliebel
PRO
0
130
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
120
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
chobishiba
1
500
Takumiから考えるSecurity_Maturity_Model.pdf
gessy0129
1
150
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
maroon8021
3
1.3k
社内規程RAGの精度を73.3% → 100%に改善した話
oharu121
13
8.3k
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
130
ロボットのための工場に灯りは要らない
watany
11
3.1k
『Kubernetes ☸️ で実践する Platform Engineering 』を最高速度で読み抜いたる!!👊🏻
hiroki_hasegawa
0
100
Featured
See All Featured
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.5k
Building an army of robots
kneath
306
46k
The untapped power of vector embeddings
frankvandijk
2
1.6k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
330
Unsuck your backbone
ammeep
672
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Building the Perfect Custom Keyboard
takai
2
720
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
220
Testing 201, or: Great Expectations
jmmastey
46
8.1k
The Spectacular Lies of Maps
axbom
PRO
1
640
New Earth Scene 8
popppiees
1
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
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上で利用可能にする • 誰も試していない組み合わせが動くと楽しい ◦ 必要なのは着実さであることを再確認