キーボード API

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

キーボード API は、ブラウザーを実行している端末に取り付けられている物理キーボードを操作するためのメソッドを提供します。

いくつかの機能を提供します。「キーボードマッピング」は、キーボードの特定の物理キーによって生成された文字列を取得するためのインターフェイスを提供し、そのキーをユーザーに正しく識別させます。「キーボードロック」は、通常ユーザーエージェントやオペレーティングシステムによって予約されているキーを、ウェブページがキャプチャできるようにします。キーボード API の使用目的は、ゲームやリモートアクセスアプリなど、全画面の没入感を提供するウェブアプリケーションです。

概念と使用方法

キーボードマッピング

物理的なキーボードでは、 code 属性は押されたキーの物理的な位置に、 key 属性はキーボードの物理的な位置でキーを押したときに生成される文字列になります。 key の値はキーボードのロケール('en-US' など)、レイアウト('QWERTY' など)、修飾キーの状態(ShiftControl など)に影響されます。歴史的に、その情報を取得する方法はありませんでした。

キーボードマップ API は、 Keyboard インターフェイスと KeyboardLayoutMap インターフェイスを通して、特定のキー押下によって生成された文字列を取得する方法を提供します。 Keyboard インターフェイスは navigator.keyboard からアクセスします。 KeyboardKeyboard.getLayoutMap メソッドを提供し、コードをキーに変換するためのメンバーを含む KeyboardLayoutMap オブジェクトで解決するプロミスを返します。有効なコード値のリストは、 UI Events KeyboardEvent code Values 仕様の Writing System Keys の節にあります。

次の例は、英語の QWERTY キーボードで W と書かれたキーに関連する場所固有またはレイアウト固有の文字列を取得する方法を示しています。

js
if (navigator.keyboard) {
  const keyboard = navigator.keyboard;
  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
    const upKey = keyboardLayoutMap.get("KeyW");
    window.alert(`Press ${upKey} to move up.`);
  });
} else {
  // ここで何かを行う
}

キーボードロック

リッチで双方向的なウェブページ、ゲーム、リモートストリーミングの体験では、全画面表示モード中に特別なキーやキーボード ショートカットにアクセスする必要があることがよくあります。このようなキーや キーの組み合わせの例には、EscapeAlt+TabCtrl+N などがあります。これらのキーとキーの組み合わせは、通常、次の例に示すように、ユーザーエージェントまたは基礎となるオペレーティングシステムによってキャプチャされます。

WASD の各キーをキャプチャするには、それぞれのキーのキーコード属性値を含むリストで lock() を呼び出します。

js
navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);

これは、キーを押したときにどの修飾キーが使われたかに関係なく、これらのキーを捕捉します。標準的なアメリカ合衆国の QWERTY 配列と仮定すると、 KeyW を登録することで、WShift+WControl+WControl+Shift+W、およびその他のすべての修飾キーと W の組み合わせが確実にアプリに送信されます。 KeyAKeySKeyD についても同様です。

システムキーの書き込み

Keyboard.lockKeyboardLayoutMap インターフェイスの様々なメソッドに渡されるコードを「システムキーの書き込み」と呼びます。

物理キーは現在のロケールやキーボードレイアウトによって意味が変わるため、 Writing System KeysUI Events KeyboardEvent code Values 仕様の Writing System Keys の章で定義されています。これらのキーを以下に示します。青いキーはすべての標準的なキーボードにありますが、緑のキーは一部のキーボードにしかありません。

UI Events KeyboardEvent code Values 仕様で定義されているシステムキーの書き込み。

インターフェイス

Keyboard Experimental

キーボードレイアウトマップを取得し、物理キーボードからのキー押下のキャプチャを切り替える関数を提供します。

KeyboardLayoutMap Experimental

特定の物理キーに関連付けられた文字列を取得するための関数を持つ、マップ風のオブジェクトです。

他のインターフェイスへの拡張

キーボードレイアウトマップを取得し、物理キーボードからのキー押下のキャプチャを切り替える関数へのアクセスを提供する Keyboard オブジェクトを返します。

仕様書

Specification
Keyboard Lock
Keyboard Map

ブラウザーの互換性

api.Keyboard

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Keyboard
Experimental
getLayoutMap
Experimental
lock
Experimental
unlock
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

api.KeyboardLayoutMap

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
KeyboardLayoutMap
Experimental
[Symbol.iterator]
Experimental
entries
Experimental
forEach
Experimental
get
Experimental
has
Experimental
keys
Experimental
size
Experimental
values
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.