Tweet
Tweet

Slide 1

Slide 1 text

@mascii_k IoTLT vol.76 @YouTube WebHID APIでリングコン のセンサー値を取得してみた

Slide 2

Slide 2 text

自己紹介 ますきー (@mascii_k) (株)ビザスク フロントエンドエンジニア 前回登壇はIoTLT vol.33 (2017/11/16)

Slide 3

Slide 3 text

デモ

Slide 4

Slide 4 text

デモ ● 既にデモは始まっている ● ブラウザのコンソールでJSを実行し、リングコン でスライドを操作をしている

Slide 5

Slide 5 text

デモのコード ● Zenn, GitHubで公開中 https://zenn.dev/mascii/articles/ring-con-with-web-hid https://github.com/mascii/demo-of-ring-con-with-web-hid

Slide 6

Slide 6 text

どのように実現したか？

Slide 7

Slide 7 text

❌ Web Bluetooth API ❌ Gamepad API ○ ボタン・スティックの入力のみ取得可 ✅ WebHID API ○ Chrome 89 から利用可 ○ デバイスのすべての機能を利用できる (※ HIDのコマンドがわかっていれば) ブラウザAPIの選定

Slide 8

Slide 8 text

HIDコマンドわからない問題 ● Joy-Con(単体)のHIDコマンドは 2017年から調べられていた ○ WebHID APIでも使える ● リングコンを動かすための HIDコマンドは長い間わかって いなかった…

Slide 9

Slide 9 text

2021年、リングコンを操った者が現れる ● Windows向けの実装を発見 ○ リングコンの動き→スティックの動きに変換 できるもの ○ ソースコード(Visual C++)と実行バイナリが 配布されていた

Slide 10

Slide 10 text

WebHID APIでの実装に移植開始 ● まずは「Lチカ」でWebHID APIに慣れる

Slide 11

Slide 11 text

Chromeでセンサー値を受信する ● Ring-Con Driverのコマンドをトリガーに、 Chromeでのセンサー値の受信に成功した

Slide 12

Slide 12 text

Windowsなしでも動くようにする ● デバッグログとC++のソースコードを頼りに、 WebHID APIでの実装に移植ができた

Slide 13

Slide 13 text

IoTに必要なデバッグ術

Slide 14

Slide 14 text

IoTに必要なデバッグ術 ● Lチカは慣れるためにマスト ● 誰も試していない組み合わせに挑戦するとき ○ 確実に動く組み合わせを見つけテストする ■ 初期不良の可能性を排除できる ■ 正しく動くときの状態を把握できる ○ 徐々に理想像に近づけていく ■ 一度に多くの変更をしない ■ 飛躍しない

Slide 15

Slide 15 text

IoTに必要なデバッグ術 ESP32だと動かない！ センサーの ライブラリ を修正 Arduino Unoなら動いた！ https://qiita.com/mascii/items/4859767b5204ff70c2c9 ESP32でも動いた！

Slide 16

Slide 16 text

まとめ

Slide 17

Slide 17 text

まとめ ● WebHID APIは、リングコンのようなニッチな HIDデバイスをWeb上で利用可能にする ● 誰も試していない組み合わせが動くと楽しい ○ 必要なのは着実さであることを再確認