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

2012.10.22

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

Closure Libraryに用意されている「goog.ui.Bubble」は、指定した要素に一定時間表示される「ふきだし」状のコンポーネントです。

デモ

「Click」ボタンを押下することでBubbleコンポーネントを表示することができます。

Bubble

  • テキストインプットに入力がある場合は、ボタンをアンカーとして入力したテキストを伴ったBubbleが表示されます。
  • テキストインプットに入力が無い場合は、テキストインプットをアンカーとしてBubbleが表示されます。
  • Bubble以外をクリックしてもBubbleは消えません。
  • Bubbleは5秒経過すると自然に消えます。

デモコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>goog.ui.Bubble</title>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.events.EventType');
      goog.require('goog.ui.Bubble');
    </script>
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/bubble.css">
  </head>
  <body>
    <fieldset>
      <legend>Bubble</legend>
      <input type="text" id="textinput" width="100%" />
      <input type="button" id="button" value="Click me." />
    </fieldset>
    <script type="text/javascript">
      var bubble = null;
      goog.events.listen(button, goog.events.EventType.CLICK, function(event) {
        if (bubble) {
          bubble.dispose();
          bubble = null;
        }
        bubble = new goog.ui.Bubble(textinput.value ? textinput.value : '入力してください。');
        bubble.setAutoHide(false);
        bubble.setTimeout(5000);
        bubble.render();
        bubble.attach(textinput.value ? button : textinput);
        bubble.setVisible(true);
      });
    </script>
  </body>
</html>

使い方

Bubbleコンポーネントは、おおまかに「インスタンスの生成」→「DOMツリーに追加(render)」→「表示の設定(setVisible)」の順序で使用します。

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.ui.Bubble');
</script>
6行目
Closure Libraryのbase.jsをロードします。
(このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。)
7~10行目
必要とするClosure Libraryを宣言します。ここでは主役である「goog.ui.Bubble」とイベントタイプの列挙である「goog.events.EventType」を宣言しています。

標準スタイルのロード

<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/bubble.css">
11行目
Bubbleコンポーネントに標準で用意されているスタイル定義をロードします。UIコンポーネントには専用のスタイルが定義されたCSSファイルが用意されているものがあります。通常はクラス名と同様の名称(goog.ui.Bubble→bubble.css)になっているので直ぐに見つかると思います。

Bubbleを生成・表示するイベントハンドラの指定

var bubble = null;
goog.events.listen(button, goog.events.EventType.CLICK, function(event) {
  if (bubble) {
    bubble.dispose();
    bubble = null;
  }
  bubble = new goog.ui.Bubble(textinput.value ? textinput.value : '入力してください。');
  bubble.setAutoHide(false);
  bubble.setTimeout(5000);
  bubble.render();
  bubble.attach(textinput.value ? button : textinput);
  bubble.setVisible(true);
});
20行目
イベントハンドラ内から参照されるレキシカル変数です。Bubbleコンポーネントのインスタンスが格納されます。
21行目
ボタンのクリックイベントリスナへハンドラの追加を行なっています。以降22~23行目がイベントハンドラ内の処理となります。
22~25行目
以前に生成したBubbleコンポーネントが存在する場合にコンポーネントを破棄します。disposeメソッドはBubbleコンポーネントの要素に対するイベントハンドリング等を除去し、安全にオブジェクトが破棄できる状態を提供します。(継承している「goog.Disposable」クラスのメソッドをオーバーライドしています。)
26行目
Bubbleコンポーネントのインスタンスを生成しています。第一引数にはBubble内に表示する文字列を指定します。ここではテキストインプットに入力があればその文字列、無ければ「入力してください。」という文字列を設定しています。
27行目
Bubble以外をクリックした際、自動的にBubbleを非表示とするかの設定です。ここでは「非表示としない」設定としています。
28行目
表示されたBubbleが非表示となるまでの時間をミリ秒で設定します。ここでは5秒後に非表示となる設定としています。
29行目
Bubbleコンポーネントを構成する要素をDOMツリーに追加します。(要素がhiddenとなっている為、表示はされません。)
30行目
Bubbleコンポーネントを紐付けるアンカーとなる要素を設定します。ここではテキストインプットに入力があればボタン、無ければテキストインプットに紐付けています。
31行目
Bubbleコンポーネントを表示させます。

まとめ

ユーザが起こしたUI上のアクションに対してメッセージを通知したい場合等に用いるのが良いと思います。Bubble内には文字列だけでなく、タグを利用した要素も指定することができるので、表現力豊かにユーザへの通知を行うことができます。

参照