ウェブ上のヒューマン インターフェース デバイス: 簡単な例

アプリから一般的でないデバイスに接続する。

Joe Medley
Joe Medley
Matt Reynolds
Matt Reynolds

WebHID API とは

多くのヒューマン インターフェース デバイス(HID)は、新しすぎる、古すぎる、または一般的でないため、システムのデバイス ドライバからアクセスできません。WebHID API は、JavaScript でデバイス固有のロジックを実装する方法を提供することで、この問題を解決します。

WebHID API のユースケースの例

HID は、人間から入力を受け取ったり、人間に出力を提供したりします。デバイスの例としては、キーボード、ポインティング デバイス(マウス、タッチスクリーンなど)、ゲームパッドなどがあります。HID プロトコルにより、オペレーティング システム ドライバを使用してデスクトップ パソコンでこれらのデバイスにアクセスできます。ウェブ プラットフォームは、これらのドライバに依存することで HID をサポートします。

一般的ではない HID デバイスにアクセスできないことは、ゲームパッドのサポートに関して特に問題となります。PC 向けに設計されたゲームパッドは、ゲームパッドの入力(ボタン、ジョイスティック、トリガー)と出力(LED、振動)に HID を使用することがよくあります。ただし、ゲームパッドの入力と出力は十分に標準化されておらず、ウェブブラウザでは特定のデバイスに対してカスタム ロジックが必要になることがよくあります。この状態は持続可能ではなく、古いデバイスや一般的でないデバイスのロングテールに対するサポートが不十分になります。また、ブラウザが特定のデバイスの動作に存在する癖に依存する原因にもなります。

デモ、デモ、デモ

これらのサンプルの動作についてご不明な点がある場合は、GitHub でソースコードをご確認ください。説明には基本的なコード例が記載されています。

MacBook Pro のキーボード バックライト

これらのデモを試すうえで最大の障壁は、デバイスにアクセスできないことです。幸いなことに、TouchBar 搭載の MacBook Pro をお持ちの場合は、何も購入する必要はありません。このデモでは、ノートパソコンから直接 API を使用できます。また、WebHID を使用して、周辺機器だけでなく、組み込みデバイスの機能をロック解除する方法も示します。

作成者: FWeinb
デモ/ソース: キーボード バックライト

ゲーム コントローラ

PlayStation 4 ワイヤレスコントローラー

次は、持っている人が少ないと思われるものです。ソニーの DualShock 4 は、PlayStation 4 ゲーム機用のワイヤレス コントローラです。

DualShock 4 デモは、WebHID を使用して DualShock 4 から未加工の入力レポートを受信し、コントローラのジャイロスコープ、加速度計、タッチパッド、ボタン、サムスティックの入力にアクセスするための高レベルの API を提供します。また、コントローラ内の RGB LED の振動と色の設定もサポートしています。

作成者: TheBITLINK
デモ: DualShock 4 デモソース

Nintendo Switch Joy-Con コントローラ

ズボンのポケットに入れた Nintendo Switch Joy-Con コントローラで実際にジャンプして、Chrome の恐竜 🦖 オフライン ゲームをプレイします。このデモは、Nintendo Switch Joy-Con コントローラ用の WebHID ドライバである Joy-Con WebHID を使用しています。

作成者: Thomas Steiner
デモ: Chrome Dino WebHIDデモのソースドライバのソース

BlinkStick Strip

BlinkStick Strip は、8 個の RGB LED を搭載した HID 準拠のライト ストリップです。このデモでは、チェイス、点滅、ラーソン スキャナ(サイロン)など、いくつかの点滅パターンから選択できます。

作成者: Robat Williams
デモ: blinkstick-stripソース

このデモでは何ができますか?(お待ちください)。点滅しているアニメーション キャラクター。実際には、blink(1) USB 通知ライトを使用する 3 つのデモです。

blink(1) はシンプルでドキュメントが充実しているため、HID の入門に最適です。

作成者: Tod E. Kurt
デモ: blink(1)ソース

謝辞

Pete LePageKayce Basques に感謝いたします。