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

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

Thomas Steiner

ゲーム内ダイアログがポップアップ表示される全画面ウェブゲームをプレイしたことがある場合は、そのゲームを Esc キーで直感的にキャンセルしたことがあります。この不満の原因は、ダイアログと全画面モードが Esc キーに対して「対抗」するためです。デフォルトでは全画面モードが常に優先されるため、これは不平等な戦いです。しかし、このダイアログを Esc キーで優先するにはどうすればよいでしょうか。ここで役に立つのが Keyboard Lock API です。

Esc キーを押すと全画面モードが終了します。

ブラウザ サポート

対応ブラウザ

  • 68
  • 79
  • x
  • x

ソース

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 キーを長押ししても、全画面モードを終了できます。両方の長所を活かす。

Esc キーを長押しすると全画面モードが終了します。

デモ

デモでは、デフォルトのバリアントと段階的に拡張されるバリアントの両方をテストできます。デモのソースコードは、両方の動作を示す必要があるため、上記のスニペットよりもクリーンではありません。

全画面モードのデモの改善。

実施中

この段階的な拡張機能を実際に使用するには、上のスニペットをコピーします。既存の全画面コードであっても、必要な変更なしで機能するように設計されています。例として、ゲーム Freeciv の PR をご覧ください。PR を統合したら、Esc キーを押して、すべてのゲーム内ダイアログをキャンセルできます。

Freeciv ゲームにキーボード ロックを追加する GitHub の pull リクエスト。

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

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