Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
WebHID API でリングコン のセンサー値を取得してみた
Masaki Koyanagi
June 15, 2021
Programming
1
480
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
Pros and Cons で考える Vue 2 Composition API
mascii
4
590
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
270
TypeScript で Optional Chaining を使ってみた
mascii
1
470
Vue.jsでCSS Modulesを使ってみた
mascii
0
79
不変量
mascii
1
62
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
1.5k
JavaScriptのバージョンの話
mascii
1
1.4k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.6k
Node.js + Raspberry Piで お手軽IoT
mascii
2
1.3k
Other Decks in Programming
See All in Programming
Managing Error Messages with your Oracle Database REST APIs
thatjeffsmith
0
160
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
170
Amazon ECSのネットワーク関連コストの話
msato
0
670
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
970
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.3k
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
140
Haskellでオブジェクト指向プログラミング
koheisakata
0
140
ES2022の新機能
smt7174
0
280
git on intellij
hiroto_kitamura
0
170
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
410
Chart実装が楽になりました。
keisukeyamagishi
0
120
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
430
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Code Review Best Practice
trishagee
43
9.3k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Designing for Performance
lara
597
63k
We Have a Design System, Now What?
morganepeng
35
3k
The Invisible Customer
myddelton
110
11k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Support Driven Design
roundedbygravity
86
8.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
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上で利用可能にする • 誰も試していない組み合わせが動くと楽しい ◦ 必要なのは着実さであることを再確認