皆さんこんにちはFascodeNetworkのブログスケジュール管理などを行っているなおこです。
今回はウェブ制作を行う際に既存サイトで使われているカラーコードを取得したいときスムーズに行える便利な拡張機能をご紹介したいと思います。
その拡張機能の名は【ColorPick Eyedropper】です。
ColorPick Eyedropperとは
ColorPick Eyedropperは Sam Larisonさんが開発している拡張機能で一般的にウェブサイトのカラーコードを取得したいときはデベロッパーツールを開いて該当cssのプロパティから調べたり、画像の場合はダウンロードしてから調べるなど手間がかかります。
その作業は必要なくなりクリックするだけで取得できるようになります。
そんな便利な拡張機能を紹介します。
ColorPick Eyedropperのウェブサイト
ColorPick EyedropperのChromeウェブストア
Firefoxのアドオンページ
今回使うPCスペックや実行環境
- OS : Alter Linux(実質Arch Linux)とWindows10Proデュアルブート
- MB : B450M Steel Legend
- CPU : AMD Ryzen 5 5600x
- GPU : NVIDIA GTX 960
- RAM : 32GB
- HDD : 4TB
- SSD : 256GB m.2 (２０２２/９/１５以降のブログには搭載)
上記の環境にGoogle chromeを導入しColorPick Eyedropperをインストールして使ってみます。
ColorPick Eyedropperをインストールしていく
早速ColorPick Eyedropperをインストールして実際に使って紹介したいと思います。
軽く調べてたところ、Google ChromeやMicrosoft Edge、OperaやBraveはほぼほぼ同じ方法でインストールすることができます。
Firefoxだけ独自のストアでインストールすることができます。
Google Chrome、Microsoft Edge、Opera、Braveの場合
上記のURLに飛び、右上にある水色のchrome に追加するというボタンを押します。
その後権限の許可が求められるので拡張機能の追加をクリックすることで拡張機能のインストールを行うことができます。
Firefoxの場合
Firefoxの場合は上記のURL飛びAdd to Firefoxをクリックし出てきたポップアップのAddをクリックしてインストールします。
ColorPick Eyedropperを使ってみる
無事インストールできたので実際に使ってみたいと思います。
カラーコードを取得する
と言っても簡単で拡張機能のアイコンが並んでいるところにColorPick Eyedropperのアイコンをクリックします。
アイコンをクリックすると右上にポップアップとマウスの先のカーソルに右上と同じポップアップが表示されます。
取得したい色の場所でクリックするとすぐにクリップボードにコピーされ、手軽にカラーコードを取得することができます。
取得する形式はrgbや16進数カラーコードです。
オプション設定
ポップアップの下に歯車マークがありますがそちらからオプション設定を行うページに飛ぶことができます。
また、オプションページでは様々な設定を行うことができますがほぼほぼ使わないと思います。
ページをリフレッシュする
実はこの拡張機能にはページをリフレッシュする機能がついています。f5とかリロードでよくねと思うけど紹介します。
ポップアップの下の左から２番目にまる矢印がありますそこをクリックすることで、ページのリフレッシュする事ができます。
ウィンドウでポップアップを表示する
この拡張機能にはポップアップをウィンドウとして動作させる機能があります。
こちらは別ウィンドウに移ってもウィンドウ化することによりポップアップを消えないようにすることができます。
まる矢印と同様に一番下のアイコンの一番右にピクチャーインピクチャーなどに使われているようなアイコンがあるのでそれをクリックするとウィンドウ化することができます。
ColorPick Eyedropperのメリットやデメリット
ColorPick Eyedropperを１年以上使って感じた2022-03-03時点でのメリットやデメリットをまとめたいと思います。
メリット
- デベロッパーツールを開かずにカラーコードを取得する事ができる。
- 画像のカラーコードも取得できる。
- 拡大して色を選択することができる。
- オプションページから色の履歴を見ることができる。
- rgbや16進数カラーコードにも対応
デメリット
- 若干日本語がおかしいことがある。
- 最終更新日が古い
最終更新日が２０２０年という点がセキュリティ的に気になりますがそれ以外は比較的に安定して動作して手軽にカラーコードを取得できる点などはかなり評価できます。
ウェブページの制作を行ってる方にはぜひぜひ使ってみてほしい拡張機能ですね。
最後に
今回はウェブページの制作に使える便利な拡張機能ColorPick Eyedropperを紹介してみました。
若干古い拡張機能なので心配になることもありますが、カラーコードを手軽に取得できるのは良いですね。
それでは次のブログでお会いしましょう。
コメント