カラーコードの色を表示してくれるAtomのpigmentsが便利

2016年から、エディターをSublimeTextからAtomへ変えているのですが
その中でもすばらしいのが、プラグインのpigmentsです。

pigments

Atomで初期インストールするプラグインの記事をみても、軒並みエントリーされているプラグインなので
今更私がここで言うのもおこがましいのですが
とりあえず入れてみたら、これが便利でびっくり!

インストール方法や、機能説明については
既存ですばらしい紹介がたくさんあるので、割愛させていただき
クライアントワークで活用してみて、具体的にどんな場面で素晴らしいと感じたか簡単にまとめてみました。

そう、便利なんだけど、実際には全部の機能は使いこなしていないです。
Show Paletteも良さそうだけど、最初に「おー!」と開いたきりでした。

コード内の色指定位置がすぐ見つかる

プロジェクトが終盤にさしかかってくると、スタイルシートのコードがバカ長くなります。
Sassで簡略化してるのに、気が付くと1000行こえちゃったりします。

そうなってくると、ソースを眺めるだけで色指定してあるコードがどいつか分かる状態は、とてもありがたいです。
私の場合、だいたい20:00を超えてくると頭がゆるくなってくるので、こういう補助機能がじわじわ効いてきます。

カテゴリ毎に色替えしてあるリンクメニューでSassの@eachでリストから色指定することがあるのですが
こいつはカラフルで華やかなので、ソース内の花型です。
pigmentsを使う前までは、こういうeachに変更入れたいとき、自力で探すのを放棄して即検索でしたが
今はさっさとスクロールして到達できます。

また、応用ワザ(?)として
目当ての修正箇所を探すとき
「そう、アイツは色指定のちょっと上に書いていた」
という道標になることもあります。

間違いがわかりやすい

疲れてくると、6桁の16進数が色に見えてくるケースもあるのですが
私はどちらかというと、色をイメージできなくなってくる方向の人です。

pigmentsで色そのものを塗ってくれていると、コピー&ペーストミスなどで間違ったカラーコードを指定していても比較的簡単に気づくことができます。

また、取り違えだけでなく
なんでココに色が付いているんだ?という付け間違えや消し間違えにも気づきやすいです。

複数人でスタイリングを分業していると、たまに
共同作業者の方が、微妙に違うカラーコードを指定しちゃってる事があります。
単純にどちらかのコピペミスのこともあるし、デザインデータ内での色抽出ポイントの解釈が違ってずれてしまうこともあります。
色を見て「なんか違う」と気付きやすい人なら、pigmentsはそういう差異に気づく助けなってくれます。

まだ使いこなせていないShow Paletteへの期待

そうか。複数人制作での使用色の統一という用途なら、私がまだ活用できていないShow Palette機能は優秀ですね。

Show Paletteで表示される色の一覧は、ファイル単位ではなくプロジェクト単位なので
先の作業者がすでに指定してある色を見ることができます。
(Sassの変数に登録されているカラーコードなので、適用できるプロジェクトは絞られるかもしれませんが)
色指定の変数名を適切に指定すれば、活躍しそうです。

関連記事

Pocket