Keyboard Lock API による全画面モードの改善

Keyboard Lock API を使用して、全画面表示モードで Esc キーをキャプチャします。

Thomas Steiner

全画面表示のウェブゲームで、ゲーム内のダイアログがポップアップ表示され、Esc キーで本能的にキャンセルしたことがある場合、全画面表示モードが終了した経験があるかもしれません。この煩わしい現象は、ダイアログ モードと全画面モードが Escape キーを奪い合うことで発生します。デフォルトでは全画面モードが常に優先されるため、この戦いは不公平です。では、Escape キーでダイアログを優先するにはどうすればよいでしょうか？ここで役立つのが Keyboard Lock API です。

ブラウザ サポート

Keyboard Lock API を使用する

Keyboard Lock API は navigator.keyboard. で利用できます。Keyboard インターフェースの lock() メソッドは、物理キーボードのキーの押下をキャプチャできるようにした後に、Promise を返します。このメソッドは、基盤となるオペレーティング システムによってアクセス権が付与されたキーのみをキャプチャできます。幸い、Esc キーもその 1 つです。

アプリに全画面モードがある場合は、全画面をリクエストするときに Escape キーをキャプチャして、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.');
  });
}

つまり、ユーザーが全画面モードのときに Escape キーを押すと、デフォルトでダイアログがキャンセルされます。Esc キーを長押しすると、全画面モードを終了できます。両方の利点を活かすことができます。

デモ

デフォルトのバリエーションとプログレッシブ エンハンスメントのバリエーションの両方をデモでテストできます。デモのソースコードは、両方の動作を示す必要があるため、前のスニペットよりもクリーンではありません。

実施中

このプログレッシブ エンハンスメントを実際に使用するには、前のスニペットをコピーします。既存の全画面コードでも、変更を必要とせずに動作するように設計されています。例として、ゲーム Freeciv の PR をご覧ください。PR が統合されたら、Escape キーを押してゲーム内のすべてのダイアログをキャンセルできます。

ボーナス ブックマークレット

全画面モードをサポートするアプリやゲームがすべてオープンソースであるとは限りません。また、パッチを受け入れるとも限りません。次のブックマークレットをブックマーク バーに追加してクリックすると、より優れた全画面モードを有効にできます。