（この記事は p5.js の Advent Calendar 2025 の記事【4つ目】です）

はじめに

この記事は、以下の 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イベントと組み合わせて対応すると良いようです。