はじめに

Simonwep/pickr でカラーピッカー(Color Picker)を作成する方法

NPM でインストール可能なカラーピッカー(Color Picker)

TL;DR

  • Simonwep/pickr について簡単に整理した
  • テーマが3つ用意されており、細かいカスタマイズも簡単にできる
  • イベントが一通り揃っておりユーザー操作に合わせて独自処理を行うなども簡単に対応できる
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
      1. 基本
      2. 詳細設定
      3. イベント
      4. その他のメソッドやプロパティなど
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ npm ls @simonwep/pickr
@simonwep/pickr@1.7.4 | MIT | deps: 2 | versions: 51

詳細

セットアップ

参考: Getting Started - Node

npm i や yarn add でインストール。

1
$ npm i @simonwep/pickr

参考: Getting Started - Browser

CDN も利用可能。classic, monolith, nano から好きなテーマを1つ、JS を Modern or ES5 のどちらか1つを読み込む。(わかりやすさのためにコメントアウトしている)

1
2
3
4
5
6
7
8
9
10
11
12
<!-- テーマ -->
<!-- classic -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/>
<!-- monolith -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> -->
<!-- nano -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/> -->

<!-- Modern -->
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<!-- es5 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script> -->

使い方

基本

参考: Usage

カラーピッカーを表示するための要素を作成して、Picker.create でマウント。

1
<div id="pickr"></div>
1
2
3
4
5
6
7
8
9
const picker = Picker.create({
  el: '#pickr',
  theme: 'classic',
  components: {
    preview: true,
    opacity: true,
    hue: true,
  },
});

詳細設定

参考: Options

上記セクションに詳細設定に関するオプションが書かれている。個人的に使いそうなものを抜粋。

  • el: カラーピッカーのマウント先
  • theme: テーマ(classic or monolith or nano)
  • sliders: 透明度(opacity)/彩度(hue) のスライダーの方向
  • comparison: 変更前後の色の比較(false にすると色を変えると即反映)
  • default: 色の初期値
  • swatches: 色見本セット (ユーザーがお手軽に色変更できるように準備するイメージ)
  • defaultRepresentation: テキスト入力を受け付ける場合の表示方法デフォルト
  • components: 表示要素の選択
  • i18n: ボタンなどのテキストの変更
theme について

参考: Themes

classic, monolith, nano が使用可能。それぞれの見た目の違いは公式画像が分かりやすい。

nano は CSS の grid を使っているため、一部ブラウザでは動かないとのことなので注意。

当たり前だが、対応する CSS ファイルを読み込んでおく必要がある。(全部読み込んでいる場合は特に気にしなくて良い)

components について
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
components: {
  palette: true,   // パレット
  preview: true,   // プレビュー
  opacity: true,   // 透明度スライダー
  hue: true,       // 彩度スライダー
  interaction: {
    hex: false,    // HEX 表示
    rgba: false,   // RGBA 表示
    hsla: false,   // HSLA 表示
    hsva: false,   // HSVA 表示
    cmyk: false,   // CMYK 表示
    input: false,  // テキスト入力エリア
    cancel: false, // キャンセルボタン (Window 閉じる)
    clear: false,  // クリアボタン (Window 閉じない)
    save: false,   // セーブボタン
  },
},
i18n について
UI 部分
  • 'ui:dialog': ‘color picker dialog’,
  • 'btn:toggle': ‘toggle color picker dialog’,
  • 'btn:swatch': ‘color swatch’,
  • 'btn:last-color': ‘use previous color’,
  • 'btn:save': ‘Save’,
  • 'btn:cancel': ‘Cancel’,
  • 'btn:clear': ‘Clear’,
aria-labels

参考:

イベント

参考: Events

イベント 概要 引数
init 初期化完了時 PickrInstance
hide カラーピッカーが閉じられた時 PickrInstance
show カラーピッカーが表示された時 PickrInstance
save 色の保存時。 クリアボタン経由での発火時は色(第一引数) が null HSVaColorObject or null, PickrInstance
clear クリアボタン クリック時 PickrInstance
change 色の変更時。保存していなくても発火する。 HSVaColorObject, PickrInstance
changestop 色の変更完了時 PickrInstance
cancel キャンセルボタン クリック時 PickrInstance
swatchselect 色見本の選択時 HSVaColorObject, PickrInstance

Pickr.create で生成したインスタンスに対して、 .on でハンドラを設定する。

1
2
3
4
5
6
const pickr = Picker.create({/* ... */});
pickr
  .on('init', instance => console.log({ on: 'init', instance }))
  .on('hide', instance => console.log({ on: 'hide', instance }))
  // ...
  .on('swatchselect', (color, instance) => console.log({ on: 'swatchselect', color, instance }));
HSVaColorObject について

参考: The HSVaColor object

save, change, swatcheselect のイベントハンドラに渡される HSVaColorObject について。

toRGBA などのメソッドを利用可能、Red/Green/Blue/Alpha の各値が Array(配列) で返却される。

toString() で CSS でそのまま利用可能な文字列として取得できる、toString(3) とすると有効桁数を変更可能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// ********** HSVA **********
color.toHSVA();
// => [264.37499999999994, 60.115157173980705, 32.8125, 0.82]
color.toHSVA().toString();
// => "hsva(264.37499999999994, 60.115157173980705%, 32.8125%, 0.82)"
color.toHSVA().toString(3);
// => "hsva(264.375, 60.115%, 32.813%, 0.82)"

// ********** HSLA **********
color.toHSLA();
// => [264.37499999999994, 42.974746912893536, 22.949857026143793, 0.82]
color.toHSLA().toString();
// => "hsla(264.37499999999994, 42.974746912893536%, 22.949857026143793%, 0.82)"
color.toHSLA().toString(3);
// => "hsla(264.375, 42.975%, 22.95%, 0.82)"

// ********** RGBA **********
color.toRGBA();
// => [53.80655924479162, 33.372395833333336, 83.671875, 0.82]
color.toRGBA().toString();
// => "rgba(53.80655924479162, 33.372395833333336, 83.671875, 0.82)"
color.toRGBA().toString(3);
// => "rgba(53.807, 33.372, 83.672, 0.82)"

// ********** HEXA **********
color.toHEXA();
// => ["36", "21", "54", "D1"]
color.toHEXA().toString();
// => "#362154D1"
color.toHEXA().toString(3);
// => "#362154D1"

// ********** CMYK **********
color.toCMYK();
// => [35.693374572051084, 60.115157173980684, 0, 67.1875]
color.toCMYK().toString();
// => "cmyk(35.693374572051084%, 60.115157173980684%, 0%, 67.1875%)"
color.toCMYK().toString(3);
// => "cmyk(35.693%, 60.115%, 0%, 67.188%)"

その他のメソッドやプロパティなど

参考:

JS 側からカラーピッカーを表示したり閉じたり、デフォルトオプションを設定したりもできる。詳しくは上記を参照。

まとめ

  • Simonwep/pickr について簡単に整理した
  • テーマが3つ用意されており、細かいカスタマイズも簡単にできる
  • イベントが一通り揃っておりユーザー操作に合わせて独自処理を行うなども簡単に対応できる

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list