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
960
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
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
520
TypeScript で Optional Chaining を使ってみた
mascii
1
700
Vue.jsでCSS Modulesを使ってみた
mascii
0
130
不変量
mascii
1
150
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.3k
JavaScriptのバージョンの話
mascii
1
2.2k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
チームリードになって変わったこと
isaka1022
0
200
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
11
3.8k
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
510
Unity Android XR入門
sakutama_11
0
160
Writing documentation can be fun with plugin system
okuramasafumi
0
120
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
170
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Scaling GitHub
holman
459
140k
Agile that works and the tools we love
rasmusluckow
328
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
Facilitating Awesome Meetings
lara
52
6.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Practical Orchestrator
shlominoach
186
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Six Lessons from altMBA
skipperchong
27
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上で利用可能にする • 誰も試していない組み合わせが動くと楽しい ◦ 必要なのは着実さであることを再確認