HTMLフォーム要素のカラーピッカーでカラーパレットを出す方法
最近ひさしぶりにHTMLのフォーム要素でカラーピッカーを実装したのですが、その際にUIが変わっていて一瞬パニックになりました。
結果的に従来のカラーパレットを出すことが出来てホッと一息ついたのですが、ぼくと同じようにパニックになる方がいるかも知れないので記録として残しておきます。
カラーピッカーとは
実行例
クリックするとカラーピッカーが表示されます。
HTMLコード
<form>
<input type="color">
</form>実にシンプル。たった1行でブラウザ上にカラーピッカーを実装できるスグレモノです。
何が問題なのか
バージョンによってまたUIが変わるかもなので、2020年11月時点でのスクリーンショットを貼り付けておきます。
エンジニアやデザイナー的にはこれの何が悪いのかって感じでしょうけれど、一般ユーザーがこれを見たらパニくる可能性があります。色の選択肢が多すぎる！と。
なぜ多いと問題なのか。
うちの会社はCMS※を開発してサポート込みで月額サービスとして提供していたりするわけですが、そのサービスを使うのはPCにもデザインにも詳しくない素人さんです。タグなんて当然わからないし覚える気もない。
文字を赤くしたいなら、<span style="color:#ff0000;">赤字</span>と書いてくださいね～、なんて言えるわけがない。
<span style="color:red;">赤字</span>と教えればわかりやすいだろうって？ いえいえ、素人さんにとっては記号が入った時点でアウトです。
高い金払ってシステム使ってるのになんで難しいことさせられないといけないのか、と考えるお客様もいるでしょうし、いろいろ譲歩してくれるお客様でも慣れない作業でダブルクォートを入れ忘れてページを壊してしまうなんてこともありえます。
それに使うのが技術者であっても、このカラーピッカーから特定の同じ色を毎回選ぶのは面倒です。もちろん数字で入れりゃ良いんですけど、それを毎回覚えておくのかって話。色のパターン化、つまりカラーパレットは大事です。
例えば、トップページに表示するキャンペーン情報。ここの文字色がちょっと明るい赤だったり、暗すぎたり、毎回違う、あるいは毎行ごとに違ったらとんでもなく見づらくダサいページになってしまいます。
こういうのはデザイナー的にはCSSのクラス名で管理しますし、なんならWordの見出し設定のように「見出し1」「見出し2」というプルダウンを用意してあげたほうがお客様にとって使い勝手が良いかも知れません。
しかし、恥ずかしながら、てっとり早く実装を行うため、うちではブラウザのカラーピッカー機能に任せている箇所が一部あるのです。元から表示されるカラーパレットが使いやすかったですし。
そして今回、いつのまにかUIが変わっていてパニくったというお話。
インターネットは便利ですね。ちょっとググったらlist属性なるものを発見しました。
カラーパレットを出すにはlist属性を追加するだけでOK
厳密にはカラーパレットというか、単なる色のリスト化ですが、やりたいことはまさにコレです。
実行例
HTMLコード
<form>
<input type="color" list>
</form>あらびっくり。
たったこれだけでカラーパレット式に変わりました。むしろ前より使いやすくなったかも。
指定したカラーだけ表示することも可能
実行例
HTMLコード
<form>
<input type="color" list="color-list">
<datalist id="color-list">
<option value="#000000"></option>
<option value="#ff0000"></option>
<option value="#008000"></option>
<option value="#0000ff"></option>
<option value="#ffff00"></option>
</datalist>
</form>おぉすげぇ…。
「その他」を選ばれるとフルカラーで指定できるようになるため、selectタグのようにUIだけで選択肢を限定するような使い方はできません。
しかしそこはJavaScriptなり、飛び先のサーバーサイドスクリプトでチェックすれば良い話です。
まとめ
- ブラウザ上で色を選択させるには<input type="color">だけで簡単に実装できる
- しかしブラウザごとにUIが違う上、いつのまにかChromeではカラーパレットが表示されなくなっていた
- <input type="color" list>のようにlist属性を追加することでカラーパレットから選ぶようにも出来た
- datalistタグを使えば、選べる色も自由に設定可能だった
list属性はHTML5で規定されているようですし、ずっと前からあったんでしょうねー。ぼくが知らなかっただけでｗ
ともあれ、いつのまにかカラーピッカーのUIが変わっていて驚きましたが、無事解決できてよかったよ～…。
