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

Glowにはユーザビリティアップのためのウィジェットがいくつか用意されている。

AutoSuggest … Googleサジェストのようなオートサジェストメニュー
Carousel … リストアイテムを縦/横方向にスクロールさせるカルーセル
Editor … 「斜体」「太字」「取消線」をサポートするリッチテキストエディタのUI
InfoPanel … 注釈用のボックス
Mask … ページ全体にかぶせる半透明のレイヤ
Overlay … ページ全体にかぶせるオーバーレイ
Panel … ページ全体にかぶせるパネル
Slider … 縦/横方向のスライダ
Sortable … リストやオブジェクトの、ドラッグ&ドロップによる並び替え
Timetable … 縦/横方向のタイムテーブル

モジュール同様プロパティ/メソッドすべてを含めると量があるため、ここではコンストラクタのみを取り上げた。これらウィジェットについて、サンプルを交えて紹介する。

AutoSuggest

Google検索ボックスのサジェストのようなメニューを生成する。

        new glow.widgets.AutoSuggest(inputElement, dataSource, opts)

inputElemente … サジェストメニューを生成したいinputエレメントを指定
dataSourcee … サジェストで表示するデータを指定。指定方法はオブジェクト、文字列、文字列型配列、関数、外部ファイルと幅広い
optse … 表示幅や高さ、各種イベントハンドラといったオプションを指定

簡単なコードで動作を確認してみよう。

autoSuggest.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! / widgets.AutoSuggest</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.AutoSuggest
               (
                   '#suggestInputElement',
                   [
                       'glow',
                       'glow.anim',
                       'glow.data',
                       'glow.dom',
                       'glow.dragdrop',
                       'glow.embed',
                       'glow.events',
                       'glow.forms',
                       'glow.lang',
                       'glow.net',
                       'glow.tweens'
                   ],
                   {
                       onItemSelect: function(e)
                       {
                           this.val(e.selectedItem);
                       }
                   }
               );
           }
        );
        -->
        </script>
    </head>

    <body>
        <input type="text" id="suggestInputElement">
    </body>
</html>

サジェストしたいデータを文字列型の配列で指定した。サジェストから選択した内容をボックスに転記させるため、onItemSelectでthis.val(e.selectedItem)としている。これをWebブラウザで表示する。

「glow.」と入力すると、補完候補が表示される。上下キーで転記したいキーワードを選択しEnterキーを押すと、選択した内容がテキストボックスに転記される

サジェストするデータは直接入力する以外に、外部ファイルを読み込ませる方法でも指定できる。「Excelのように以前入力した内容を簡単に入力したい」といった要望も、このウィジェットをうまく活用することで簡単に実装ができるようになる。

Carousel

リストアイテムを縦/横方向にスクロールさせるカルーセルを生成する。

        new glow.widgets.Carousel(container, opts)

container … カルーセル化したいリストを指定
opts … ループやサイズといった共通設定、スクロール時のアニメーションや各種なビーゲションオプションを指定

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

carousel

<!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.Carousel</title>
        <link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
        <style type="text/css">
        <!--
        ol#carousel li, ol#carousel_v li
        {
            margin: 4px;
            height: 30px;
            width: 30px;
            background-color : #c0c0c0;
            text-align: center;
        }
        -->
        </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()
           {
               new glow.widgets.Carousel
               (
                   '#carousel',
                   {
                        loop: true,
                        size: 4,
                        step: 1,
                        theme: 'dark'
                   }
               );
               new glow.widgets.Carousel
               (
                   '#carousel_v',
                   {
                        loop: true,
                        vertical: true,
                        size: 4,
                        step: 1,
                        theme: 'dark'
                   }
               );
           }
        );
        -->
        </script>
    </head>

    <body>
        <ol id="carousel">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
        <ol id="carousel_v">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </body>
</html>

縦方向と横方向に展開するカルーセルを生成している。これをWebブラウザで表示する。

縦/横にカルーセルが表示された。矢印をクリックすることで、次のリストアイテムが順に表示される

レイアウトサイズの限られた場所で、メニューといった大量のコンテンツを表示する場合に便利なウィジェットだ。