jQueryだけでカラーピッカーを自作する【DLサンプルソース付き！】

こんにちは、エンジニアの市川です！
今回はJavascriptライブラリjQueryのみを使用して、カラーピッカーを作成する方法を紹介します。

デモページ

カラーピッカーを自作しようと思ったきっかけは、入力した数値の変換動作や、ドラッグによる要素の移動等、Web制作をしていてあまり経験がなかった技術を勉強するのに良いかな～と思ったからです。
実際カラーピッカーを埋め込むようなWeb制作の案件は経験ありませんし、周りの人から聞いたこともありません。
しかし、自分がやれたらいいな～と思うような技術は、身につけたいと考える方も少しはいるのでは？と考え今回ブログに書くことにしました。

コードはとても長いです。
長いのでファイルをダウンロードして読み進めていただくことを前提にしています。
jqueryでCDNを使っているのでネットワークへのアクセスは必要ですが、ローカルフォルダを直接参照することで動作が確認できます。
phase毎にフォルダを作成し、その時点で必要になるファイルを構成しています。
といってもphase1でレイアウトを全て作成するため、phaseによるフォルダの内容の差はjsファイルのみの変更になります。

ダウンロード

カラーピッカーの仕様

• 現在のRGB、HSVの値を表示し変更もできるようにする
• RGBは0~255、Hは0~360、SVは0~255までの数値が入力されるものとする
• 色相バーの作成（横にドラッグ&ドロップができて、カーソルの色は彩度100%、明度100%の状態で色相が切り替わる）
• 彩度を横に0~100%、明度を縦に100%~0、一番右上が現在の色相バーのカーソルの色になるカラーパレットの作成（縦横にドラッグ&ドロップができて、カーソルの色がRGBの色に切り替わる）
• RGBの値が変更されるとき、SVG画像にRGBを反映させる

phase1
カラーピッカーをhtmlとcssでレイアウト

• カラーパレットは左から右に白から選択された色相の色まで変化させた背景色と、下から上に黒の透明度を1から0に変化させた背景色を重ねる
• 色相バーは左から右に色相0°から60°区切りで360°までのカラーコードを変化させた色を設定
• 入力フォームの初期値はR(255)G(0)B(0)、H(0)S(0)V(255)に設定

phase2
RGBをHSVに変換する機能とHSVをRGBに変換する機能を実装

RGBとHSVには相関関係があり、公式のようなものがあります。
理解しやすかった参考サイトが下記になります。
https://www.peko-step.com/tool/hsvrgb.html

RGBをHSVに変換する機能を記述したjsの該当箇所は「returnHSV()」になり、下記の処理を記入しています。

• RGB入力フォームの値を取得
• RGB入力フォームに不正な値の入力があったとき、適正値に変更しRGB入力フォームに値を再設定
• 入力フォームに入力された値が数字でないと比較が正しくできないため整数値に統一
• RGBの最大値・最小値・大きさの順番が変換に必要なため、変数rgbDescに’R’,’G’,’B’を大きい順に設定
• 変数rgbDescから最大値・最小値を設定し、変換計算式に当てはめてHSVを取得し設定

HSVをRGBに変換する機能を記述したjsの該当箇所は「returnRGB()」になり、下記の処理を記入しています。

• HSV入力フォームの値を取得
• HSV入力フォームに不正な値の入力があったとき、適正値に変更しHSV入力フォームに値を再設定
• 入力フォームに入力された値が数字でないと比較が正しくできないため整数値に統一
• 最大値・最小値を設定し、変換計算式に当てはめてRGBを取得し設定

phase3
RGB、HSVの変換機能を使用時、カラーパレット右上のRBGを設定

js該当箇所「function paletteBg()」

• 変換計算式に現在の色相、彩度255、明度255の値を使ってカラーパレット右上のRGBの値を取得し設定

phase4
RGB、HSVの変換機能を使用時、色相バーとカラーパレットのカーソルの位置とカーソルの色を設定

js該当箇所「function hueCircle()」

• 色相バーの幅を取得し、色相が0のときカーソルの位置が一番左になり、色相が360になるとカーソルの位置が一番右になるように値を設定
• カラーパレット右上のRGBの値を色相バーのカーソルの色に設定

js該当箇所「function paletteCircle()」

• カラーパレットの幅と高さを取得し、彩度が0のときカーソルの位置が一番左になり、彩度が255になるとカーソルの位置が一番右になり、明度が0のときカーソルの位置が一番下になり、明度が255になるとカーソルの位置が一番上になるように値を設定
• RGBの値をカラーパレットのカーソルの色に設定

phase5
色相バーをドラッグすることで、色相バーのカーソルを動かし、カーソル位置の色相を取得設定し、「returnRGB()」を呼び出す

js該当箇所「function dragHuebar()、function changeFue(e)」

• 色相バーをドラッグすることで発生するイベント以外に、新たなイベントを発生させない処理をする
• ドラッグ操作がタッチ操作かマウス操作かによって、jsのコマンドが異なるため、どちらの操作か判定をし処理を分岐
• 色相バーのカーソル位置による色相を取得し設定、色相が変更されるため、HSV入力フォームを変更した時の処理「returnRGB()」を呼び出す

phase6
カラーパレットをドラッグすることで、カラーパレットのカーソルを動かし、カーソル位置の彩度と明度を取得設定し、「returnRGB()」を呼び出す

js該当箇所「function dragPalette()、function changePalette(e)」

• カラーパレットをドラッグすることで発生するイベント以外に、新たなイベントを発生させない処理をする
• ドラッグ操作がタッチ操作かマウス操作かによって、jsのコマンドが異なるため、どちらの操作か判定をして処理を分岐
• カラーパレットのカーソル位置による彩度と明度を取得し設定、彩度と明度が変更されるため、HSV入力フォームを変更した時の処理「returnRGB()」を呼び出す

phase7
SVG画像にパレットのカーソルの色を設定

js該当箇所「function paletteCircle()」

• 「function paletteCircle()」最下部にSVG画像のfillパラメーターにパレットのカーソルの色を設定する記載を追加

以上で今回作成しようとしていたカラーピッカーが完成です。
数値の連動やドラッグによる操作等、参考になれば嬉しいです。