Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Masaki Koyanagi

June 15, 2021
Tweet

More Decks by Masaki Koyanagi

Other Decks in Programming

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