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

お手軽高機能！Closure UI

#JavaScript

#HTML5

#Closure

#RIA

稲毛透

2012.12.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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コンポーネントでカラーを選択した際のイベントハンドラをコンポーネントのリスナに追加しています。ハンドラ内では、選択された色のカラーコードを指定要素へ設定する処理を行なっています。