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

Slider

縦/横方向のスライダを生成する。

        new glow.widgets.Slider(container, opts)

container … スライダを追加したいエレメントを指定
opts … 最小/最大値、各種イベントリスナなどを指定

スライダを調節させることで、文字サイズの変更をおこなうサンプルを作成する。

slider.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.Slider</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.Slider
               (
                   '#slider',
                   {
                       bindTo: '#sliderinput',
                       size: 400,
                       min: 50,
                       max: 200,
                       changeOnDrag: true,
                       buttons: false,
                       tickMajor: 10,
                       tickMinor: 5,
                       onChange: function()
                       {
                           document.getElementById('sliderWithFontSize').style.fontSize=this.val()+'%';
                       }
                  }
              );
           }
        );
        -->
        </script>
    </head>

    <body>
        <div id="slider">
            <label for="sliderinput">font-size: </label>
            <input type="text" id="sliderinput" name="sliderValue" size="3">%
        </div>
        <span id="sliderWithFontSize">Hello, glow.widgets.Slider!</span>
    </body>
</html>

optsのchangeOnDragをtrueとし、スライダをドラッグして移動している間もchangeイベントが発生するように。またchangeイベントの際に文字サイズを変更する関数を実行させている。これをWebブラウザで表示させてみよう。


スライダを動かすと、文字サイズが変化する

文字サイズの調節や、タスクの進捗率といった割合値を入力させるUIで活躍しそうなウィジェットだ。Sliderには簡単なデモのほかに、画像を差し替えた凝ったデザインのサンプルも用意されているので、あわせて参照してほしい。

Sortable

ドラッグ&ドロップ操作による並び替えをサポートする。

        new glow.widgets.Sortable(containers, opts)

containers … 並び替えをおこなえるようにしたいコンテンツを指定
opts … 並び替え完了時に実行する関数や方向を指定

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

sortable.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.Sortable</title>
        <link href="./glow/1.5.1/widgets/widgets.css" rel="stylesheet" type="text/css">
        <style type="text/css">
        <!--
        ul#glowModules li
        {
            cursor: move;
        }
        -->
        </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.Sortable('#glowModules');
           }
        );
        -->
        </script>
    </head>

    <body>
        <ul id="glowModules">
            <li>glow</li>
            <li>glow.anim</li>
            <li>glow.data</li>
            <li>glow.dom</li>
            <li>glow.dragdrop</li>
            <li>glow.embed</li>
            <li>glow.forms</li>
            <li>glow.lang</li>
            <li>glow.net</li>
            <li>glow.tweens</li>
        </ul>
    </body>
</html>

>ul<>li<のリストにSortableウィジェットを適用している。


リストの並び替えが可能になった。対象となるコンテンツは日本語でもまったく問題なし

ソート条件を直感的に指定させるユーザインタフェースを作る場合に活用できそうなウィジェットだ。

Timetable

タイムテーブルを生成する。複雑なゆえ、ほかのウィジェットと比較すると指定すべき項目がおおいのが特徴だ。

        new glow.widgets.Timetable(container, start, end, viewStart, viewEnd, opts)

container … タイムテーブルを格納するエレメントを指定する。指定したエレメントはタイムテーブルに置き換えられる
start … タイムテーブルの開始地点を指定
end … タイムテーブルの終了地点を指定
viewStart … タイムテーブルの表示開始位置を指定
viewEnd … タイムテーブルの表示終了位置を指定
opts … 各種イベントリスナ、トラックのヘッダ/フッタなどを指定

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

timetable.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.Timetable</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()
           {
               a = new glow.widgets.Timetable
               (
                   '#timeTableTest',
                   '1 July 2009 10:00', '31 July 2009 24:00',
                   '14 July 2009 10:00', '14 July 2009 24:00',
                   {
                       vertical: false,
                       size: 600,
                       trackHeader: '{title}',
                       collapseTrackBorders: false,
                       itemTemplate: '{title}<br>{start}',
                       tracks :
                       [
                           [
                               '若林', 100,
                               {
                                   items :
                                   [
                                       ['社外打合', '14 July 2009 10:30', '14 July 2009 12:45'],
                                       ['社内打合', '14 July 2009 15:30', '14 July 2009 18:00']
                                   ]
                               }
                           ],
                           [
                               '富田', 100,
                               {
                                   items :
                                   [
                                        ['社内打合', '14 July 2009 15:30', '14 July 2009 18:00'],
                                        ['ゴスペル', '14 July 2009 21:30', '14 July 2009 24:00']
                                   ]
                               }
                           ]
                       ]
                   }
               );
               a.draw();
           }
        );
        -->
        </script>
    </head>

    <body>
        <div id="timeTableTest"></div>
    </body>
</html>

横方向に展開するタイムテーブルを生成している。


タイムテーブルを生成。範囲の指定によっては、タイムテーブルを直接ドラッグし前/次のタイムテーブルを表示する操作も可能

データの追加がやや面倒だが、ぜひ使えるようになっておきたいウィジェットのひとつ。なんといってもテレビ局のWebサイトで使用することが前提ということもあってか、かなり強力なウィジェットに仕上がっている。ウィジェットの特性から、時間単位のスケジュールを表示する場面で有効に活用できそうだ。またBBC - Glow Documentation - Loading Timetable Data From A Remote Sourceではタイムテーブルに表示するデータをリモートソースから読み込むテクニックについても紹介している。興味がある方はこちらも忘れずに目をとおしておきたい。

おわりに - 豊富なモジュールとウィジェット、jQueryに匹敵するライブラリとなるか?!

Glowに用意されているモジュールとウィジェットをひととおりご覧いただいた。これだけの機能をもつJavaScriptライブラリがテレビ局からオープンソースソフトウェアとしてリリースされたのは興味深い。用意されているウィジェットも、jQueryやDojoといった既存のライブラリにいずれも劣らないものばかり。BBCのWebサイトという"現場で叩き上げられてきた"同ライブラリ、活用できる場面は多岐にわたりそうだ。今後の動向に注目したい。