ブラウザの画面をフルスクリーンにする方法

今回のTipsでは、Cobos4i（SmartPad4i）で作成したアプリ画面において、ボタンをクリックすることでフルスクリーンに移行する方法をご紹介します。フルスクリーンにすることで、画面領域を最大限に使用できるようになります。また、ブラウザの他のタブやURL欄が表示されないため、利用者は業務画面に集中することができます。

はじめに

Cobos4i（SmartPad4i）で作成するWebアプリでは、用途によってフルスクリーン表示を採用することで、画面領域を広く確保し、専用端末に近い操作性を実現できます。

例えば、専用端末やキオスク端末で利用するアプリ、稼働状況や業務状況を監視するダッシュボードアプリなどでは、フルスクリーン表示を効果的に活用できる場合があります。

フルスクリーンの実装例

Cobos4iでフルスクリーンを実装する場合には、フルスクリーン用のボタン要素にはid属性を設定せず、Designerに含めないように設定してください。

ボタンのクリックイベントでJavaScriptを呼び出すように設定します。
例では、toggleFSという関数を呼び出すようにしています。

<input  name="BTN03" type="button" value="⛶ 全画面表示" onclick="toggleFS()" ..省略.. > 

ボタンのクリックイベントで呼び出されるtoggleFSは以下になります。
フルスクリーンに移行するには、Fullscreen APIを使用します。

今回の場合は、全画面状態を確認するためのfullscreenElementプロパティ、全画面に移行するためのrequestFullscreenメソッド、全画面を解除するためのexitFullscreenメソッドを使用します。

function toggleFS()
{
  if (!document.fullscreenElement) {
    document.body.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

・全画面 API
https://developer.mozilla.org/ja/docs/Web/API/Fullscreen_API

・Document: fullscreenElement プロパティ
https://developer.mozilla.org/ja/docs/Web/API/Document/fullscreenElement

・Element: requestFullscreen() メソッド
https://developer.mozilla.org/ja/docs/Web/API/Element/requestFullscreen

・Document: exitFullscreen() メソッド
https://developer.mozilla.org/ja/docs/Web/API/Document/exitFullscreen

おわりに

専用端末やキオスク端末として利用するWebアプリ、または稼働状況や処理状況を常時監視するダッシュボードアプリでは、フルスクリーン表示の利用をお勧めします。

特に、現場端末、受付端末、監視用モニターなど、特定の画面を継続して表示する用途では、フルスクリーン表示を採用することで、視認性や操作性の向上が期待できます。