Idle Detection API で非アクティブユーザーを検出する

Thomas Steiner

公開日: 2020 年 5 月 18 日

Browser Support

アイドル状態検出 API は、ユーザーがアイドル状態になったときにデベロッパーに通知します。たとえば、キーボード、マウス、画面の操作がない、スクリーンセーバーが起動した、画面がロックされた、別の画面に移動したなどの状況が通知されます。デベロッパーが定義したしきい値によって通知がトリガーされます。

Idle Detection API のユースケースの例

この API を使用するサイトの例:

チャットアプリケーションやオンラインソーシャルネットワーキングサイトは、この API を使用して、連絡先に連絡できるかどうかをユーザーに知らせることができます。
博物館などで一般公開されているキオスクアプリは、この API を使用して、キオスクが操作されなくなった場合に「ホーム」ビューに戻ることができます。
グラフの描画など、計算コストの高いアプリは、ユーザーがデバイスを操作しているときにのみ計算を実行するように制限できます。

API を使用する

Idle Detection API がサポートされているかどうかを確認するには、次のコードを使用します。

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

API のコンセプト

Idle Detection API は、ユーザー、ユーザーエージェント（ブラウザ）、使用中のデバイスのオペレーティングシステムの間に、ある程度のエンゲージメントがあることを前提としています。これは 2 次元で表されます。

ユーザーのアイドル状態: active または idle: ユーザーが一定期間ユーザーエージェントを操作したか、操作していないか。
画面のアイドル状態: locked または unlocked: システムにアクティブな画面ロック（スクリーンセーバーなど）があり、ユーザーエージェントとのやり取りが妨げられています。

active と idle を区別するには、ユーザー、ユーザーエージェント、オペレーティングシステムによって異なる可能性のあるヒューリスティックが必要です。また、適度に粗いしきい値である必要があります（セキュリティと権限を参照）。

このモデルでは、特定のコンテンツ（API を使用するタブ内のウェブページ）とのインタラクション、ユーザーエージェント全体、オペレーティングシステムを意図的に正式に区別していません。この定義はユーザーエージェントに委ねられています。

権限をリクエストしてインスタンス化する

Idle Detection API を使用する際の最初のステップは、'idle-detection' 権限が付与されていることを確認することです。権限が付与されていない場合は、IdleDetector.requestPermission() でリクエストする必要があります。このメソッドを呼び出すには、ユーザー操作が必要であることに注意してください。

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

次のステップは、IdleDetector をインスタンス化することです。最小 threshold は 60,000 ミリ秒（1 分）です。最後に、IdleDetector の start() メソッドを呼び出して、アイドル状態の検出を開始できます。アイドル状態の threshold（ミリ秒単位）を含むオブジェクトと、アイドル検出を中止するための AbortSignal を含む省略可能な signal をパラメータとして受け取ります。

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

アイドル状態の検出を停止する

AbortController の abort() メソッドを呼び出すことで、アイドル状態の検出を中止できます。

controller.abort();
console.log('IdleDetector is stopped.');

DevTools のサポート

実際にはアイドル状態にならなくても、DevTools でアイドルイベントをエミュレートできます。DevTools で [センサー] タブを開き、[アイドル検出器の状態をエミュレート] を探します。動画でさまざまなオプションを確認できます。

DevTools での Idle Detector の状態のエミュレーション。

Puppeteer のサポート

Puppeteer バージョン 5.3.1 以降では、さまざまなアイドル状態をエミュレートして、ウェブアプリの動作がどのように変化するかをプログラムでテストできます。

デモ

アイドル検出 API の動作は、60 秒間操作がないとコンテンツが消去される Ephemeral Canvas デモで確認できます。これは、子供たちが落書きをするためにデパートに設置されることを想定しています。

Ephemeral Canvas のデモ

ポリフィル

Idle Detection API の一部の側面はポリフィル可能であり、idle.ts などのアイドル検出ライブラリが存在しますが、これらのアプローチはウェブアプリのコンテンツ領域に限定されます。ウェブアプリのコンテキストで実行されているライブラリは、入力イベントをポーリングするか、可視性の変化をリッスンする必要があります。ただし、ライブラリは、ユーザーがコンテンツエリアの外でアイドル状態になった場合（別のタブに移動した場合や、パソコンから完全にログアウトした場合など）を認識できません。

セキュリティと権限

Chrome チームは、強力なウェブプラットフォーム機能へのアクセスの制御で定義されているユーザー制御、透明性、人間工学などの基本原則を使用して、Idle Detection API を設計、実装しました。この API を使用する機能は、'idle-detection' 権限によって制御されます。API を使用するには、アプリがトップレベルの安全なコンテキストで実行されている必要もあります。

ユーザーの管理とプライバシー

Google は常に、悪意のある行為者による新しい API の不正使用を防止したいと考えています。一見独立しているように見えるウェブサイトでも、実際には同じエンティティによって管理されている場合、ユーザーのアイドル状態の情報を取得し、データを関連付けて、オリジン間で一意のユーザーを識別する可能性があります。このような攻撃を軽減するため、アイドル検出 API は報告されるアイドルイベントの粒度を制限します。

フィードバック

API が想定どおりに動作しない点はありますか？アイデアを実装するために必要なメソッドやプロパティが不足しているか？セキュリティモデルについて質問やコメントがある場合:対応する GitHub リポジトリで仕様に関する問題を報告するか、既存の問題に意見を追加します。

実装に関する問題を報告する

Chrome の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？new.crbug.com でバグを報告します。できるだけ詳細な情報、再現手順を記載し、[Components]（コンポーネント）ボックスに Blink>Input と入力してください。

API のサポートを表示する

Idle Detection API を使用する予定はありますか？公開サポートは、Chrome チームが機能の優先順位を決定するのに役立ち、他のブラウザベンダーにサポートの重要性を示すことができます。

WICG Discourse スレッドで、どのように使用する予定かを共有してください。
ハッシュタグ #IdleDetection を使用して @ChromiumDev にツイートし、どこでどのように使用しているかをお知らせください。

謝辞

Idle Detection API は Sam Goto によって実装されました。DevTools のサポートは Maksim Sadym によって追加されました。レビューしてくれた Joe Medley、Kayce Basques、Reilly Grant に感謝します。