ブックマークレットで画面上の色を取得する(Eye Dropper APIを利用)

記事
IT・テクノロジー

1. はじめに

画面上の特定部分の色情報を取得するブックマークレットを用意しました。

スポイトツールで画面上の特定の色を取得し、その色情報を持った状態で色情報サービスサイト を開きます。
2021-10-20_001c.min.png

2. ブックマークレット

新たにブックマークを追加し、URLとして以下のコードを登録して利用します。
※ 今のところ、ブラウザは Chrome 限定です。
※ ココナラブログの制限もあり、画像を貼っています。

2021-10-20_007.png

このコード部分を、見やすくすると以下になります。

2021-10-20_006.png

以下の処理を実行しています。

(1) Eye Dropper API を利用して、スポイトツールを表示します。
(2) ユーザーが画面上の特定部分を選択したら、その部分の色番号が取得されます。
(3) その色を URL のパスに指定して、HSL Color Picker というサイトを開きます。

3. 利用方法

(1) 予め先程のリンクをブックマークに登録しておきます。
(2) 登録したブックマークを選択します。
(3) スポイトツールが表示されます。
(4) 画面上の「色を知りたい部分」をクリックします。
2021-10-20_001d.min.png

(5) 取得した色番号をURLのパスに指定して、HSL Color Picker サイトを開こうとします(自動的に)。

ここで、ポップアップがブロックされた場合は、まずアドレスバー上の「ポップアップがブロックされました」の部分をクリックします。

2021-10-20_004a.min.png
次に、上部にあるリンクをクリックします。

2021-10-20_002a1.min.png

(6) HSL Color Picker サイトが開きます。

指定した部分の色情報が表示されているはずです。

2021-10-20_005.min.png

3. おわりに

Chrome 95で Eye Dropper API が使えるようになったため、スポイトツール専用アプリケーションなどを使う必要がなくなりました。

今回は、 HSL Color Picker サイトを利用しましたが、別の色情報サービスサイトを利用することもできます。

ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す