Idle Detection API を使用すると、ユーザーがデバイスを実際に使用していないタイミングを特定できます。
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] を探します。次の動画でさまざまなオプションを確認できます。
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 のデモ | Idle Detection API のデモソース
- バグのトラッキング
- ChromeStatus.com のエントリ
- Blink コンポーネント:
Blink>Input
謝辞
Idle Detection API は Sam Goto によって実装されました。DevTools のサポートは、Maksim Sadym によって追加されました。この記事をレビューしてくれた Joe Medley、Kayce Basques、Reilly Grant に感謝します。ヒーロー画像: Fernando Hernandez 氏(Unsplash)