[jQuery] Spectrum Colorpickerの使い方｜WEB用カラーピッカー

Spectrum Colorpickerとは

WEBページを構成するコンポーネントの中にユーザーに色を選択さえるためのものが存在します。これはカラーピッカーと呼ばれます。カラーピッカーは、文字を入力させたるテキストボックスや項目を選択させるチェックボックスなどと比べ使用頻度が低いので見る機会は少ないですが、クリエイター系のWEBページなどでよく使われます。

カラーピッカーにはWEBブラウザが標準で備えているものと、JavaScriptを使って機能を実現しているものが存在します。Spectrum Colorpickerは後者であり、jQueryプラグインとして機能します。

WEBブラウザ標準のカラーピッカー

Spectrum Colorpickerの実際の表示

はじめに、Spectrum Colorpickerを使うことで、どんなカラーピッカーが使えるようになるのかを紹介します。表示スタイルが豊富である点もSpectrum Colorpickerの特徴です。

Spectrum Colorpickerの導入方法

spectrum ダウンロードページ

ページに移動したら、右上のDownload Zipボタンを押してアーカイブファイルをダンロードします。アーカイブファイルを解凍するといくつかファイルが出来上がりますが、使うのは以下の2つです。取り出して任意のディレクトリへ移動します。

• ・spectrum.css
• ・spectrum.js

Spectrum Colorpickerの使い方

Spectrum Colorpickerの基本構成での使い方を説明します。

必要なファイルの読み込み

▼jQuery本体ファイルと、ダウンロードしたspectrumのJSファイルとCSSファイルの2つを読み込みます。読み込むファイルはこれだけです。他のカラーピッカープラグインはグラデーションパレット用に画像ファイルを使うことが多いですがSpectrum Colorpickerは画像ファイルを使うことなく表現しています。

<script src="(ディレクトリ)/jquery.js"></script>
<script src="(ディレクトリ)/spectrum.js"></script>
<link rel="stylesheet" href="(ディレクトリ)/spectrum.css">

プラグインを実行

▼Spectrum Colorpickerは<input>要素に対して使います。jQueryで<input>要素のjQueryオブジェクトを作成しspectrum()メソッドを実行します。

<input id="color">
<script>
$('#color').spectrum();
</script>

必要な操作は以上です。実際の表示は下のようになります。

上記は基本構成での実行結果となります。Spectrum Colorpickerには初期色や表示スタイルを変えるためのオプションが豊富に用意されていますので、それらを使うことで多様な表現を行うことができます。

オプション

Spectrum Colorpickerに用意されているオプションについて解説します。

let option = {
	プロパティ名1 : 値,
	プロパティ名2 : 値
};
$(セレクタ).spectrum(option);

$(セレクタ).spectrum({color:'#00f', showAlpha:true});

初期色を設定する

カラーピッカーの初期色を設定するにはcolorプロパティを設定します。

$(セレクタ).spectrum({color:'#00f'});

常に開いた状態で表示する

カラーピッカーを常に開いた状態で表示させるにはflatプロパティを設定します。cancelボタンやchooseボタンを押してもカラーピッカーは閉じなくなります。

$(セレクタ).spectrum({flat:true});

色情報入力用のテキストボックスを追加する

色を表す文字列をキーボード入力できるようにするにはshowInputプロパティを設定します。カラーピッカーのchooseボタンの上にテキストボックスが表示されるようになり、ユーザーが任意の文字列を入力できるようになります。

色情報文字列のフォーマットを指定するにはpreferredFormatプロパティを使います。

preferredFormatプロパティに指定できる値は以下の通りです。

//テキストボックスを追加
$(セレクタ).spectrum({showInput:true});
//文字列のフォーマットを「#xxxxxx」形式に設定
$(セレクタ).spectrum({showInput:true, preferredFormat:'hex'});

カラーピッカーを開いた時点での色を表示させる

