このページは 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 秒間続くとコンテンツが消去されるエフェメラルキャンバスのデモで確認できます。たとえば、子供が落書きできるようにデパートに設置されているとします。

エフェメラルキャンバスのデモ

ポリフィル

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

セキュリティと権限

Chrome チームは、強力なウェブプラットフォーム機能へのアクセスを制御するで定義されているコアプリンシプル（ユーザー制御、透明性、人間工学など）を使用して、アイドル状態検出 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 によるものです。