（この記事は p5.js の Advent Calendar 2025 の記事【3つ目】にする予定です）
はじめに
この記事は、以下の MDN・Chrome Platform Status でも記載されているブラウザの「Screen Wake Lock API」に関する記事です。
●画面起動ロック API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Screen_Wake_Lock_API
●Screen Wake Lock API - Chrome Platform Status
https://chromestatus.com/feature/4636879949398016
Screen Wake Lock API について
この API は、PC で「画面の消灯、スリープ、ロック」が実行されるのを防止できるものです。自分の場合は、展示イベントで有効活用できそうです（あと、ストップウオッチ・タイマー系のアプリとの組み合わせなど、他でも活用できそうです）。
Screen Wake Lock API に関する補足
この API を有効にする際には、ユーザー操作が行われた後である必要があることに注意が必要です（ページを開いた後、自動で勝手に有効化することはできません）。
それと、MDN の記載によると「例えば、システム設定（省電力モードやバッテリー残量が少ない場合など）、文書がアクティブでない、または表示されていない場合、リクエストが拒否されることがある」ということもあるようです。
簡単なお試し
それでは、お試しをやってみます。
お試し用のコード
以下は、今回用に用意したコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.js"></script>
<meta charset="utf-8" />
</head>
<body>
<main></main>
<script>
let wakeLock = null;
let statusText = "未使用";
async function requestWakeLock() {
if (!("wakeLock" in navigator)) {
statusText = "非対応";
return;
}
try {
wakeLock = await navigator.wakeLock.request("screen");
statusText = "ロック中";
wakeLock.addEventListener("release", () => {
wakeLock = null;
statusText = "解除済";
});
} catch (err) {
statusText = "エラー";
}
}
async function releaseWakeLock() {
if (!wakeLock) return;
try {
await wakeLock.release();
wakeLock = null;
statusText = "解除済";
} catch (err) {
statusText = "エラー";
}
}
function setup() {
createCanvas(400, 200);
textSize(16);
}
function draw() {
background(240);
textAlign(CENTER, CENTER);
text("Lキー: ロック開始 / Uキー: ロック解除", width / 2, height / 2);
textAlign(RIGHT, TOP);
textSize(12);
text(statusText, width - 10, 10);
}
function keyPressed() {
if (key === "l" || key === "L") {
requestWakeLock();
} else if (key === "u" || key === "U") {
releaseWakeLock();
}
}
</script>
</body>
</html>
上記のページを開き、ページにフォーカスがあたった状態で「L」キーを押すと、スリープ・ロック等を防止する状態になります（また「U」キーで、それを手動解除できるようにしています）。
解除される条件
なお、スリープ・ロック等を防止する状態にしたタブが裏に回ったりした場合や、ブラウザを最小化した場合などは、自動解除されるようです。スマホの場合は、別アプリへの切り替えやホーム画面に戻ったりした場合も自動解除となるようです。
これについて、スリープ・ロックを防止した状態を維持するには、復帰時に再取得が必要になるようです。例えば、タブが裏に回ったりした場合など（ページが不可視の状態になって戻った場合）に再取得をするには、visibilitychangeイベントと組み合わせて対応すると良いようです。
