EyeDropper API

はじめに

現在のウェブでは、クリエイティブなアプリ開発者がスポイト（ユーザーが画面上のピクセルから色を選択できるツール）を実装することができません。これには、ウェブページの外側にレンダリングされたピクセルも含まれます。

本APIにより、作者はカスタム色選択ツールを構築する際にブラウザ提供のスポイトを利用できるようになります。

API の説明

ColorSelectionResult 辞書

          dictionary ColorSelectionResult {
            DOMString sRGBHex;
          };

sRGBHex: 有効なシンプルカラーの値である必要があります。

ColorSelectionOptions 辞書

          dictionary ColorSelectionOptions {
            AbortSignal signal;
          };

signal: {{EyeDropper/open}} 操作を中止するために使用できます。

EyeDropper インターフェイス

            [Exposed=Window, SecureContext]
            interface EyeDropper {
                constructor();
                Promise<ColorSelectionResult> open(optional ColorSelectionOptions options = {});
            };

open()

メソッドは以下の手順に従う必要があります:

[=this=] の [=relevant global object=] に [=transient activation=] がない場合、新しい Promise を作成し、"{{NotAllowedError}}" {{DOMException}} で拒否して返します。
すでに別のスポイトが開いている場合、新しい Promise を作成し、"{{InvalidStateError}}" {{DOMException}} で拒否して返します。
|result| を新しい Promise とします。
options.signal が存在する場合、次のサブステップを実行します:
1. options.[=signal=] が中止済みの場合、options.[=signal=] の中止理由で |result| を拒否し、|result| を返します。
2. 次の中止手順を追加して options.[=signal=] に登録します:
  1. "スポイトモード" を終了し、UI を閉じます。
  2. options.[=signal=] の中止理由で |result| を拒否します。
ウェブページを "スポイトモード" にして、ユーザー入力を抑制します: ウェブページには UI イベントが配信されません。
[=In parallel=]:
1. ユーザーが正常に色を選択した結果を |colorSelectionResult| とします。これが失敗した場合は:
  1. ユーザーが選択を中止した場合は |result| を "{{AbortError}}" {{DOMException}} で拒否し、そうでなければ "{{OperationError}}" {{DOMException}} で拒否します。
  2. これらの手順を中止します。
2. "スポイトモード" を終了し、UI を閉じます。
3. |colorSelectionResult| で |result| を解決します。
|result| を返します。

EyeDropper

{{EyeDropper/open}} を呼び出す際、ユーザーエージェントは以下のルールに従うユーザーインターフェイスを提示する必要があります:

ユーザーインターフェイスの提示に失敗したり、画面コンテンツへのアクセスに失敗した場合は、失敗を返す必要があります。
色選択を許可する前に、UI が表示されていたことを保証する必要があります。
どの色が選択されるかが明確に分かるようにする必要があります。
色を選択せずにキャンセル／戻るオプションを提供する必要があります。

セキュリティとプライバシーの考慮事項

開発者がユーザーのマシンから制限のないピクセルデータにアクセスできるようにすることは、セキュリティ上の課題をもたらします。特に、スポイトの実装は、ユーザーがウェブアプリケーションと共有する意図のない情報（例えば、ユーザーが画面上をマウスで移動している間に得られるスクリーンの内容など）をウェブページが "スクリーンスクレイピング" することを許してはなりません。

この脅威を軽減する1つの方法は、ピクセルデータがユーザーによる明示的なアクション（例えばマウスボタンの押下）のときのみウェブアプリケーションに提供されるようにすることです。

加えて、ブラウザはユーザーがスポイトモードに遷移したときにそれが分かる明確な表示（例えばカーソルの変更）を提供し、ユーザーがそのモードを終了できる手段（例えば ESC キーによる終了）を提供するべきです。作者によってキャンセルできないようにする必要があります。

ユーザーが色を選択する前に、ブラウザはユーザーがUIを確認する機会を持てることを保証すべきです。これはスポイトを開いてから色選択を許可するまでの最小時間間隔を強制することで実現できるかもしれません。

スポイトモードへの遷移は消費可能なユーザーアクティベーション（例えばページ上のボタンをクリックすること）を要求すべきであり、意図せずピクセルデータを露出しないようにします。