EyeDropper は画面上のピクセルの色を選択する API です。ステータスは Experimental ですが、今回の記事はそれを試してみた作業記録とデモリポジトリの紹介です。
動機
- UI Lab でカラーピッカーのお題が出ました。仲間に入りたいと思いました。
- 自分はデスクトップアプリ屋です。ということで古き時代の デバイス コンテキスト関数 とかを Electron から呼び出して画面全体のカラーピッカーを作ろうとしました。
- しかし少し調べてみると EyeDropper という JavaScript の API があることを知りました。
- ただし EyeDropper は Experimental です。本番利用はできません。
- でもまぁいいじゃない、たまにはさ。仕事じゃ使えないかもしれないけど、そういう無駄かもしれない時間が、きっと、人生を豊かにしてくれるんだよ
ブラウザーの互換性
ﾜｧ…
でも今回の目的は Electron でのお試しなので、 Chrome で動くなら大丈夫でしょう。きっと。
Web サンプル
なるほど、確かにブラウザの外の色もピックできます。
ちなみにこれを悪用するとデスクトップ全体のキャプチャが出来てしまう… ためか、EyeDropper は click イベントなどユーザー操作内からのみ使うことできるとのことです。
Electron で動かしてみる
ソースコードは冒頭の GitHub リポジトリをご覧ください。
そちらを動かしてみた結果はつぎのとおりです。
はい。ウィンドウの外に出られませんでした。
無念。
一応、ウィンドウ内でならピック出来ました。
ちなみに Experimental のためか EyeDropper の型定義は提供されていないようでしたので、 TypeScript の型チェックはエラーします。
さいごに
この記事が EyeDropper に興味を持った方の参考になれば幸いです。
でも EyeDropper は 5年くらい Experimental のままみたいなので、先行きにはちょっと謎を感じます。やっぱりネイティブAPI叩く方がよいのでしょうか。