【WebHID API】リングコンのチカラセンサーの値を取得してみた

WebHID API はデバイスドライバーを追加インストールすることなく、ニッチな HID デバイスを Web 上で利用可能にする API です。

WebHID API のデモとしてニンテンドースイッチの Joy-Con を単体を用いるものはありましたが、リングフィット アドベンチャーに付属するリングコンのチカラセンサーの値を取得するデモはなかったので作成してみました。

動作確認環境

• MacBook Pro (16-inch, 2019)
  • macOS Big Sur
  • Chrome 90
• Joy-Con(R) + リングコン
  • Joy-Con ファームウェアバージョン 4.7 ^[1]
  • リングフィット アドベンチャーでプレイしたことがある組み合わせ ^[2]

Demo

• PC と Joy-Con(R) を Bluetooth でペアリングします ^[3]
• Joy-Con(R) をリングコンに装着します
• デモページ (https://mascii.github.io/demo-of-ring-con-with-web-hid/index.html) にアクセスします
  
• デモページの左上にある "Connect Ring-Con" ボタンをクリックしデバイスを選択します。このとき、リングコンを押し込んだり引っ張ったりしないでください ^[4]
  
• デバイスを選択して 2,3 秒ほどで接続が開始されます

画面の表示について

• 画面中央に表示される値は、カウンターの値です。リングコンを押し込むと +1 され、引っ張ると -1 されます。
• 画面右下に表示される値は、チカラセンサーの値です。リングコンを押し込むと値が増加し、引っ張ると値が減少します。
• 画面下に表示される赤い領域は、チカラセンサーの値に連動して上下します。

どのようにリングコンを認識させたか？

PC 上でリングコンを認識させてチカラセンサーの値を取得する方法は、リングフィット アドベンチャーの発売(2019/10/18)から長らく知られていませんでしたが、Windows 上でリングコンの動作を仮想 Xbox 360 コントローラーとしてエミュレートする実装が 2021/02 頃に公開されていました:

https://github.com/ringrunnermg/Ringcon-Driver

この ringrunnermg/Ringcon-Driver を Windows 環境上で検証し、リングコンのチカラセンサーの値を取得できていることが確認できました。
C++ で実装されているコードを読み解き、WebHID API で等価なコマンド(バイナリデータ)を送出することでチカラセンサーの値を取得できました。

デモのコードはこちらで公開しています:
https://github.com/mascii/demo-of-ring-con-with-web-hid

所感

もしリングコンが輝く面白いアイディアを思いつきましたら、このデモの実装を活用して実現いただけると幸いです！

追記

tomayac/joy-con-webhid のライブラリ本体及びそのデモに、本記事で紹介したコードが取り込まれました。
また、IchigoJam web というブラウザ上で動作する BASIC 環境においても、リングコンのセンサー値をアナログ入力値として扱えるようになりました^[5]。

脚注

1. https://aka256.github.io/joycon-webhid/ を用いて確認しました。

2. リングフィット アドベンチャーでプレイしたことがない Joy-Con(R) では Chrome で認識しなかったという情報を提供いただきました。

3. 参照: 【JavaScript】スイッチのJoy-Conをプレゼンリモコンにするワンライナー

4. 自分が持っているリングコンは力を加えていない状態でのセンサー値が 2257 付近でしたが、別のリングコンでは 3363 付近だったという情報を提供いただき、初期化時にこの値を取得して保存するようにしています。

5. IchigoJam BASIC のコード例: 福野泰介の一日一創 - IchigoJamとリングコンで作る「押し込みカウンター」とアイデアづくりのコツ