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

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

お手軽高機能！Closure UI

お手軽高機能！Closure UI

#JavaScript
#HTML5
#Closure
#RIA
稲毛 透

稲毛 透

facebook logohatena logotwitter logo
Clock Icon2012.11.30

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

Closure Libraryに用意されている「goog.ui.ColorMenuButton」は、カラーパレットを備えた色選択用のボタンコンポーネントです。

デモ

ColorMenuButtonのサンプルです。比較の為にHTML5で導入されたinput要素の「type="color"」も表示しています。

#ff0000 ColorMenuButtonを「描画（render）」したものです。
Color
 #00ff00 ColorMenuButtonを「装飾（decorate）」したもの
#0000ff カスタムカラーパレットを設定したColorMenuButtonを「描画（render）」したものです。
#ff0000 HTML5のカラー入力コントロールです。

デモコード

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>goog.ui.ColorMenuButton</title>
    <meta charset=utf-8>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.ui.ColorMenuButton');
      goog.require('goog.ui.CustomColorPalette');
      goog.require('goog.ui.Component.EventType');
      goog.require('goog.ui.Menu');
      goog.require('goog.ui.MenuItem');
      goog.require('goog.ui.Separator');
      goog.require('goog.ui.decorate');
    </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/menu.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuitem.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuseparator.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menubutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/custombutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/palette.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colorpalette.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colormenubutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/toolbar.css">
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td id="cmb1"></td>
          <td id="cell1">#ff0000</td>
          <td>ColorMenuButtonを「描画（render）」したものです。</td>
        </tr>
        <tr>
          <td><div id="cmb2" class="goog-color-menu-button" title="カラーを選択してください">Color</div></td>
          <td id="cell2">#00ff00</td>
          <td>ColorMenuButtonを「装飾（decorate）」したもの</td>
        </tr>
        <tr>
          <td id="cmb3"></td>
          <td id="cell3">#0000ff</td>
          <td>カスタムカラーパレットを設定したColorMenuButtonを「描画（render）」したものです。</td>
        </tr>
        <tr>
          <td><input id="colorinput" type="color" value="#ff0000" /></td>
          <td id="cell4">#ff0000</td>
          <td>HTML5のカラー入力コントロールです。</td>
        </tr>
      </tbody>
    </table>
    <script>
      var cmb1 = new goog.ui.ColorMenuButton('Color');
      cmb1.setTooltip('カラーを選択してください');
      cmb1.setSelectedColor('#FF0000');
      cmb1.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
        goog.dom.setTextContent(goog.dom.getElement('cell1'), event.target.getSelectedColor());
      });
      cmb1.render(goog.dom.getElement('cmb1'));
    
      var cmb2 = goog.ui.decorate(goog.dom.getElement('cmb2'));
      cmb2.setSelectedColor('#00FF00');
      cmb2.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
        goog.dom.setTextContent(goog.dom.getElement('cell2'), event.target.getSelectedColor());
      });
    
      var customColorPalette = new goog.ui.CustomColorPalette(['#F00', '#0F0', '#00F']);
      customColorPalette.setSize(8);
      var customColorMenu = new goog.ui.Menu();
      customColorMenu.addItem(new goog.ui.MenuItem('なし', goog.ui.ColorMenuButton.NO_COLOR));
      customColorMenu.addItem(new goog.ui.Separator());
      customColorMenu.addItem(customColorPalette);
    
      var cmb3 = new goog.ui.ColorMenuButton('Custom', customColorMenu);
      cmb3.setTooltip('カスタムカラーを選択してください');
      cmb3.setSelectedColor('#0000FF');
      cmb3.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
        goog.dom.setTextContent(goog.dom.getElement('cell3'), event.target.getSelectedColor());
      });
      cmb3.render(goog.dom.getElement('cmb3'));
      
      goog.events.listen(goog.dom.getElement('colorinput'), 'change', function(event) {
        goog.dom.setTextContent(goog.dom.getElement('cell4'), event.target.value);
      });
    </script>
  </body>
</html>

解説

ColorMenuButtonインスタンスを生成し、対象要素へ「描画（render）」もしくは「装飾（decorate）」することで使用します。

Closure Libraryのロード

    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.ui.ColorMenuButton');
      goog.require('goog.ui.CustomColorPalette');
      goog.require('goog.ui.Component.EventType');
      goog.require('goog.ui.Menu');
      goog.require('goog.ui.MenuItem');
      goog.require('goog.ui.Separator');
      goog.require('goog.ui.decorate');
    </script>
6行目
Closure Libraryのbase.jsをロードします。
（このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。）
7～15行目
必要とする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/menu.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuitem.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuseparator.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menubutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/custombutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/palette.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colorpalette.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colormenubutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/toolbar.css">
16～25行目
「common.css」にはコンポーネント共通のスタイル等が定義されているのでロードします。他、ColorMenuButtonのスタイル定義「colormenubutton.css」以外にも多くのスタイル定義をロードしていますが、これはColorMenuButtonが複数のコンポーネントを利用して作られている為です。表示がおかしい時は必要とされているCSSが全て読み込まれているか確認すると良いと思います。

画面要素

        <tr>
          <td id="cmb1"></td>
          <td id="cell1">#ff0000</td>
          <td>ColorMenuButtonを「描画（render）」したものです。</td>
        </tr>
        <tr>
          <td><div id="cmb2" class="goog-color-menu-button" title="カラーを選択してください">Color</div></td>
          <td id="cell2">#00ff00</td>
          <td>ColorMenuButtonを「装飾（decorate）」したもの</td>
        </tr>
        <tr>
          <td id="cmb3"></td>
          <td id="cell3">#0000ff</td>
          <td>カスタムカラーパレットを設定したColorMenuButtonを「描画（render）」したものです。</td>
        </tr>
        <tr>
          <td><input id="colorinput" type="color" value="#ff0000" /></td>
          <td id="cell4">#ff0000</td>
          <td>HTML5のカラー入力コントロールです。</td>
        </tr>
