あのBBCが作った超実力派JavaScriptライブラリ"Glow"を徹底解剖する

Editor

テキストエリアをGlow独自のリッチテキストエディタに置き換える。

        new glow.widgets.Editor(textarea, opts)

textarea … 置き換えたいテキストエリアを指定
opts …テーマをdarkまたはlightで指定する。いまのところ設定できるのはこのオプション1つのみ

サンプルコードは次のとおり。

editor.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, Glow! / glow.widgets.Editor</title>
        <link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
        <script type="text/javascript" src="./glow/1.5.1/widgets/widgets.js"></script>
        <script type="text/javascript">
        <!--
        glow.ready
        (
           function()
           {
               new glow.widgets.Editor("#editorTest");
           }
        );
        -->
        </script>
    </head>

    <body>
        <textarea id="editorTest" rows="15" cols="30"></textarea>
    </body>
</html>

idを振ったtextareaをglow.widgets.Editor()で指定するだけだ。Webブラウザで表示する。

テキストエリアがリッチテキストエディタに置き換わった。いまのところ用意されているのは「斜体」「太字」「取消線」の3種のみ

機能の少なさから、このあたりはDojoのEditorと比較するとやや見劣り感がある。またすでにいくつかのWebブラウザでは問題点も挙がっている(ページ最下部の「Known issues」)。使用の際は注意されたい。

InfoPanel

指定したエレメントに注釈用のパネルを生成する。

        new glow.widgets.InfoPanel(content, opts)

content … 注釈用のパネルとして表示したいエレメントを指定
opts … テーマや座標といったオプションを指定

サンプルは次のとおり。

infoPanel.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, Glow! / glow.widgets.infoPanel</title>
        <link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
        <script type="text/javascript" src="./glow/1.5.1/widgets/widgets.js"></script>
        <script type="text/javascript">
        <!--
        glow.ready
        (
           function()
           {
                var myInfoPanel = new glow.widgets.InfoPanel
                (
                    '#simpleInfoPanel',
                    {
                        context: "#searchBox"
                    }
                );
                myInfoPanel.show();
           }
        );
        -->
        </script>
    </head>

    <body style="padding-top:100px;">
        <p>
            <label for="searchBox">検索:</label>
            <input id="searchBox">
        </p>
        <div id="simpleInfoPanel">
            <p>検索したい用語を入力してください</p>
        </div>
    </body>
</html>

DOMの構築が完了した時点でtype="text"のinputエレメントにInfoPanelを表示する。Webブラウザで表示してみよう。

テキストボックスの横にInfoPanelが表示された。日本語もレイアウトが崩れることなく表示される様子

先述のglow.formsとうまく組み合わせれば、ユーザビリティの高いフォームをGlow単体で簡単に実装できるようになるだろう。

Mask、Overlay、 Panel

それぞれ半透明のレイヤ、オーバーレイ、パネルをページ全体にかぶせて表示させるウィジェット。この3種類は使用/表示感が似ているので一緒に紹介しよう。

Mask

        new glow.widgets.Mask(opts)

opts … マスクの色、透明度やマウスクリック時に実行する関数を指定

Overlay

        new glow.widgets.Overlay(content, opts)

content … オーバーレイさせたいコンテンツを指定
opts … 座標やモーダルの有無、アニメーションなどを指定

Panel

        new glow.widgets.Panel(content, opts)

content … パネルとして表示させたいコンテンツを指定
opts … 座標やモーダルの有無、テーマやアニメーションなどを指定

汎用のしやすさから、サンプルコードはPanelのみを取りあげた。

panel.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, Glow! / glow.widgets.Panel</title>
        <link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
        <style type="text/css">
        <!--
        h2.hd
        {
            font-size: 100%;
        }
        -->
        </style>
        <script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
        <script type="text/javascript" src="./glow/1.5.1/widgets/widgets.js"></script>
        <script type="text/javascript">
        <!--
        glow.ready
        (
           function()
           {
               glow.events.addListener
               (
                   '#submit', 'click',
                   function()
                   {
                       var myPanel = new glow.widgets.Panel
                       (
                           glow.dom.create
                           (
                               '<div><h2 class="hd">確認</h2>' +
                               '<p>この内容で送信します。よろしいですか？</p>'+
                               '<input type="submit" value="送信"><input type="button" value="取消"></div>'
                           ),
                           {
                               modal: true,
                               theme: 'light'
                           }
                       );
                       myPanel.show();
                   }
               );
           }
        );
        -->
        </script>
    </head>

    <body>
        <h1>ユーザ登録</h1>
        <form id="registUserForm">
            <table>
                <tr>
                    <th>氏名</th>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <th>メールアドレス</th>
                    <td><input type="text" name="mail"></td>
                </tr>
                <tr>
                    <th>年齢</th>
                    <td><input type="text" name="age"></td>
                </tr>
            </table>
            <input type="button" id="submit" value="submit">
        </form>

    </body>
</html>

ボタンクリックでパネルを表示する。Webブラウザで表示してみよう。

ボタンクリックでパネルが表示された。パネルにあらかじめ2択ボタンを用意しておけば、ちょっとした確認用のダイアログ代わりになる

confirm()やprompt()ではちょっと機能が足りない……といった場合にこれらのウィジェットはおおいに役立ってくれる。3種類のウィジェットをうまく使いこなし「より少ない工数で」「使い勝手のよいユーザインタフェース」を実現しよう。