Spectrumの使い方 (Webページにカラーピッカーを導入する) #JavaScript

SpectrumはWebページにカラーピッカーを導入できるjQueryプラグイン(MIT)で、下記のような特長があります。

設定やCSSで外観を好きにカスタマイズすることができる (下記)
HTML5の <input type="color"> がサポートされていないブラウザでも使用できる (公式ではIE 6+, Chrome 4+, Firefox 3.6+, Safari 4+, Opera 11.1+, iOS のサポートを謳っています)

標準状態

不透明度、パレット、コード入力などすべてのオプションを使用して日本語化した場合

パレットのみにした場合

※カラーピッカーのライブラリはだいたい「グラデーションの中をクリックして色を選ぶ」という形式のものが多いですが、特に業務で使うシステム(管理画面など)においては使う人がそんなに多彩な色を選びたいと思うことは少ないですし、逆に「選んだ色を一覧画面などで表示して並べたら微妙に違う色がたくさんできていた」などの体験が使う人のストレスになりやすいので、Spectrumを使用しないとしても選択肢を絞っておいたほうがよいケースが多い気がします。
(Spectrumでは、パレットの色は好きな色を設定できます)

この文書では、Spectrumの基本的な使い方を説明します。

使用準備

Spectrumを使用するには、最低限jQuery, SpectrumのJS, CSSファイルが必要です。

配布サイト(github)にCDNやnpmでのインストール方法の記載がありますが、手っ取り早く試すには下記のHTMLを使用してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/i18n/jquery.spectrum-ja.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
    <script>
        jQuery(function($){
            $("#picker").spectrum();
        });
    </script>
    <title></title>
</head>
<body>
    <input type="text" id="picker">
</body>
</html>

※ </body>の手前に<script>を置くなどの変更は自由にしてください。
※ jQueryは3.1.1より古いバージョンでも動作します。jquery.spectrum-ja.min.js は日本語化ファイルですが、Spectrumの文字部分は「選択」と「中止」しかないため除去してもよいです。

<input> にSpectrumを適用する

例えばある<input>にid="picker"というidが付いている場合、下記のコードでカラーピッカーにすることができます。

jQuery(function($){ 
    $("#picker").spectrum(); 
});

※ jQuery(function($){}) は $(function((){}) でも $(document).ready(function(){}) でも大丈夫です。(おおまかには意味的に一緒です)
※ この例ではidを使用していますが、classでもよいです。classの場合は #picker の部分が .picker になります。

確認用URL: https://jsfiddle.net/g7L1unpc/

初期値を設定する (color)

ピッカーに初期値を設定したい場合は、適用する <input> のvalueにvalue="#ff0000" のようにカラーコードをセットするか、Spectrumのcolorでカラーコードを設定します。

jQuery(function($){ 
    $("#picker").spectrum({
        color: "#ff0000" // 初期値
    });
});

※ Spectrum側で設定した場合。確認用URL: https://jsfiddle.net/8coa0xk5/

設定できるカラーコードの形式は下記です。(おそらく #rrggbb くらいしか使わない気がします)

形式	例
色名	red
RGB	#fff
〃	fff
〃	#ffffff
〃	ffffff
〃	rgb(255, 0, 0)
〃	rgb 255 0 0
HSL	hsl(0, 100, 50)
〃	hsl(0, 100%, 50%)
〃	hsl 0 100 50
〃	hsl 0 100% 50%
HSV	hsv(0, 100%, 100%)
〃	hsv(0, 100, 100)
〃	hsv 0 100% 100%
〃	hsv 0 100 100

※ 公式の説明には上記しかありませんでしたが、公式の別の設定の例を見ると rgba() なども使えるようです。

外観をパレットのみにする (showPaletteOnly)

外観をパレットのみにしたい場合は、showPaletteOnlyという設定を有効にして、必要な色をpaletteに指定します。

jQuery(function($){
    $("#picker").spectrum({
        color: "#ffffff", // 初期値
        showPaletteOnly: true, // 外観をパレットのみにする
        palette: [ // パレットで使う色を指定
            ["#ffffff", "#cccccc", "#999999", "#666666", "#333333", "#000000"], 
            ["#f44336", "#ff9800", "#ffeb3b", "#8bc34a", "#4caf50", "#03a9f4", "#2196f3"]
        ]
    });
});

確認用URL: https://jsfiddle.net/9k70pqyp/

例では2段になっていますが、「 [ ], 」の部分が段になるので好きな形に増やしたり減らしたりできます。(カンマは最後の段にはあってもなくてもよいです。IE8以下だと最後にカンマがあるとエラーになります)

その他の設定

Spectrumにはその他にも様々な設定があります。下記は公式のピッカーにあるコードを流用して、設定の意味がわかるように一部調整したものです。

jQuery(function($){
    $("#picker").spectrum({
        color: "#ECC", // 初期値
        flat: false, // trueの場合、クリックしなくてもピッカーが表示されるようにする
        showInput: true, // コードの入力欄を表示する
        showAlpha: true, // 不透明度の選択バーを表示する
        disabled: false, // trueの場合、ピッカーを無効にする
        showPalette: true, // パレットを表示する
        showPaletteOnly: false, // true の場合、パレットのみの表示にする
        togglePaletteOnly: false, // true の場合、パレット以外の部分はボタンで表示切替する
        togglePaletteMoreText: "詳細", // togglePaletteOnlyがtrueの場合のボタン名(開く)
        togglePaletteLessText: "閉じる", // togglePaletteOnlyがtrueの場合のボタン名(閉じる)
        showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する
        maxSelectionSize: 10, // 選択した色を記憶する数の上限
        hideAfterPaletteSelect: false, // true の場合、パレットを選んだ時点でピッカーを閉じる
        clickoutFiresChange: true, // ピッカーの外側をクリックしてピッカーを閉じた際にchangeイベントを発生させる
        showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する
        allowEmpty: true, // 「指定なし」を許可する
        chooseText: "OK", // 選択ボタンのテキスト
        cancelText: "キャンセル", // キャンセルボタンのテキスト
        showButtons: true, // ボタンを表示する
        containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名
        replacerClassName: "", // ピッカーを表示させるボタンのクラス名
        preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等)
        localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー
        palette: [ // パレット
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
            "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ],
        selectionPalette: [], // 選択色のパレットの初期値

        // 値の変更(確定)時イベント
        change: function(color){
        },
        // 値の変更(未確定)時イベント
        move: function(color){
        },
        // ピッカーが閉じた時のイベント
        hide: function(color){
        },
        // ピッカーの表示イベント
        show: function(color){
        },
        // ピッカーの表示直前のイベント。return falseでピッカーの表示を阻害できる
        beforeShow: function(color){
        },
    });
});

確認用URL: https://jsfiddle.net/rgg45f3u/