カラーピッカーを自分の作るサイトに付けるためにJSColorを使う

今、構想中のWEBサービスがあります。それを作るために色々な技術を試しています。作ろうと思っているサービスで色が簡単に、自由に指定できるようにしたいなーと思うので、パレットから色を指定できるようなモノを簡単に付けたいと思いました。
検索してみて簡単に付けられそうなJSColorというものを見つけたのでその使い方について書いてみます。

JSColorとは?どんなことができるもの?

http://jscolor.com/

JSColorのサイトです。こちらにデモサイトがあるのでいじってみることができます。

テキストボックスをクリックするとカラーパレットが開くので、指定したい色をクリックするとその色の色コードがテキストボックスに入ります。

このような指定が簡単にできるJSライブラリです。

JSColorをインストールする

ダウンロードページ

このページの、 jscolor-1.4.4.zip をクリックして、PCの任意の場所に保存します。保存したzipファイルを解凍します。

jscolorというフォルダができて

こんな感じのファイルが入っています。demo.htmlがあるのでブラウザで開くと、

先ほどWEBサイトで見たようなHTMLになっていました。

JSColorを自分のHTMLに組み込んでみる

組み込む前に形だけ作ってみました。

index.html

見た感じを良くするためにbootstrapを入れていますが、form部分は特に何も指定してません。当然ですがこの状態だと

クリックしても何も起こりません。このフォームにJSColorを組み込んでみます。

JSColorを使ってHTMLのテキストボックスで色を指定できるようにする

ダウンロードして解凍してできた jscolor というフォルダをこのHTMLが置いてある場所に置きます。

そして、コードに、

こんな感じで1行ソースを追加して、JSColorが使えるようにします。

どこでJSColorが使えるようにするのかは入力欄の、

のように変更します。class=”color” を追加するとこのJSColorの機能でカラーピッカーが表示されるようになります。これで実行すると、

クリックしたときにカラーピッカーが使えるようになります(^^)/。簡単ですね。

通常、色指定をするときは頭に # がついています。今は16進数だけなのでそれが出るようにオプションを指定します。

class=”color” としたところにオプションで {hash:true} と追加します。これで、

こんな感じに頭に#がつくようになりました。

カラーピッカーで指定した色を使って背景色が変わるようにしてみる。

ただ、色を選べるだけだとちょっとつまらないので、色を選べるようになるとどういうことができるのかやってみました。

ソース全部はこんな感じです。

追加したのは、

・選んだ色を id=”backColor” の指定してある<p>部分の背景色にする、というJQuery
id=”backColor” の指定してある<p>部分

です。JQueryは

こんな感じで、id=”color”というテキストボックスの値が変わったら、id=”backColor”という<p>の背景色を選んだ色に変更する、ということにしました。

表示してみると、

こんな感じになります。色を選ぶと、

選んだ色が背景色になります(^^)/。なにやら楽しくて何度も試しちゃいます。

サーバにもアップしましたので、試したかったら https://usortblog.com/blog_sample/jscolortest/ こちらからどうぞ!

まとめ:JSColorを使ってカラーピッカーが使えるようにするためにしたことはこれだけ

色々やりましたが、単純にJSColorを使ってカラーピッカーが使えるようにするためにしたのは

1. JSColorをダウンロードして解凍
2. 自分が使いたい場所にjscolorフォルダを移動
3. 自分が使いたいフォームのテキストボックスに class=”color” と指定する

これだけです!

カラーピッカーで色が選べるのはなんだか難しそうですが、JSColorを使うととても簡単に実現できました♪

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る