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

2015年6月17日

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

今、構想中の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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
--> 
</style>
</head>
<body>
<div style="width:70%;margin-left : auto ; margin-right : auto ;">
<p class="bg-primary" style="margin-top:10px;padding:10px;font-weight:bold;font-size:1.5em">JSColor テスト</p>
<form method="post">
<div class="form-group">
<label style="width:200px;">色を指定する</label>
<input type="text" id="color" value="">
<br />クリックするとカラーピッカーが開きます<br />
</div>
</form>
</div>
</body>

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

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

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

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

そして、コードに、

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>

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

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

<input type="text" id="color" value="">

を

<input type="text" id="color" class="color" value="">

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

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

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

<input type="text" id="color" class="color {hash:true}" value="">

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

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

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
--> 
</style>
<script type="text/javascript">
$(function(){
    $('#color').change(function() {
        $('#backColor').css('background-color', $('#color').val());
    });
});
</script>
</head>
<body>
<div style="width:70%;margin-left : auto ; margin-right : auto ;">
<p class="bg-primary" style="margin-top:10px;padding:10px;font-weight:bold;font-size:1.5em">JSColor テスト</p>
<form method="post">
<div class="form-group">
<label style="width:200px;">色を指定する</label>
<input type="text" id="color" class="color {hash:true}" value="">
<br />クリックするとカラーピッカーが開きます<br />
</div>
<div style="margin-top:150px;">
<p id="backColor" style="margin-top:10px;padding:10px;font-weight:bold;font-size:1.5em;color:#ffffff;background-color:#f00">文字は白　背景色変更テスト</p>
</div>
</form>
</div>
</body>

追加したのは、

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

です。JQueryは

<script type="text/javascript">
$(function(){
    $('#color').change(function() {
        $('#backColor').css('background-color', $('#color').val());
    });
});
</script>

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

表示してみると、

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

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

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

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

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

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

これだけです！

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

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @u_sort

あなたのシェアが励みになります！

URLをコピーしました！

URLをコピーしました！