先日 Chrome 95 がリリースされました。いつもながら、様々な機能が追加されたわけですが、その中に Eye Dropper API という気になる JavaScript API がありましたので、紹介したいと思います。
Eye Dropper とは
一般的に Eye Dropper という用語はあまりなじみはないですよね。カラーピッカーと言えば分かりやすいでしょうか。ただ、パレットから色を選択する UI ではなく、虫眼鏡のような領域が出て、それを自由に動かせて、画面上の色を拾う UI になっています。
このようにピクセルを判別できるほどに拡大表示して、その一つのピクセルを拾います。Photoshop などのレタッチソフトのスポイトツールに近いですね。
Eye Dropper API は、JavaScript を使って Eye Dropper を表示させ、ユーザーがピクセルを選択したら、その色を JavaScript から取り出せます。
標準化
Eye Dropper API は W3C の Web Platform Incubator Community Group にて提案された API です。仕様書案も公開されています。
まだ勧告に至っていない API ですので、今後どうなるのかは分かりません。つまり、詳細が変更される可能性があります。現時点では Chrome だけがこの API を実装しています。他のブラウザーは実装しないかもしれません。
Chrome と同じ Chromium ベースの Edge や Opera はこの API が利用できるようになるかもしれませんね。
使い方
まずは Eye Dropper を使ってみましょう。このページに Chrome でアクセスしてくださいね。
「Open」ボタンを押すと、Eye Dropper が表示されるはずです。ブラウザー内だけでなく、デスクトップ上のピクセルまで取り出せるのが分かると思います。そして選択を終了すると、ボタンの横に選択したピクセルの色が 16 進数表記で表示されます。
このサンプルの HTML と JavaScript コードは次の通りです。
<p>
<button id="eye-dropper-btn" disabled="">Open</button>
<span id="eye-dropper-msg"></span>
</p>
const msg_el = document.getElementById('eye-dropper-msg');
const btn_el = document.getElementById('eye-dropper-btn');
if (window.EyeDropper) {
btn_el.disabled = false;
btn_el.addEventListener('click', async () => {
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
msg_el.textContent = result.sRGBHex;
console.log(JSON.stringify(result, null, ' '))
}, false);
} else {
const msg = 'Eye Dropper API を利用できません。';
msg_el.textContent = msg;
}
コード解説
JavaScript コードを簡単に解説しましょう。まず Eye Dropper API が利用可能なのかをチェックします。
if (window.EyeDropper) {...}
もし Eye Dropper API をサポートしたブラウザーであれば、window.EyeDropper が存在するはずです。
もしブラウザーが Eye Dropper API をサポートしていることが分かれば、EyeDroper() コンストラクタから EyeDroper オブジェクトを生成します（変数 eyeDropper）。
const eyeDropper = new EyeDropper();
次に EyeDroper オブジェクトの open() メソッドを使って、Eye Dropper を表示させます。
const result = await eyeDropper.open();
ここで注意してほしいのは、open() メソッドは Promise オブジェクトを返す非同期のメソッドであるという点です。そのため、ここでは await を使って open() メソッドを呼び出しています。
ユーザーがピクセルの選択を終えると、open() メソッドは返ってきます。そして、上記の変数 result に結果が代入されます。この代入された値は次のようなオブジェクトです。
{
"sRGBHex": "#00b2fd"
}
このように、sRGBHex プロパティに 16 進数表記の色情報がセットされたオブジェクトが得られます。
利用上の制約
この API は、クリックなどの何かしらのユーザーの操作が伴わなければ機能しません。ウェブページを開いただけで勝手に Eye Dropper が表示させるといったことはできないようになっています。そのため、前述のサンプルではボタンを押させたのです。
まとめ
普段の仕事で、なかなか Eye Dropper API を使うシーンが思い浮かびませんが、もしフォトレタッチやドローツールをウェブベースで開発することになったら、重宝するかもしれませんね。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
