Go to Qiita Advent Calendar 2024 Top
LoginSignup
hageking
@hageking

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

javascriptのタップスクリーンについて

Q&A

Closed

HTMLJavaScripthelpfullscreen

解決したいこと

safariで画面がタップされた時にフルスクリーンにしたいです。
javascript初心者なのでどなたか教えてくれると嬉しいです。

ソースコード

<!DOCTYPE html>
<html lang="ja">

<body>
	<div class="aa">
		<h1>JavaScriptレシピ</h1>
		<button id="button1">フルスクリーン表示</button>
		<button id="button2">解除</button>
	</div>

</body>
<script>
	function full_screen() {
		if (document.body.requestFullscreen) {
			document.body.requestFullscreen();
		} else if (document.body.mozRequestFullScreen) {
			document.body.mozRequestFullScreen();
		} else if (document.body.webkitRequestFullscreen) {
			document.body.webkitRequestFullscreen();
		} else if (document.body.msRequestFullscreen) {
			document.body.msRequestFullscreen();
		}
	}

	// ここから
    document.getElementById("aa").addEventListener("touchstart", () => {
        full_screen()
    })
	// ここまでを消す

	window.addEventListener('load', function () {

		// フルスクリーン表示
		document.getElementById('button1').addEventListener('click', function () {
			full_screen()
		});

		// フルスクリーン解除
		document.getElementById('button2').addEventListener('click', function () {

			// Chrome & Firefox v64以降
			if (document.exitFullscreen) {
				document.exitFullscreen();

				// Firefox v63以前
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();

				// Safari & Edge & Chrome v44以前
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();

				// IE11
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		});
	});
</script>

</html>

Chromeの開発ツールでこのように出ました。

test.html:69 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at test.html:69:34

自分で試したこと

32行目から34行目をコメントアウトするとボタンでフルスクリーンにすることができます。

参考リンク

https://gray-code.com/javascript/display-the-page-in-full-screen/
https://web-breeze.net/js-touch-event/

0

4Answer

hzd7313
@hzd7313
document.getElementById("aa")

aaというIDが振られた要素を取得しようとしていますが、

<div class="aa">

上記要素のaaはclass名でありIDではないからですね。

0Like

Comments

  1. @hageking

    Questioner

    回答ありがとうございます。idをaaにしました。Chromeではエラーが出なくなり動作しましたが、iosのsafariだと動作しません。
    どうしたら良いでしょうか？
STSynthe
@STSynthe

検証したブラウザ環境が書かれてないのと、検証環境を持ち合わせてないのですが

Safari iOSは部分的な対応、機種によって動作しないとのことです。APIはプレフィックスwebkitを付けることで対応してますから、idの記載ミス以外正常な動作をするはずです。

検索すれば苦労なされてる記事が色々出てくるので、自力で探して、shersさんなりの答えを見つけてください。

（参考リンクの一つ目の記事にそれぐらい書いてても良かったように思えるんですけどそもそもSafariとしか書いてないので成る程と思いました）

0Like
hageking
@hageking

回答ありがとうございます。iphoneだと動作せず、ipadのみ動作することがわかりました。
ですがipadで画面をタップしてもフルスクリーンなりませんでした。

<body>
<div class="aa" id="aa">
<h1>JavaScriptレシピ</h1>
<button id="button1">フルスクリーン表示</button>
<button id="button2">解除</button>
</div>

</body>
<script>
function full_screen() {
if (document.body.requestFullscreen) {
document.body.requestFullscreen();
} else if (document.body.mozRequestFullScreen) {
document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullscreen) {
document.body.webkitRequestFullscreen();
} else if (document.body.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
}

// ここから
document.getElementById("aa").addEventListener("touchstart", () => {
alert("a")
})
// ここまでを消す

window.addEventListener('load', function () {

// フルスクリーン表示
document.getElementById('button1').addEventListener('click', function () {
full_screen()
});

// フルスクリーン解除
document.getElementById('button2').addEventListener('click', function () {

// Chrome & Firefox v64以降
if (document.exitFullscreen) {
document.exitFullscreen();

// Firefox v63以前
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();

// Safari & Edge & Chrome v44以前
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();

// IE11
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
});
});
</script>

</html>

なのでipadでタップされていることが反応されているのかを確認するコードを書きました。
このコードを使うと画面をタップした時にアラートでaが表示され「フルスクリーン表示」ボタンでフルスクリーンにできました。
ipad上でタップが反応しているのでアラートの部分(24行目)をfull_screen関数に変更しました。

以下変更後のコード

<body>
<div class="aa" id="aa">
<h1>JavaScriptレシピ</h1>
<button id="button1">フルスクリーン表示</button>
<button id="button2">解除</button>
</div>

</body>
<script>
function full_screen() {
if (document.body.requestFullscreen) {
document.body.requestFullscreen();
} else if (document.body.mozRequestFullScreen) {
document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullscreen) {
document.body.webkitRequestFullscreen();
} else if (document.body.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
}

// ここから
document.getElementById("aa").addEventListener("touchstart", () => {
alert("a")
})
// ここまでを消す

window.addEventListener('load', function () {

// フルスクリーン表示
document.getElementById('button1').addEventListener('click', function () {
full_screen()
});

// フルスクリーン解除
document.getElementById('button2').addEventListener('click', function () {

// Chrome & Firefox v64以降
if (document.exitFullscreen) {
document.exitFullscreen();

// Firefox v63以前
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();

// Safari & Edge & Chrome v44以前
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();

// IE11
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
});
});
</script>

</html>

ですがipadではタップ反応があるはずなのにフルスクリーンになりませんでした。
どうしたらよいでしょうか？

0Like
YottyPG
@YottyPG

ですがipadではタップ反応があるはずなのにフルスクリーンになりませんでした。
どうしたらよいでしょうか？

@shersさんのコードをそのままコピペしただけですが、こちらのiPadでフルスクリーンになることが確認できました。
もしかすると、iPadの世代やiOSのバージョンに起因するものかも知れません。

qiita.gif

See the Pen Untitled by yotty (@yotty) on CodePen.

0Like

Comments

  1. @hageking

    Questioner

    非常にわかりやすい回答ありがとうございます。
    他のiPadでも実験してみます。
    長い間ありがとうございました。
    JavaScript初心者なので分からないことが多いと思いますがこれからもよろしくお願いします。

Your answer might help someone💌

LoginSign Up