JavaScriptでフルスクリーン表示を実装する際、`requestFullscreen()`メソッドを使用することで簡単に実現できます。この記事では、実践的なコード例を交えながら、フルスクリーン表示の実装方法を解説します。

フルスクリーン表示の基本実装

フルスクリーン表示を実装するには、以下のコードを使用します：

// フルスクリーン表示にする要素を取得
const element = document.documentElement;

// フルスクリーン表示
element.requestFullscreen()
  .catch(err => {
    console.error('フルスクリーン表示に失敗しました:', err);
  });

ブラウザ互換性への対応

ブラウザによって実装が異なるため、以下のようにプレフィックスを考慮した実装が推奨されます：

function enableFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE11
    element.msRequestFullscreen();
  }
}

フルスクリーン解除の実装

フルスクリーンを解除するには、`document.exitFullscreen()`を使用します：

function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

実践的な実装例

ボタンクリックでフルスクリーン表示を切り替える例を示します：

const fullscreenButton = document.getElementById('fullscreen-button');
const targetElement = document.documentElement;

fullscreenButton.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    enableFullScreen(targetElement);
  } else {
    exitFullScreen();
  }
});

対応するHTML:

<button id="fullscreen-button">フルスクリーン切り替え</button>

フルスクリーン状態の検知

フルスクリーンの状態変更を検知するには、以下のイベントリスナーを使用します：

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('フルスクリーンモードに入りました');
  } else {
    console.log('フルスクリーンモードを終了しました');
  }
});

注意点と制限事項

1. フルスクリーン表示は、ユーザーのアクション（クリックなど）をトリガーとして実行する必要があります。

2. iOSのSafariでは、ビデオ要素のみがフルスクリーン表示に対応しています。

3. フルスクリーン表示中はキーボードショートカット（ESCキーなど）でフルスクリーンを解除できます。

これらの実装方法を活用することで、Webアプリケーションにフルスクリーン機能を追加することができます。ユーザーエクスペリエンスを向上させるために、適切な場面でフルスクリーン表示を活用しましょう。

まとめ

  • `requestFullscreen()`メソッドを使用してフルスクリーン表示を実装
  • ブラウザ互換性のためのプレフィックス対応が重要
  • フルスクリーン状態の検知と適切なエラーハンドリングを実装
  • ユーザーアクションをトリガーとして使用する必要がある

これらの点に注意して実装することで、より良いユーザー体験を提供することができます。