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

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

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

998b440234ba4524a2c1ba1f130728f8?s=128

Masaki Koyanagi

June 15, 2021
Tweet

Transcript

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

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

  3. デモ

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

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

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

  7. ❌ Web Bluetooth API ❌ Gamepad API ◦ ボタン・スティックの入力のみ取得可 ✅

    WebHID API ◦ Chrome 89 から利用可 ◦ デバイスのすべての機能を利用できる (※ HIDのコマンドがわかっていれば) ブラウザAPIの選定
  8. HIDコマンドわからない問題 • Joy-Con(単体)のHIDコマンドは 2017年から調べられていた ◦ WebHID APIでも使える • リングコンを動かすための HIDコマンドは長い間わかって

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

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

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

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

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

  14. IoTに必要なデバッグ術 • Lチカは慣れるためにマスト • 誰も試していない組み合わせに挑戦するとき ◦ 確実に動く組み合わせを見つけテストする ▪ 初期不良の可能性を排除できる ▪

    正しく動くときの状態を把握できる ◦ 徐々に理想像に近づけていく ▪ 一度に多くの変更をしない ▪ 飛躍しない
  15. IoTに必要なデバッグ術 ESP32だと動かない! センサーの ライブラリ を修正 Arduino Unoなら動いた! https://qiita.com/mascii/items/4859767b5204ff70c2c9 ESP32でも動いた!

  16. まとめ

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