jQueryでカラーピッカーのおすすめプラグイン3選!

は使わずにjQueryのプラグインでカラーピッカーを導入することでカスタマイズが容易にできたり、対応していないブラウザでもカラーピッカーを実装することが可能になります。この記事ではおすすめプラグイン3選を紹介します。

コンテンツ [表示]

  1. 1jQueryでカラーピッカーを導入したい
  2. 2jQueryでカラーピッカーのおすすめプラグイン3選
  3. 2.1Spectrum.js
  4. 2.2md-color-picker
  5. 2.3jQueryasColorPicker
  6. 3まとめ

jQueryでカラーピッカーを導入したい

HTML5から<input type="color">が登場したことでHTMLのみでカラーピッカーを実装することも可能になりましたが、<input type="color">は使用できないブラウザがあったり、カスタマイズすることがこんなんであったりします。

そこで<input type="color">は使わずにjQueryのプラグインを使用してカラーピッカーを導入することでカスタマイズが容易にできたり、対応していないブラウザでもカラーピッカーを実装することが可能になります。

この記事ではjQueryでカラーピッカーを導入する方法を紹介していきます。

jQueryでカラーピッカーのおすすめプラグイン3選

jQueryのカラーピッカーを導入するためのプラグインはかなり多く存在しています。その中でも3つのおすすめプラグインの導入方法から使い方まで紹介していきたいと思います。

Spectrum.js

まずはSpectrum.jsです。

下記のGitHubのページよりプロジェクトをZIPフォルダでダウンロードしてきましょう。

その後、ダウンロードしてきたZIPフォルダを解凍します。

GitHub - bgrins/spectrum: The No Hassle JavaScript Colorpicker
The No Hassle JavaScript Colorpicker. Contribute to bgrins/spectrum development by creating an account on GitHub.
<link rel="stylesheet" href="css/spectrum.css">

ダウンロードしてきたプロジェクトフォルダ直下のspectrum.cssをlinkタグで読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/spectrum.js"></script>
<script src="js/jquery.spectrum-ja.js"></script>
<script src="js/index.js"></script>

最初に忘れずjQueryを読み込んでください。Spectrum.jsはjQuery依存のプラグインのため、jQueryを読み込まないと動作しません。

その後、プロジェクトフォルダ直下にあるspectrum.jsとi18nフォルダの中にあるjquery.spectrum-ja.jsを順番に読み込んでください。

jquery.spectrum-ja.jsは日本語に翻訳するためにjsファイルです。i18nファルダの中には日本語対応のjsファイルだけでなく、その他の言語対応のjsファイルもあるので、多言語対応のプラグインですね。

index.html

<input class="picker" type="text">

HTMLでカラーピッカーを表示するためのinputタグを用意します。

index.js

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

次はjQueryで先ほど用意したinputタグに対してspectrumメソッドを実行します。

これだけでSpectrum.jsのカラーピッカーの基本的な使い方はできるようになります。

index.js

$(function(){
  $(".picker").spectrum({
    color: "#f00", // 初期値
    showPalette: true, // パレット表示
    palette: [         // パレットで使う色を指定
      ["#f00", "#fff", "#123"],
      ["#a1f", "#999", "#f92"]
    ]
  });
});

オプションを使ってカスタマイズすることもできます。

spectrumメソッドの引数にオブジェクトリテラルでオプションを指定することが出来ます。

md-color-picker

次はmd-color-pickerを紹介します。

先ほどと同様に下記のGitHubのページよりZIPフォルダをダウンロード、解凍します。

GitHub - BennyAlex/material-design-inspired-color-picker: A javascript color picker inspired by material design
A javascript color picker inspired by material design - BennyAlex/material-design-inspired-color-picker
<script src="js/md-color-picker.js"></script>

ダウンロードしてきたプロジェクトフォルダの中にあるdistフォルダ内のmd-color-picker.jsをscriptタグで読み込みます。

md-color-pickerはjQuery依存のプラグインではないため、jQueryを読み込まなくても動作させることができます。

index.html

<md-color-picker id="colorPicker" color-margin="6" colors-per-row="5" 
color-size="40" default-tint="500" fixeMinHeight="true" palette="material-full" 
use-spectrum-picker="true" value="#2196f3"></md-color-picker>

HTMLでカラーピッカーを表示させていくのですが、md-color-pickerでは専用のmd-color-pickerタグと属性を使用して表示します。

color-margin

各色間の余白を指定します。単位はpxです。

colors-per-row

1列当たりに表示する色の数を指定します。

color-size

色の円の大きさを指定します。こちらも単位はpxです。

default-tint

初期状態で表示されるカラーピッカーの色合いです。

palette

次の3つの値が指定できます。

  • material:通常のマテリアルカラーです。
  • material-full:アクセントカラーを含んだマテリアルカラーです。
  • material-accent:アクセントカラーのみのマテリアルカラーです。

これだけでカラーピッカーが表示できます。

ですが、この時点では色の選択や取得を行うことができません。

JaveScriptで色の取得を行っていきます。

index.js

let picker = document.getElementById('colorPicker');
picker.addEventListener('change', function(event){
  let color = event.detail[0];
  this.value = color;
  console.log("color: " + color);
});

HTMLでカラーピッカーを表示したmd-color-pickerタグの要素を取得し、changeイベントを設定します。

選択した色はeventオブジェクトのdetail配列の一番最初の要素に値が格納されています。

this.valueに取得した値を代入することで選択取得を行い、値を送信することができます。

jQueryasColorPicker

最後はjQueryasColorPickerを紹介します。

今までと同様に下記のGitHubからZIPフォルダをダウンロード、解凍しましょう。

GitHub - thecreation/jquery-asColorPicker: ColorInput is a jQuery plugin used to show color picker for a input field.
ColorInput is a jQuery plugin used to show color picker for a input field. - thecreation/jquery-asColorPicker
<link rel="stylesheet" href="css/asColorPicker.css">

まずはプロジェクトフォルダの中にあるdistフォルダ内のcssフォルダのasColorPicker.cssを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery-asColor.js"></script>
<script src="js/jquery-asGradient.js"></script>
<script src="js/jquery-asColorPicker.js"></script>
<script src="js/index.js"></script>

次にスクリプトを読み込んでいきます。

最初にjQueryを読み込みます。

examplesフォルダ内のjsフォルダのjquery-asColor.jsとjquery-asGradient.jsを読み込みます。

最後にdistフォルダ内のjquery-asColorPicker.jsを読み込みます。

また、distフォルダ内にあるimagesフォルダを中身ごとそのまま自分のプロジェクトフォルダ直下に配置しましょう。

index.html

<input type="text" class="colorPicker" value="#000">

HTMLでカラーピッカーを表示するためのinputタグを用意します。

value属性に初期値の色の値を設定します。

index.js

$(function(){
  $('.colorPicker').asColorPicker();
});

先ほど用意したinputタグにasColorPickerメソッドを実行します。

これだけでカラーピッカーを表示することが出来ます。

まとめ

jQueryでカラーピッカーを導入するプラグイン3選を紹介してきました。この記事で紹介したカラーピッカープラグイン以外にも数多く存在します。導入したい自分のプロジェクトにはどれが合っているのか考慮した上で、導入すればよいでしょう。ぜひ、この記事で紹介したプラグインも参考にしてもらえれば幸いです。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

みぎさん
ライター

みぎさん

大阪府の現役システムエンジニアです。WEB制作やWEB開発、ライティングなど幅広く活動しております。 【言語/FW】HTML,CSS,Sass,JavaScript,jQuery,Vue.js,PHP,WordPress,Laravel,Java