【2024年最新版】JavaScriptでアイドル時間を検出する3つのベストプラクティス

2024-05-19

JavaScriptでアイドル時間を検出するには、いくつかの方法があります。以下に、一般的な方法をいくつかご紹介します。

イベントリスナーの使用

最も一般的な方法は、mousemoveやkeydownなどのイベントリスナーを使用して、ユーザーのアクティビティを監視することです。これらのイベントは、ユーザーがマウスを動かしたり、キーボードを押したりしたときに発生します。

let idleTime = 0;

window.addEventListener('mousemove', resetIdleTime);
window.addEventListener('keydown', resetIdleTime);

function resetIdleTime() {
  idleTime = 0;
}

setInterval(() => {
  idleTime++;
  console.log(`アイドル時間: ${idleTime}秒`);
}, 1000);

この例では、mousemoveとkeydownイベントリスナーが追加されています。これらのイベントリスナーが呼び出されるたびに、idleTime変数が0にリセットされます。その後、setInterval関数を使用して、1秒ごとにidleTime変数を1ずつ増分させています。

Page Visibility APIの使用

Page Visibility APIは、Webページの可視性を検出するためのAPIです。このAPIを使用して、ユーザーがページをアクティブに閲覧しているかどうかを判断することができます。

let idleTime = 0;

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    startIdleTimer();
  } else {
    stopIdleTimer();
  }
});

function startIdleTimer() {
  idleTime = 0;
  intervalId = setInterval(() => {
    idleTime++;
    console.log(`アイドル時間: ${idleTime}秒`);
  }, 1000);
}

function stopIdleTimer() {
  clearInterval(intervalId);
}

この例では、visibilitychangeイベントリスナーが追加されています。このイベントリスナーは、ページの可視性が変更されたときに呼び出されます。document.visibilityStateプロパティを使用して、ページが現在表示されているかどうかを確認できます。

ページが非表示になった場合、startIdleTimer関数が呼び出され、アイドル時間の計測が開始されます。この関数は、1秒ごとにidleTime変数を1ずつ増分させるためのsetInterval関数を実行します。

ページが表示された場合、stopIdleTimer関数が呼び出され、アイドル時間の計測が停止されます。この関数は、setInterval関数によって返されるIDを使用して、タイマーをクリアします。

パフォーマンスAPIの使用

Performance APIは、Webページのパフォーマンスに関する情報を取得するためのAPIです。このAPIを使用して、ユーザーが最後にインタラクションを行った時刻を取得することができます。

let idleTime = 0;

let lastInteractionTime = performance.now();

setInterval(() => {
  idleTime = Math.floor((performance.now() - lastInteractionTime) / 1000);
  console.log(`アイドル時間: ${idleTime}秒`);
}, 1000);

この例では、performance.now()関数を使用して、ユーザーが最後にインタラクションを行った時刻を取得しています。その後、setInterval関数を使用して、1秒ごとに現在の時刻とlastInteractionTimeの差を計算し、アイドル時間を秒単位で表示しています。

単純にユーザーがいつ最後にインタラクションを行ったかをを知りたい場合は、performance.now()関数を使用する方が簡単です。
ユーザーがページをアクティブに閲覧しているかどうかを判断する必要がある場合は、Page Visibility APIを使用する必要があります。
ユーザーのアクティビティをより詳細に追跡する必要がある場合は、イベントリスナーを使用する必要があります。

上記の方法はあくまで一例であり、他にも様々な方法があります。
アイドル時間の検出には、ブラウザやデバイスによって互換性の問題がある場合があります。
ユーザーのプライバシーを尊重するために、アイドル時間の検出機能をどのように実装するかは慎重に検討する必要があります。

JavaScriptでアイドル時間を検出するサンプルコード

let idleTime = 0;

window.addEventListener('mousemove', resetIdleTime);
window.addEventListener('keydown', resetIdleTime);

function resetIdleTime() {
  idleTime = 0;
}

setInterval(() => {
  idleTime++;
  console.log(`アイドル時間: ${idleTime}秒`);
}, 1000);

説明

let idleTime = 0;

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    startIdleTimer();
  } else {
    stopIdleTimer();
  }
});

function startIdleTimer() {
  idleTime = 0;
  intervalId = setInterval(() => {
    idleTime++;
    console.log(`アイドル時間: ${idleTime}秒`);
  }, 1000);
}

function stopIdleTimer() {
  clearInterval(intervalId);
}

let idleTime = 0;

let lastInteractionTime = performance.now();

setInterval(() => {
  idleTime = Math.floor((performance.now() - lastInteractionTime) / 1000);
  console.log(`アイドル時間: ${idleTime}秒`);
}, 1000);

注意事項

上記のコードはあくまで一例であり、要件に合わせて変更する必要があります。

JavaScriptでアイドル時間を検出するその他の方法

User Timing APIは、Webページのパフォーマンスを測定するためのAPIです。このAPIを使用して、ユーザーがページとどのようにやり取りしているかについての詳細な情報を取得することができます。

let idleTime = 0;

let navigationStart = performance.timing.navigationStart;
let userEngagement = performance.getEntriesByType('user-engagement');

for (let entry of userEngagement) {
  if (entry.type === 'first-input') {
    idleTime = Math.floor((entry.startTime - navigationStart) / 1000);
    break;
  }
}

console.log(`アイドル時間: ${idleTime}秒`);

このコードは、performance.timing.navigationStartプロパティを使用して、ページの読み込みを開始した時刻を取得します。その後、performance.getEntriesByType('user-engagement')メソッドを使用して、user-engagementエントリのリストを取得します。

user-engagementエントリは、ユーザーがページとどのようにやり取りしているかについての情報を提供します。このコードでは、first-inputエントリのみを検索します。このエントリは、ユーザーが初めてページとインタラクションを行った時刻を示します。

first-inputエントリのstartTimeプロパティを使用して、ユーザーが初めてページとインタラクションを行った時刻を取得します。その後、navigationStartプロパティとの差を計算して、アイドル時間を秒単位で表示します。

カスタムイベントを使用して、ユーザーがページとインタラクションを行ったことを追跡することができます。

let idleTime = 0;

document.addEventListener('user-interaction', resetIdleTime);

function resetIdleTime() {
  idleTime = 0;
}

setInterval(() => {
  idleTime++;
  console.log(`アイドル時間: ${idleTime}秒`);
}, 1000);

document.addEventListener('mousemove', () => {
  dispatchEvent(new CustomEvent('user-interaction'));
});

document.addEventListener('keydown', () => {
  dispatchEvent(new CustomEvent('user-interaction'));
});