カラーピッカーを開いた時点での色を表示させるにはshowInitialプロパティを設定します。カラーピッカー左下に変更前の色と現在の色が表示されるようになるので色の変化の比較が行いやすくなります。ここにマウスカーソルをホバーさせると色の情報がツールチップで表示されます。変更前の色の領域をクリックすると現在の色が変更前の色に戻されます。

$(セレクタ).spectrum({showInitial:true});

色の未選択状態を許可する

色の未選択状態を許可するにはallowEmptyプロパティを設定します。このプロパティ値をtrueにしたとき、カラーピッカー右上に×ボタンが表示されるようになります。これをクリックすると色が未選択状態に設定されます。また、colorプロパティを指定していない場合は、初期色も未選択状態に設定されます。

$(セレクタ).spectrum({allowEmpty:true});

透明度を指定可能にする

色の透明度を指定可能にするにはshowAlphaプロパティを設定します。カラーピッカーのchooseボタンの上に透明度を指定するためのバーが表示されるようになります。

$(セレクタ).spectrum({showAlpha:true});

カラーピッカーの展開を無効化する

カラーピッカーの展開を無効化するにはdisabledプロパティを設定します。カラーピッカーを開くためのボタンが無効化され、マウスクリックしてもカラーピッカーは開かなくなります。なお、同時にflatプロパティをtrueに設定した場合は、カラーピッカーは開いた状態になり、色も選択できるので効果はありません。

$(セレクタ).spectrum({disabled:true});

単色カラーパレットを表示する

$(セレクタ).spectrum({showPalette:true});

単色カラーパレットのみを表示する

グラデーションパレットを表示せず、単色のカラーパレットのみを表示させるにはshowPaletteOnlyプロパティを設定します。単色パレットのエリアに、グラデーションパレットの表示/非表示を切り替えるボタンを追加するにはtogglePaletteOnlyプロパティを設定します。togglePaletteOnlyプロパティはshowPaletteOnlyプロパティをtrueに設定したときにしか効果が発生しません。グラデーションパレットの表示/非表示ボタンのラベル文字はtogglePaletteMoreTextプロパティとtogglePaletteLessTextプロパティで設定可能です。

//常に単色パレットのみ表示
$(セレクタ).spectrum({showPaletteOnly:true});

//初期状態では単色パレットのみ表示
//ボタンクリックによりグラデーションパレットの表示/非表示を切り替える
$(セレクタ).spectrum({showPaletteOnly:true, togglePaletteOnly:true});

//グラデーションパレットの表示/非表示ボタンのラベル文字を設定する
$(セレクタ).spectrum({
	showPaletteOnly: true,
	togglePaletteOnly:true,
	togglePaletteMoreText: '詳細を開く',
	togglePaletteLessText: '詳細を閉じる'
});

カラーピッカー外をクリックしたときの動作

カラーピッカー外をマウスクリックしたとき、カラーピッカーは閉じられます。その際に、現在選ばれている色で変更を確定させるか、変更前の色に戻すかを指定することができます。clickoutFiresChangeプロパティより設定します。

//現在選ばれている色で変更を確定する
$(セレクタ).spectrum({clickoutFiresChange:true});
//変更前の色に戻す
$(セレクタ).spectrum({clickoutFiresChange:false});

キャンセルボタンと選択ボタンのラベル文字を設定する

キャンセルボタンのラベル文字を指定するときはcancelTextプロパティ、選択ボタンのラベル文字を指定するときはchooseTextプロパティを使用します。

$(セレクタ).spectrum({cancelText:'キャンセル', chooseText:'OK'});

<div>要素にクラスを追加する

一部の<div>要素に任意のclass名を追加することができます。特定のカラーピッカーのみスタイルの変更をする場合などにclassを追加しておくことでスタイルの適用が行いやすくなります。カラーピッカーの<div>要素はcontainerClassNameプロパティ、カラーピッカーを開くためのボタンの<div>要素はreplacerClassNameプロパティにそれぞれclass名を指定します。

$(セレクタ).spectrum({containerClassName:'demo_container', replacerClassName:'demo_replacer'});

div.demo_container { background-color: #ccf;}
div.demo_replacer { background-color: #cfc;}