Fullscreen APIを使ってみる

要素のフルスクリーンでの表示自体は以前記事を投稿していますが、フルスクリーン表示に合わせていろいろ対応をする機会があったので、その際に調べたことをメモしておきます。

対応ブラウザ

Full Screen APIの対応ブラウザはこちら
IEとSafariではベンダープレフィックスが必要で、スマホでも一部で対応していません。

サンプルコード

まずはフルスクリーンでの表示と、フルスクリーン画面内に解除するボタンを設置してみます。

<ul class="list">
	<li class="item">
		<img src="img/01s.jpg" class="thumb">
		<div class="full">
			<img src="img/01l.jpg">
			<button class="full-close">close</button>
		</div>
	</li>
	〜 略 〜
</ul>

.fullがフルスクリーン表示する要素でデフォルトはdisplay: none になっていて、.thumbをクリックすると.fullがフルスクリーンで表示される想定です。

次にCSSです。

.full {
	display: none;
	position: relative;
	width: 100vw;
	height: 100vh;
	background: #000000;
}
.full:-webkit-full-screen {
	display: block;
}
.full:fullscreen {
	display: block;
}
.full img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	transform: translate(-50%, -50%);
}

:fullscreenがフルスクリーン中の要素に適用されるスタイルになります。
8〜17行目は画像をフルスクリーンにした中央に配置する設定です。

最後にJavaScriptです。

// フルスクリーン表示のイベント設定
const thumbs = document.querySelectorAll('.thumb');
for (var i = 0; i < thumbs.length; i++) {
	thumbs[i].addEventListener('click', function(e) {
		show_fullscreen(this.nextElementSibling);
	}, false);
}

// フルスクリーン解除のイベント設定
const close = document.querySelectorAll('.full-close');
for (var i = 0; i < close.length; i++) {
	close[i].addEventListener('click', function(e) {
		close_fullscreen(this.parentNode);
	}, false);
}

// フルスクリーン表示する関数
function show_fullscreen(target) {
	if(document.fullscreenEnabled) {
		target.requestFullscreen();
	} else if(document.webkitFullscreenEnabled) {
		target.webkitRequestFullscreen();
	} else {
		alert('未対応です'); 
	}
}

// フルスクリーンを解除する関数
function close_fullscreen(target) {
	if(document.exitFullscreen) {
		document.exitFullscreen();
	} else if(document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	} else {
		alert('未対応です'); 
	}
}

17〜37行目でフルスクリーン表示・解除するための関数を用意して、それぞれ.thumbと.full-close のイベントに設定しています。
これでフルスクリーン表示の実装ができました。
フルスクリーン表示のデモページ

未対応端末の対応

先ほどの例では未対応ブラウザの場合はアラートを出すようにしていましたが、position: fixed を使って擬似的な全画面表示の形で対応してみます。

.full {
	display: none;
	position: relative;
	width: 100vw;
	height: 100vh;
	background: #000000;
}
.full:-webkit-full-screen {
	display: block;
}
.full:fullscreen {
	display: block;
}
.full.is-fullscreen {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
}
.full img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	transform: translate(-50%, -50%);
}

未対応時にはフルスクリーン対象の要素にclassを追加・除去するようにします。

// フルスクリーン表示のイベント設定
const thumbs = document.querySelectorAll('.thumb');
for (var i = 0; i < thumbs.length; i++) {
	thumbs[i].addEventListener('click', function(e) {
		show_fullscreen(this.nextElementSibling);
	}, false);
}

// フルスクリーン解除のイベント設定
const close = document.querySelectorAll('.full-close');
for (var i = 0; i < close.length; i++) {
	close[i].addEventListener('click', function(e) {
		close_fullscreen(this.parentNode);
	}, false);
}

// フルスクリーン表示する関数
function show_fullscreen(target) {
	if(document.fullscreenEnabled) {
		target.requestFullscreen();
	} else if(document.webkitFullscreenEnabled) {
		target.webkitRequestFullscreen();
	} else {
		target.classList.add('is-fullscreen');
	}
}

// フルスクリーンを解除する関数
function close_fullscreen(target) {
	if(document.exitFullscreen) {
		document.exitFullscreen();
	} else if(document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	} else {
		target.classList.remove('is-fullscreen');
	}
}

未対応ブラウザへの対応のデモページ

フルスクリーン切り替え時のイベント

fullscreenchangeイベントでフルスクリーン切り替え時に発火、さらにdocument.fullscreenElement の値でフルスクリーンモードになったのか解除したのかの判別が行えます。

// フルスクリーン表示のイベント設定
const thumbs = document.querySelectorAll('.thumb');
for (var i = 0; i < thumbs.length; i++) {
	thumbs[i].addEventListener('click', function(e) {
		show_fullscreen(this.nextElementSibling);
	}, false);
}

// フルスクリーン解除のイベント設定
const close = document.querySelectorAll('.full-close');
for (var i = 0; i < close.length; i++) {
	close[i].addEventListener('click', function(e) {
		close_fullscreen(this.parentNode);
	}, false);
}

document.addEventListener('webkitfullscreenchange', function(e) {
	switch_fullscreen();
});
document.addEventListener('fullscreenchange', function(e) {
	switch_fullscreen();
});

// フルスクリーン表示する関数
function show_fullscreen(target) {
	if(document.fullscreenEnabled) {
		target.requestFullscreen();
	} else if(document.webkitFullscreenEnabled) {
		target.webkitRequestFullscreen();
	} else {
		target.classList.add('is-fullscreen');
	}
}

// フルスクリーンを解除する関数
function close_fullscreen(target) {
	if(document.exitFullscreen) {
		document.exitFullscreen();
	} else if(document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	} else {
		target.classList.remove('is-fullscreen');
	}
}

// フルスクリーン切り替え時の関数
function switch_fullscreen() {
	if(document.fullscreenElement) {
		console.log('フルスクリーン時の処理');
	} else if(document.webkitFullscreenElement) {
		console.log('フルスクリーン時の処理(webkit用)');
	} else {
		console.log('解除時の処理');
	}
}

フルスクリーン切り替え時のイベントのデモページ