EyeDropper API は、ユーザーがブラウザ ウィンドウの外側を含む画面から色をサンプリングできるスポイトツールを作成するためのメカニズムを提供します。3D モデルエディタの Blockbench が、コードベースでこの API をどのように使用しているかをご覧ください。
はじめに
（この記事は動画でもご覧いただけます）。
Blockbench は、ピクセルアート テクスチャを使用した低ポリゴン モデル用の無料の最新モデル エディタです。Minecraft をプレイしたことがあれば、Blockbench で作成されたアセット（Caves and Cliffs アップデート パート 1 で Minecraft に追加されたヤギなど）を見たことがあるかもしれません。GPL バージョン 3 ライセンスの Blockbench コードは、GitHub でオープンソースです。
Blockbench を試すには、web.blockbench.net にアクセスしてアプリを起動します。PWA としてデスクトップにインストールし、スタンドアロン ウィンドウで起動することもできます。3D モデリングを初めて使用する場合は、GitHub のコード検索を使用して見つけることができる、多数のオープンソースの .bbmodel ファイルの例のいずれかから始めることができます。たとえば、次のスクリーンショットに示すトレインモデルを試します。
EyeDropper API
数多くの機能の中でも、Blockbench にはペイント機能が備わっているため、列車にタグを付けたい場合にそれが可能です。実際の状況では、このような行為は行わないでください。ご覧のとおり、タグ付けには明るいオレンジを使用しています。
これは、EyeDropper API を使用して macOS Ventura の壁紙から直接抽出したオレンジです。次のスクリーンショットのように、スポイト（アプリ ウィンドウの左側にあるオレンジ色の円）は、アプリの外側に直接伸びて、デスクトップや開いている他のアプリに到達できます。
Blockbench はオープンソースであるため、デベロッパーが API を実装した方法を確認できます。問題のコードは JannisX11/blockbench/blob/master/js/texturing/color.js にあります。Blockbench は Electron.js アプリとしても利用できます。コメントからわかるように、Electron の問題（色選択ツールでウィンドウの外側の色を選択できない）に対する特別なケース処理が用意されています。コード スニペットのハイライト表示部分に示すように、Web API ではこの問題は発生しません。API の使用は簡単です。新しい EyeDropper インスタンスをインスタンス化し、その open() メソッドを呼び出します。このメソッドは、選択した色を表す sRGBHex 文字列を 16 進数 sRGB 形式で解決します。
new Action("pick_screen_color", {
icon: "colorize",
category: "color",
condition: () => typeof EyeDropper == "function",
click: async function () {
if (Blockbench.platform == "win32") {
// workaround for https://github.com/electron/electron/issues/27980
ipcRenderer.send("request-color-picker", {
sync: settings.sync_color.value,
});
} else if (typeof EyeDropper == "function") {
let dropper = new EyeDropper();
let { sRGBHex } = await dropper.open();
ColorPanel.set(sRGBHex);
}
},
});
まとめ
色選択ツールは、Blockbench などのクリエイティブ ソフトウェアの一部であり、小さいながらも重要なものです。多くの場合、目的の色はアプリ ウィンドウの一部ではなく、外側のどこか（別の画面上など）に存在します。このような場合に色を選択できないカラー選択ツールは、ほとんど役に立ちません。EyeDropper API は、このようなユースケース用に作成されたもので、2021 年 11 月に実装されて以来、Blockbench で非常によく機能しています。Blockbench で遊ぶ場合は、色選択をお楽しみください。