お手軽高機能!Closure UI【goog.ui.ColorPicker】

2012.12.05

Closure Libraryに用意されている「goog.ui.ColorPicker」は、カラーパレットから選択した色のカラーコードを取得することができるコンポーネントです。「goog.ui.ColorMenuButton」などと同様に内部的に「goog.ui.ColorPalette」を利用しています。

デモ

#FFFFFFから#000000までのウェブセーフカラーのパレットを描画しています。パレットで選択した色のカラーコードを下記文字列中に表示します。

選択色のカラーコードは「」です。

デモコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>goog.ui.ColorPicker</title>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.array');
      goog.require('goog.dom');
      goog.require('goog.style');
      goog.require('goog.ui.ColorPicker');
    </script>
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colorpicker-simplegrid.css" />
  </head>
  <body>
    <p>選択色のカラーコードは「<span id="colorcode"></span>」です。</p>
    <div id="colorpicker"></div>
    <script>
      var HEX_VALUE_ARRAY = ["ff", "cc", "99", "66", "33", "00"];
      var WEB_216_COLORS = [];
      goog.array.forEach(HEX_VALUE_ARRAY, function(r) {
        goog.array.forEach(HEX_VALUE_ARRAY, function(g) {
          goog.array.forEach(HEX_VALUE_ARRAY, function(b) {
            WEB_216_COLORS.push('#' + r + g + b);
          });
        });
      });
    </script>
    <script>
      var cp = new goog.ui.ColorPicker();
      cp.setSize(18);
      cp.setColors(WEB_216_COLORS);
      cp.render(goog.dom.getElement('colorpicker'));

      cp.addEventListener(goog.ui.ColorPicker.EventType.CHANGE, function(event) {
        var color = event.target.getSelectedColor();
        var span = goog.dom.getElement('colorcode');
        goog.dom.setTextContent(span, color);
        goog.style.setStyle(span, 'color', color);
      });
    </script>
  </body>
</html>

解説

ColorPickerクラスのインスタンスを生成し、対象要素へ「描画(render)」して利用します。ColorPickerは「装飾(decorate)」を許可されていないコンポーネントです。

Closure Libraryのロード

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
  goog.require('goog.array');
  goog.require('goog.dom');
  goog.require('goog.style');
  goog.require('goog.ui.ColorPicker');
</script>
6行目
Closure Libraryのbase.jsをロードしています。
(このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。)
7~12行目
必要とするClosure Libraryを宣言しています。ここで「require」したものがグローバル変数領域に展開されます。

標準スタイルのロード

<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colorpicker-simplegrid.css" />
13, 14行目
共通スタイル等が定義されている「common.css」をロードしています。
CloroPicker用のスタイル定義としては、通常の命名規則と若干異なる、「colorpicker-simplegrid.css」をロードしています。

画面要素

<p>選択色のカラーコードは「<span id="colorcode"></span>」です。</p>
<div id="colorpicker"></div>
17行目
ColorPickerで選択した色のカラーコードを表示するparagraph要素です。
18行目
ColorPickerコンポーネントを「描画(render)」する対象のdiv要素です。

ColorPickerの生成および描画

var cp = new goog.ui.ColorPicker();
cp.setSize(18);
cp.setColors(WEB_216_COLORS);
cp.render(goog.dom.getElement('colorpicker'));

cp.addEventListener(goog.ui.ColorPicker.EventType.CHANGE, function(event) {
  var color = event.target.getSelectedColor();
  var span = goog.dom.getElement('colorcode');
  goog.dom.setTextContent(span, color);
  goog.style.setStyle(span, 'color', color);
});
31行目
ColorPickerクラスのインスタンスを生成しています。クラスメソッド「createSimpleColorGrid」を使用すると標準で用意されている7セル幅のColorPickerインスタンスを取得することができます。
32行目
1行が18セルからなるグリッドとしてサイズを設定しています。
33行目
表示するカラーを設定しています。引数に渡しているオブジェクトはカラーコード文字列の配列となります。
34行目
「ID:colorpicker」のdiv要素へColorPickerコンポーネントを「描画(render)」しています。
36~41行目
ColorPickerコンポーネントでカラーを選択した際のイベントハンドラをコンポーネントのリスナに追加しています。ハンドラ内では、選択された色のカラーコードを指定要素へ設定する処理を行なっています。

まとめ

今回はウェブセーフカラー216色のColorPickerコンポーネントを表示してみましたが、シンプルなカラーパレットを用意したい場合は、クラスメソッド「createSimpleColorGrid」を利用すると不要な設定を省略できるので便利かと思います。(^^)

参照