jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

公開日: : 最終更新日:2014/08/14 JavaScript/jQuery

スポンサーリンク

カラーピッカーとは

彩色関係のサイトを見ていると下の画像のようなカラフルな色選択画面が出てくることが度々あります。


これは『カラーピッカー』といって画面上の色を取得する機能やダイアログのことです。こういうのってライブラリになっているのだろうか…と思って調べてみるといくつか出てきました。

『JavaScriptで使えるカラーピッカー作成ライブラリまとめ』
http://phpspot.org/blog/archives/2006/10/javascript_28.html

中でも上の図のようなおしゃれなカラーピッカーとして『Farbtastic Color Picker』というJavaScript(jQuery)のライブラリがあるようなので軽く扱ってみます。

http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

サイトからソースをダウンロードするとデモ用のファイルがあるのでそれをそのまま表示すると↓のようになります。

『Farbtastic Color Picker』を使う

デモを再現する

サイトにも書いてあることなのですが簡単に導入方法を載せておきます。

まずこのライブラリはjQueryが必要ですので別途入手してきましょう。(Download jQuery:http://jquery.com/download/)

それが終わったらjQueryと合わせてFarbtasticでダウンロードしたファイルに入っているfarbtastic.jsfarbtastic.cssを記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

そしたらカラーピッカーを配置する用のタグを作成します。デモではID名が”picker”というタグがそれに該当します。

<form action="" style="width: 400px;">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color"
name="color" value="#123456" /></div>
<div id="picker"></div>
</form>

最後に読み込み時のイベントでそれを記述すれば完成です。引数の”#color”は選択した色のカラーコードの代入先となります。

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	$('#picker').farbtastic('#color');
});
</script>

あと注意したいのは付属の画像です。円状にカラフルになっている部分やカラーピッカー上のでのマウスポインターなどは画像でできているので、これを忘れると残念なことになってしまします。

なのでmarker.png、mask.png、wheel.pngの画像をスクリプトと同じディレクトリに置くか、もしくは同じ所には置けないという場合は『farbtastic.css』のスタイルを変更するか上書きするかしてください。例えばに『http://○○/』に画像があるなら

.farbtastic .wheel {
	background: url(http://○○/wheel.png) no-repeat !important;
}
.farbtastic .overlay {
	background: url(http://○○/mask.png) no-repeat !important;
}
.farbtastic .marker {
	background: url(http://○○/marker.png) no-repeat !important;
}

といったように『!important』を使って上書きすれば大丈夫です。

取得されるカラーコードを利用する

使い方によっては自分の指定した位置にカラーコードを表示したいといったことやそこで得られるカラーコードを利用したスクリプトを作りたいといったこともあると思います。そこでサイト内を見てみると次のような記述がありました。

$(…).farbtastic() $(…).farbtastic(callback)
This creates color pickers in the selected objects. callback is optional and can be a:

DOM Node, jQuery object or jQuery selector: the color picker will be linked to the selected element(s) by syncing the value (for form elements) and color (all elements).

Function: this function will be called whenever the user chooses a different color. It should have the following signature:
function callback(color) { … }
With color the chosen color in hex representation (e.g. ‘#123456’).

つまり、コールバック関数を使うことができますよ的なことが書いてあるのでそれで登録すればOKです。例えばID名が”dst”の値としてカラーコードを代入したいと思ったら、さっきのロードイベントを次のように書き換えます。

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	$('#picker').farbtastic(function(color) {
		$('#dst').val(color);
	});
});
</script>

これを使ったデモ画面を作ったのでそちらも参考にしてみてください。

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

関連記事

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