フルスクリーンの解除方法について、JavaScriptでよく発生するエラーの解決方法を解説します。

フルスクリーン解除の基本的な使い方

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

document.exitFullscreen();

ただし、ブラウザの互換性を考慮する必要があります。各ブラウザ固有のメソッドを含めた実装例を紹介します。

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

よくあるエラーと解決策

エラー1: TypeError: document.exitFullscreen is not a function

このエラーは、ブラウザがフルスクリーンAPIをサポートしていない場合に発生します。

解決策:

if (document.exitFullscreen || document.webkitExitFullscreen || 
    document.mozCancelFullScreen || document.msExitFullscreen) {
  exitFullScreen();
} else {
  console.log('フルスクリーンAPIがサポートされていません');
}

エラー2: Failed to execute 'exitFullscreen' on 'Document'

このエラーは、要素がフルスクリーンモードでない状態で解除を試みた場合に発生します。

解決策:

function safeExitFullscreen() {
  if (document.fullscreenElement) {
    exitFullScreen();
  }
}

実践的な実装例

フルスクリーンの切り替えを行うボタンの実装例です。

const toggleButton = document.getElementById('toggleFullscreen');

toggleButton.addEventListener('click', () => {
  if (document.fullscreenElement) {
    exitFullScreen();
  } else {
    document.documentElement.requestFullscreen();
  }
});

フルスクリーン状態の監視

フルスクリーンの状態変更を監視する方法も紹介します。

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

ブラウザ対応状況

フルスクリーンAPIは現代の主要なブラウザで広くサポートされています：

  • Chrome 15+
  • Firefox 9+
  • Safari 5.1+
  • Edge 12+
  • Internet Explorer 11+

まとめ

フルスクリーン解除の実装では、以下の点に注意が必要です：

  • ブラウザの互換性への対応
  • フルスクリーン状態のチェック
  • エラーハンドリング

適切なエラー処理と互換性対応を行うことで、安定したフルスクリーン機能を実装できます。