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

2012.11.01

Closure Libraryに用意されている「goog.ui.CharPicker」は、IME等に備わっているような「文字パレット」をWEBページ上に実現するコンポーネントです。パレット上での選択もしくは文字コードの指定により、Unicode文字をピックアップすることができます。

デモ

ボタンを押下するとCharPickerコンポーネントが表示されます。パレットから文字を選択するか、下部の入力フィールドに文字コード(Unicode)を入力しOKボタンを押下することで、上部の入力フィールドに対象の文字が挿入されます。

デモコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>goog.ui.CharPicker</title>
    <meta charset=utf-8>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.events.EventType');
      goog.require('goog.i18n.CharPickerData');
      goog.require('goog.i18n.uChar.LocalNameFetcher');
      goog.require('goog.style');
      goog.require('goog.ui.CharPicker');
      goog.require('goog.ui.Component');
    </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/menubutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/charpicker.css">
    <style type="text/css">
      input#textinput {
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p>
      <input id="textinput" type="text">
      <button id="button">Toggle CharPicker</button>
    </p>
    <p>
      <span id="charPicker" style="display:none;"></span>
    </p>
    <script>
      goog.scope(function() {
        var EventType = goog.events.EventType;
        var CharPickerData = goog.i18n.CharPickerData;
        var LocalNameFetcher = goog.i18n.uChar.LocalNameFetcher;
        var CharPicker = goog.ui.CharPicker;
        var Component = goog.ui.Component;
        
        var picker = new CharPicker(new CharPickerData(), new LocalNameFetcher());
        picker.render(goog.dom.getElement('charPicker'));
        picker.addEventListener(
          Component.EventType.ACTION,
          function(event) {
            goog.dom.getElement('textinput').value += picker.getSelectedChar();
          }
        );
        
        goog.events.listen(goog.dom.getElement('button'),
          EventType.CLICK,
          function(event) {
            var element = goog.dom.getElement('charPicker');
            goog.style.showElement(element, (element.style.display == 'none'));
          }
        );
      });
    </script>
  </body>
</html>

使い方

CharPickerコンポーネントは、生成したインスタンスを対象となる要素に「描画(render)」もしくは「装飾(decorate)」して用います。

Closure Libraryのロード

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
  goog.require('goog.events.EventType');
  goog.require('goog.i18n.CharPickerData');
  goog.require('goog.i18n.uChar.LocalNameFetcher');
  goog.require('goog.style');
  goog.require('goog.ui.CharPicker');
  goog.require('goog.ui.Component');
</script>
6行目
Closure Libraryのbase.jsをロードします。
(このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。)
7~14行目
必要とする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/menubutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/charpicker.css">
15~17行目
CharPickerコンポーネントに標準で用意されているスタイル定義をロードします。UIコンポーネントには専用のスタイルが定義されたCSSファイルが用意されているものがあります。通常はクラス名と同様の名称(goog.ui.CharPicker→charpicker.css)になっているので直ぐに見つかると思います。CharPickerを構成する要素に「goog.ui.MenuButton」が含まれている為、MenuButton用のスタイル「menubutton.css」もロードしています。

画面要素

<p>
  <input id="textinput" type="text">
  <button id="button">Toggle CharPicker</button>
</p>
<p>
  <span id="charPicker" style="display:none;"></span>
</p>
26行目
CharPickerコンポーネントで選択した文字が挿入されるinput要素です。
27行目
CharPickerの表示を切り替えるbutton要素です。
30行目
CharPickerコンポーネントを「装飾(decorate)」する為のspan要素です。

CharPickerの生成および描画

var picker = new CharPicker(new CharPickerData(), new LocalNameFetcher());
picker.render(goog.dom.getElement('charPicker'));
picker.addEventListener(
  Component.EventType.ACTION,
  function(event) {
    goog.dom.getElement('textinput').value += picker.getSelectedChar();
  }
);
40行目
CharPickerクラスのインスタンスを生成しています。コンストラクタの第一および第二引数は必須となります。第一引数にはカテゴリ名と文字リストを表すCharPickerDataオブジェクトを、第二引数にはローカルから文字名を取得するLocalNameFetcherオブジェクトを指定しています。
41行目
「ID:charPicker」のspan要素をCharPickerコンポーネントとして「装飾(decorate)」しています。
42~47行目
CharPickerコンポーネントのリスナにイベントハンドラを追加しています。ハンドラではCharPickerコンポーネントで選択された文字をinput要素に挿入する処理をしています。

まとめ

利用中のIMEで入力が出来ない文字を入力する必要がある局面で便利なのではないかと思います。常時表示しておくにはスペースを取るコンポーネントなので、「goog.ui.ModalPopup」などを用いてポップアップ表示させるのが良いですね。

参照