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

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

ジョー・メドレー
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
デモ/出典: Keyboard Backlight

ゲーム コントローラ

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

次の問題は、より少ないと思われるかもしれません。Sony の DualShock 4 は、PlayStation 4 のゲーム機用のワイヤレス コントローラです。

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

作成者: TheBITLINK
デモ: DualShock 4 デモ出典

Nintendo Switch Joy-Con コントローラ

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

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

ブリンクスティックストリップ

BlinkStick Strip は 8 個の RGB LED を備えた HID 準拠のライト ストリップです。このデモでは、Chase、blink、ラーソン スキャナ(Cylon)など、いくつかのまばたきパターンから選択できます。

作成者: Robat Williams
デモ: blinkstick-strip出典

このデモの内容(しばらくお待ちください)。点滅します。実際には blink(1) USB 通知ライトを使用するデモが 3 つあります。

blink(1) はシンプルでドキュメントが豊富であるため、HID を使い始めるのに最適です。

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

謝辞

この記事をレビューしてくれた Pete LePageKayce Basques に感謝します。

写真撮影: Ugur Akdemir(出典: Unsplash