WebHID API でリングコン のセンサー値を取得してみた

IoTLT vol.76 @YouTube https://iotlt.connpass.com/event/213454/

Transcript

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

   View Slide

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

   View Slide

3. デモ
   

   View Slide

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

   View Slide

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

   View Slide

6. どのように実現したか？
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. IoTに必要なデバッグ術
    

    View Slide

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

    View Slide

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

    View Slide

16. まとめ
    

    View Slide

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

    View Slide