<a href="https://developer.chrome.com/blog/new-in-chrome-95/">Chrome 95 がリリース</a>され、新機能として EyeDropper API が追加されました。(Edge 95 にも追加されました)
<h2>EyeDropper API とは</h2>
EyeDropper API は画面上から色情報を取得するスポイトツールをブラウザ上で実現する API です。スポイトツールはデザインツールなどに搭載されていることが多いかと思います。
Chrome の DevTools にも色選択をするときにスポイトアイコンをクリックするとスポイトツールが使えますが、この機能が単体の Web API として実装された形になります。
<img src="/frontend-expert/image/eyedropper-api/eyedropper.png" alt="DevToolsのカラーピッカー" width="687" height="307" >
<h2>使い方</h2>
EyeDropper API の使い方は次のようになります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result); // {sRGBHex: '#92d0e1'}
</code></pre></div>
<code>EyeDropper</code>のインスタンスで<code>open</code>を実行すると色選択の UI が表示されます。
<h3>セキュリティ上の制約</h3>
EyeDropper API の <code>open</code> はユーザーの操作なしに実行するとエラーになります。
<div class="remark-highlight"><pre class="language-markup"><code class="language-markup">DOMException: Failed to execute 'open' on 'EyeDropper': EyeDropper::open() requires user gesture.
</code></pre></div>
これはプライバシーやセキュリティを考慮しての制限になります。<code>open</code>はユーザーの操作によってのみスポイトモードに移行し、ユーザーがクリックしたときのみ色の値を返します。
これによって悪意のあるサイトがユーザーの画面のピクセル情報を勝手に取得できないようになっています。
<h3>console からは起動できる</h3>
ユーザーの操作なしに起動できない API ですが、DevTools の console からはその限りではありません。次のワンライナーのコードを console で実行するとスポイトツールを起動できます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">await new EyeDropper().open();
</code></pre></div>
覚えておくと便利かもしれません。
ちなみにですが、Snippets からは起動できませんでした。
<h2>EyeDropper API を使ったデモサイト</h2>
EyeDropper API のデモサイトの紹介です。こちらのデモでは EyeDropper API を使った色選択ゲームが遊べます。
<a href="https://captainbrosset.github.io/eyedropper-demos/color-game.html">eyedropper-demos/color-game</a>
Play ボタンをクリックするとカウントダウンが開始されます。時間内に左のマスに表示された色と同じ色を選択すると勝ちです。
<img src="/frontend-expert/image/eyedropper-api/demo.png" alt="EyeDropper APIのデモ" width="704" height="491" >
一部ブラウザでは <code>input</code>タグで<code>type="color"</code>とすることで似たようなピッカーを使用できましたが、UI なしに実行できるようになったことでいろいろな使い道が考えられそうですね。
<h2>参考リンク</h2>
<ul>
<li><a href="https://wicg.github.io/eyedropper-api/">https://wicg.github.io/eyedropper-api/</a></li>
<li><a href="https://web.dev/eyedropper/">https://web.dev/eyedropper/</a></li>
</ul>