31行目
ColorMenuButtonを「描画（render）」する対象のtd要素です。描画により、ColorMenuButtonを構成する要素はこのtd要素の子要素として生成されます。
36行目
ColorMenuButtonを「装飾（decorate）」する対象のdiv要素です。装飾時にColorMenuButtonコンポーネントであることを示す為にクラス名「goog-color-menu-button」を指定しています。装飾により、ColorMenuButtonを構成する要素はこのdiv要素をルートとして構築されます。
41行目
カスタムカラーパレットを持ったColorMenuButtonを「描画（render）」する対象のtd要素です。描画により、ColorMenuButtonを構成する要素はこのtd要素の子要素として生成されます。

ColorMenuButtonの生成および描画

      var cmb1 = new goog.ui.ColorMenuButton('Color');
      cmb1.setTooltip('カラーを選択してください');
      cmb1.setSelectedColor('#FF0000');
      cmb1.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
        goog.dom.setTextContent(goog.dom.getElement('cell1'), event.target.getSelectedColor());
      });
      cmb1.render(goog.dom.getElement('cmb1'));
53行目
ColorMenuButtonコンポーネントのインスタンスを生成しています。引数にはボタンのラベル文字列「Color」を指定しています。
54行目
ツールチップに表示する文字列を設定しています。
55行目
選択色の初期値として「#FF0000」を設定しています。
56～58行目
ColorMenuButtonの選択色が変更された時の処理をイベントリスナに追加しています。ハンドラ内ではイベントターゲット（ColorMenuButton）が選択している色（16進数表記の文字列）をテーブル上に表示する処理を行なっています。
59行目
ColorMenuButtonコンポーネントを対象要素へ描画しています。
      var cmb2 = goog.ui.decorate(goog.dom.getElement('cmb2'));
      cmb2.setSelectedColor('#00FF00');
      cmb2.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
        goog.dom.setTextContent(goog.dom.getElement('cell2'), event.target.getSelectedColor());
      });
61行目
対象要素をColorMenuButtonとして装飾し、そのインスタンスを取得しています。
62行目
選択色の初期値として「#00FF00」を設定しています。
63～65行目
ColorMenuButtonの選択色が変更された時の処理をイベントリスナに追加しています。ハンドラ内ではイベントターゲット（ColorMenuButton）が選択している色（16進数表記の文字列）をテーブル上に表示する処理を行なっています。
      var customColorPalette = new goog.ui.CustomColorPalette(['#F00', '#0F0', '#00F']);
      customColorPalette.setSize(8);
      var customColorMenu = new goog.ui.Menu();
      customColorMenu.addItem(new goog.ui.MenuItem('なし', goog.ui.ColorMenuButton.NO_COLOR));
      customColorMenu.addItem(new goog.ui.Separator());
      customColorMenu.addItem(customColorPalette);
67行目
カスタムカラーメニューに表示するCustomColorPaletteコンポーネントを生成しています。引数には標準で用意する色を配列で指定しています。
68行目
標準のパレットサイズを設定しています。
69行目
ColorMenuButtonを押下した際に表示されるMenuコンポーネントを生成しています。
70～72行目
カスタムカラーメニューを構築しています。一段目には「なし」、二段目にはセパレータ、三段目にはカスタムカラーパレットというように表示される事を想定しています。
      var cmb3 = new goog.ui.ColorMenuButton('Custom', customColorMenu);
      cmb3.setTooltip('カスタムカラーを選択してください');
      cmb3.setSelectedColor('#0000FF');
      cmb3.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
        goog.dom.setTextContent(goog.dom.getElement('cell3'), event.target.getSelectedColor());
      });
      cmb3.render(goog.dom.getElement('cmb3'));
74行目
ColorMenuButtonコンポーネントのインスタンスを生成しています。引数には、前段で作成したカスタムカラーメニューとボタンのラベル文字列「Custom」を指定しています。
75行目
ツールチップに表示する文字列を設定しています。
76行目
選択色の初期値として「#0000FF」を設定しています。
77～79行目
ColorMenuButtonの選択色が変更された時の処理をイベントリスナに追加しています。ハンドラ内ではイベントターゲット（ColorMenuButton）が選択している色（16進数表記の文字列）をテーブル上に表示する処理を行なっています。
80行目
ColorMenuButtonコンポーネントを対象要素へ描画しています。

まとめ

HTML5のカラー入力コントロールと違い、ブラウザ描画内でシームレスに色選択が行えるのが良いですね。とはいえ、ColorMenuButtonコンポーネントはカラー入力コントロールを完全に置き換えるものではありませんので用途や局面によって上手に使い分けると良いのではないかなと思います。(^^)

参照

Share this article

facebook logohatena logotwitter logo

関連記事

ใช้ HTML＋JavaScript เรียก API Gateway กับ Lambda ที่สร้างด้วย REST API: Serverless Web App บน AWS : Part 6

ใช้ HTML＋JavaScript เรียก API Gateway กับ Lambda ที่สร้างด้วย REST API: Serverless Web App บน AWS : Part 6

User avatar
Supanut Akaram
2024.11.11
【React 19】サクッと理解するuseActionState

【React 19】サクッと理解するuseActionState

User avatar
戸田駿太
2024.10.11
[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする

[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする

User avatar
中村 修太
2024.10.10
[Bun] JavaScriptでC言語のファイルを簡単に実行する

[Bun] JavaScriptでC言語のファイルを簡単に実行する

User avatar
中村 修太
2024.09.26
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.