EyeDropper API は、ユーザーがブラウザ ウィンドウの外側を含め、画面から色をサンプリングできるスポイトツールを作成するためのメカニズムを提供します。3D モデルエディタ Blockbench のコードベースでこの API がどのように使用されているかをご覧ください。
はじめに
（この記事は動画でもご覧いただけます）。
Blockbench は、ピクセルアートのテクスチャを使用したローポリモデルに対応した、無料の最新のモデルエディタです。Minecraft をプレイしたことがある方は、Blockbench で作成されたアセットを見たことがあるかと思います。たとえば、Goat は、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 の問題に関する特殊なケース処理があり、カラー選択ツールがウィンドウの外側で色を選択することはできません。ウェブ 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 で色を選んでプレイする方なら、ぜひお試しください。