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

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

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

EyeDropper API とは何ですか？

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

たとえば、Photoshop ではキャンバスから色をサンプリングできるため、色を推測して間違えるリスクを回避できます。PowerPoint にはスポイトツールもあります。これは、図形の輪郭や塗りつぶしの色を設定するときに便利です。Chromium DevTools にも、CSS スタイルパネルで色を編集するときに使用できるアイドロッパーが用意されているため、色コードを覚えておく必要はありません。また、他の場所からコピーする必要もありません。

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

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

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

Chromium のカラー選択ツール。

EyeDropper API の使用方法

ブラウザ サポート

対応ブラウザ

  • Chrome: 95。
  • Edge: 95。
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

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

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

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

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

API の使用

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

const eyeDropper = new EyeDropper();

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

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 のデモのいずれかを開きます。

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

カラーゲームのデモ。

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

この一見シンプルなウェブ API の背後には、プライバシーとセキュリティに関する潜在的な懸念が隠れています。悪意のあるウェブサイトが画面のピクセルを読み取るようになったらどうなりますか？

この懸念に対処するため、API 仕様では次の対策が義務付けられています。

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

フィードバック

Chromium チームは、EyeDropper API の使用感について、皆様のご意見をお聞きしたいと考えております。

API 設計について

API が想定どおりに動作しない点はありますか？または、アイデアを実装するために必要なメソッドやプロパティが不足している場合はどうすればよいですか？セキュリティ モデルに関するご質問やご意見がございましたら、API の GitHub リポジトリで仕様に関する問題を報告するか、既存の問題にコメントを追加します。

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

Chromium の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、再現手順を簡単に説明してください。[コンポーネント] ボックスに Blink>Forms>Color を入力します。Glitch は、簡単な再現手順をすばやく共有するのに適しています。

API のサポートを表示する

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

関連情報

謝辞

EyeDropper API は、Microsoft Edge チームの Ionel Popescu によって仕様化され、実装されました。この投稿は Joe Medley が確認しました。