このページは Cloud Translation API によって翻訳されました。

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

Idle Detection API を使用すると、ユーザーがデバイスをアクティブに使用していないタイミングを把握できます。

Thomas Steiner

Idle Detection API とは

Idle Detection API は、ユーザーがアイドル状態になったときにデベロッパーに通知します。これは、キーボード、マウス、画面の操作がないこと、スクリーンセーバーの有効化、画面のロック、別の画面への移動などを示します。デベロッパーが定義したしきい値によって通知がトリガーされます。

Idle Detection API の推奨ユースケース

この API を使用するサイトには、たとえば次のようなものがあります。

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

現在のステータス

ステップ	ステータス
1. 説明を作成する	完了
2. 仕様の最初の下書きを作成する	完了
3. フィードバックを収集してデザインを反復する	作成中
4. ��ン ��イ��	完了
5. リリース	Chromium 94

Idle Detection API の使用方法

特徴検出

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

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

Idle Detection API のコンセプト

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

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

active と idle を区別するには、ユーザー、ユーザーエージェント、オペレーティングシステムごとに異なる可能性のあるヒューリスティックが必要です。また、ある程度の大まかなしきい値も必要です（セキュリティと権限をご覧ください）。

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

Idle Detection 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.');
}

2 番目のステップは、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 のサポート

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

DevTools でのアイドル検出機能の状態エミュレーション。

Puppeteer のサポート

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

デモ

アイドル検出 API の動作は、非アクティブ状態が 60 秒間続くとコンテンツが消去されるエフェメラルキャンバスのデモで確認できます。デパートにデプロイして子供たちにお絵描きをするなどと想像できるでしょう

エフェメラル Canvas のデモ

ポリフィル

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

セキュリティと権限

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

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

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

フィードバック

Chrome チームは、Idle Detection API の使用感について、皆様のご意見をお聞かせいただきたいと考えています。

API 設計について

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

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

Chrome の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、再現手順を簡単に説明してください。[コンポーネント] ボックスに Blink>Input を入力します。Glitch は、すばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

Idle Detection API を使用する予定ですか？一般公開されている機能へのサポートは、Chrome チームが機能の優先順位を決める際に役立ちます。また、他のブラウザベンダーに、その機能のサポートがどれほど重要であるかを示します。

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

謝辞

Idle Detection API は Sam Goto によって実装されました。DevTools のサポートは Maksim Sadym によって追加されました。この記事のレビューに協力してくれた Joe Medley、Kayce Basques、Reilly Grant に感謝します。ヒーロー画像は、Unsplash の Fernando Hernandez によるものです。