Sublime Text 3：色のプレビューとPhotoshop風カラーピッカー

こんにちは、さち です。

先日、「Sublime Text 3」に
カラーコードをインラインプレビュー（色見本）で確認できる「ColorHelper」
Photoshop 風のカラーピッカーが使える「ColorPicker」
2つのパッケージを新しく導入しました。

今回は、これらのパッケージの機能や設定などについて
書いていきます。

カラーコードの横に色見本を表示する「ColorHelper」

概要

1. パッケージ「ColorHelper」を導入すると
   カラーコードの横にインラインプレビュー（色見本）が表示されるようになります。
   
2. インラインプレビューをクリックすると
   カラーコードの記述形式、パレットやピッカーからの色選択
   現在の色をパレットにお気に入り登録（mark）ができます。
   
3. カラーピッカーはこんな感じ。エクセルの「色の設定」みたいですね。
   

設定

下記解説は、Sublime Text 3 を Japanize によって日本語化しています。
英語表示で使用している場合は適宜読み替えて下さい。

1. メニューの「基本設定」→「Package Settings」と進みます。
   
2. 「ColorHelper」→「Settings」と進みます。
   
3. 「color_helper.sublime-settings - User」の方に変更する設定を記述します。
   初期設定の方に各項目の解説（英語）があるので大体分かると思います。
   私は下記のように設定を変更しました。

   {
     // インラインプレビュー(色見本)の位置を右に
     "inline_preview_position": "right",
     // カラーボックスのサイズを小さく
     "graphic_size": "small",
     // カラーボックスをクリックしたらカラーピッカーを開く
     "click_color_box_to_pick": "color_picker",
     // カラーピッカーに「ColorPicker」パッケージを使う
     "use_color_picker_package": true,
     // カラーコードを大文字で記述
     "upper_case_hex": true,
   }

Photoshop 風のカラッピッカーを実装する「ColorPicker」

概要

「ColorPicker」パッケージを導入すると
上のような、カラッピッカーを使用できるようになります。

Photoshop 風のデザインのカラーピッカーなので
Photoshop に慣れ親しんでいる人に使いやすいと思います。

前述の、「ColorHelper」と連携することで
「ColorHelper」のカラーピッカーを「ColorPicker」のものに変更できます。

ただ、カラーピッカーの動作が若干重いのが難点です。

設定

「ColorPicker」を起動するショートカットキーが機能しなかったので
ユーザのキーバインドとして登録します。

下記解説は、Sublime Text 3 を Japanize によって日本語化しています。
英語表示で使用している場合は適宜読み替えて下さい。

1. メニューの「基本設定」→「キーバインド - ユーザ」と進みます。
   
2. 「ColorPicker」を表示するショートカットキーを記述します。
   下記例の場合、「Ctrl + Shift + C」キーを押すとカラーピッカーが表示されます。

   {
     //「ColorPicker」を起動するショートカットキー
     { "keys": ["ctrl+shift+c"], "command": "color_pick" },
   }