Keyboard Lock API を使用して、全画面モードで Esc キーを取得します。
Esc キーで自然にキャンセルしたゲーム内ダイアログがポップアップ表示される全画面ウェブゲームをプレイしたことがある方は、全画面モードが終了することに気づいたことでしょう。この問題は、Esc キーに対するダイアログと全画面モードの「競合」が原因で発生します。デフォルトでは全画面モードが常に勝つため、決して平等な戦いとはいえません。では、ダイアログが Esc キーのキーとして選ばれるようにするにはどうすればよいでしょうか。ここで役立つのが Keyboard Lock API です。
ブラウザ サポート
Keyboard Lock API を使用する
Keyboard Lock API は navigator.keyboard. で利用できます。Keyboard インターフェースの lock() メソッドは、物理キーボードの一部またはすべてのキーのキー入力のキャプチャを有効にした後、Promise を返します。この方法では、基盤となるオペレーティング システムによってアクセス権が付与されているキーのみをキャプチャできます。Esc キーもその一つです。
アプリが全画面モードに対応している場合は、全画面表示をリクエストする際に Esc キーをキャプチャして、プログレッシブ エンハンスメントとして Keyboard Lock API を使用します。全画面モードを終了するときに、Keyboard インターフェースの unlock() メソッドを使用して、キーボードをロック解除します（つまり、キャプチャしなくなります）。
// Feature detection.
const supportsKeyboardLock =
('keyboard' in navigator) && ('lock' in navigator.keyboard);
if (supportsKeyboardLock) {
document.addEventListener('fullscreenchange', async () => {
if (document.fullscreenElement) {
// The magic happens here… 🦄
await navigator.keyboard.lock(['Escape']);
console.log('Keyboard locked.');
return;
}
navigator.keyboard.unlock();
console.log('Keyboard unlocked.');
});
}
つまり、ユーザーが全画面モードのときに Esc キーを押すと、デフォルトでダイアログがキャンセルされます。ユーザーが Esc キーを長押ししても、全画面モードを終了できます。両方の長所を活かす。
デモ
デモでは、デフォルトのパターンと段階的に拡張されるパターンの両方をテストできます。デモのソースコードは、両方の動作を示す必要があるため、前のスニペットほどシンプルです。
実施中
この段階的な機能強化を実際に使用するには、前のスニペットをコピーします。既存の全画面コードであっても、何も変更しなくても動作するように設計されています。例として、ゲーム Freeciv の PR をご覧ください。PR が統合されたら、Esc キーを押して、すべてのゲーム内ダイアログをキャンセルできます。
ボーナス ブックマークレット
全画面モードをサポートするすべてのアプリやゲームがオープンソース化されたり、パッチを受け取ったりするわけではありません。以下のブックマークレットをブックマーク バーに追加してクリックすると、全画面モードが改善されます。