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

EyeDropper API を使用して画面上のピクセルの色を選択する

作成者は EyeDropper API を使用して、ブラウザが提供するスポイトをカスタムカラー選択ツールの構築に使用できます。

Patrick Brosset

Thomas Steiner

EyeDropper API とは

多くのクリエイティブアプリでは、ユーザーはアプリウィンドウの一部または画面全体から色を選択できます。通常は、スポイトのメタファーを使用します。

たとえば Photoshop では、キャンバスから色をサンプリングして色を推測する必要がなく、間違える心配がありません。PowerPoint にはスポイトツールもあり、図形の枠線や塗りつぶしの色を設定する際に役立ちます。Chromium DevTools にも、CSS スタイルパネルで色を編集するときに使用できるスポイトが用意されています。そのため、色コードをどこか別の場所から覚えたりコピーしたりする必要はありません。

ウェブ技術を使用してクリエイティブなアプリケーションを作成する場合は、同様の機能をユーザーに提供することをおすすめします。ただし、ウェブでこれを実行することは、可能な限り困難です。特に、現在のブラウザタブだけでなく、デバイスの画面全体（別のアプリケーションなど）から色をサンプリングする場合は特に困難です。ウェブアプリが自身のニーズに合わせて使用できるブラウザ提供のスポイトツールはありません。

<input type="color"> 要素が近づきました。デスクトップデバイスで実行されている Chromium ベースのブラウザでは、カラー選択ツールのプルダウンに便利なスポイトが表示されます。ただし、この方法を使用する場合、アプリは CSS でカスタマイズし、アプリの他の部分で使用できるように少量の JavaScript でラップする必要があります。このオプションを使用すると、他のブラウザはこの機能にアクセスできなくなります。

EyeDropper API は画面から色をサンプリングする方法を提供することで、このギャップを埋めます。

Chromium のカラー選択ツール。

EyeDropper API の使用方法

ブラウザサポート

対応ブラウザ

ソース

機能検出とブラウザサポート

まず、API を使用する前にその API が使用可能であることを確認します。

if ('EyeDropper' in window) {
  // The API is available!
}

EyeDropper API は、バージョン 95 以降の Edge や Chrome などの Chromium ベースのブラウザでサポートされています。

API の使用

API を使用するには、EyeDropper オブジェクトを作成して、その open() メソッドを呼び出します。

const eyeDropper = new EyeDropper();

open() メソッドは、ユーザーが画面上のピクセルを選択した後に解決される Promise を返します。解決された値により、ピクセルの色への sRGBHex 形式（#RRGGBB）へのアクセスが提供されます。ユーザーが Esc キーを押してスポイトモードを終了すると、Promise は拒否されます。

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

アプリのコードでスポイトモードをキャンセルすることもできます。これは、アプリの状態が大幅に変化した場合に有用です。ポップアップダイアログが表示され、ユーザーの入力が必要になることがあります。スポイトモードは、その時点で停止する必要があります。

スポイトをキャンセルするには、AbortController オブジェクトのシグナルを使用して、open() メソッドに渡します。

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

まとめると、再利用可能な非同期関数を以下に示します。

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

試してみよう:

Windows または Mac で Microsoft Edge または Google Chrome 95 以降を使用して、EyeDropper のデモのいずれかを開きます。

たとえば、カラーゲームのデモをお試しください。[Play] ボタンを押し、限られた時間で、下部のリストから、上部の色付きの正方形と一致する色をサンプリングしてみます。

カラーゲームのデモ。

プライバシーとセキュリティに関する考慮事項

一見シンプルなウェブ API の背後には、プライバシーとセキュリティに関する有害な可能性のある懸念が隠されています。悪意のあるウェブサイトで画面からピクセルが発生し始める可能性がある場合はどうすればよいですか？

この問題に対処するために、API 仕様では次の対策が求められます。

まず、この API では、ユーザーの意図なしにスポイトモードが開始することはありません。open() メソッドは、ユーザーの操作（ボタンのクリックなど）に対してのみ呼び出すことができます。
2 つ目は、ユーザーの意図がなければピクセル情報を取得できないことです。open() によって返される Promise は、ユーザーアクション（ピクセルのクリック）に応じてのみカラー値に解決されます。そのため、ユーザーが気づかずにスポイトをバックグラウンドで使用することはできません。
ユーザーがスポイトモードに気付きやすくなるように、ブラウザではモードをわかりやすく表示する必要があります。このため、通常のマウスカーソルはしばらくすると消え、代わりに専用のユーザーインターフェースが表示されます。また、スポイトモードが開始してから、ユーザーが虫メガネを見る時間を確保するためにユーザーがピクセルを選択できるようになるまでには、遅延があります。
また、ユーザーはいつでも（Esc キーを押して）スポイトモードをキャンセルできます。

フィードバック

Chromium チームは、EyeDropper API に関するユーザーの体験談を募集しています。

API の設計についてお聞かせください

API に想定したとおりに動作しない点はありますか。あるいは、アイデアを実装するために必要なメソッドやプロパティが欠落していないか？セキュリティモデルについてご質問やご意見がある場合は、API の GitHub リポジトリで仕様の問題を提出するか、既存の問題にご意見をお寄せください。

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

Chromium の実装でバグが見つかりましたか？それとも、実装が仕様と異なりますか？ new.crbug.com でバグを報告します。できる限り詳細な情報と再現手順を記載し、[Components] ボックスに「Blink>Forms>Color」と入力します。Glitch を使えば、再現をすばやく簡単に共有できます。

API のサポートを表示する

EyeDropper API を使用する予定はありますか？一般公開のサポートにより、Chromium チームは機能の優先順位付けに役立ち、他のブラウザベンダーはそのサポートがいかに重要であるかを示しています。ハッシュタグ #EyeDropper を使用して @ChromiumDev にツイートを送信し、使用場所と使用方法をお知らせください。

謝辞

EyeDropper API の指定と実装は、Microsoft Edge チームの Ionel Popescu が担当しました。この投稿は Joe Medley によってレビューされました。