このページは 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.');
}

次に、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 で [Sensors] タブを開き、[Emulate Idle Detector state] を探します。次の動画でさまざまなオプションを確認できます。

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

Puppeteer のサポート

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

デモ

60 秒間操作がなかった場合にコンテンツを消去するエフェメラルキャンバスのデモで、Idle Detection API の動作を確認できます。子どもたちが落書きをするデパートに設置するところを想像してみてください

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

ポリフィル

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 でバグを報告します。できる限り詳細な情報と再現手順を記載し、[Components] ボックスに「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 に感謝します。ヒーロー画像: Fernando Hernandez 氏（Unsplash）