Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScriptライブラリ「Wijmo(ウィジモ)」の便利なウィジェットを試す

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第2回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

ダウンロード WijmoSample.zip (6.7 KB)

 本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo(ウィジモ)」について、サンプルとともに利用例を紹介します。今回はWijmoが提供する数多くのウィジェット(UI部品)の中からいくつかを取り上げて、コーディング例を通してその利用法を紹介します。

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット(UI部品)を利用者に提供します。

 本記事ではWijmoが提供する40種類以上のウィジェットから、すぐに使い始められてWijmoの便利さを体感できるものという観点から以下のウィジェットを紹介します。

  • Dialogウィジェット(wijdialog):ダイアログを表示
  • Calendarウィジェット(wijcalendar):カレンダーを表示
  • LineChartウィジェット(wijlinechart):折れ線グラフを表示

 なお、本記事では基本的な機能を抜粋して紹介しています。機能の詳細やプロパティ・メソッドはWijmoのドキュメントを参照してください。

図1 Webで公開されているWijmoのドキュメント
図1 Webで公開されているWijmoのドキュメント

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • 短納期で高度なWebサイトの作成を求められている方
  • Webサイト作成において充実したサポートを求める方

必要な環境

 Wijmoを利用するにはjQueryおよびjQuery UI(モバイル向けの場合はjQuery Mobile)の参照が必須となり、現行バージョンのWijmoではjQuery 1.9.1とjQuery UI 1.10.1(jQuery Mobile 1.4.0)が指定されています。これらのライブラリをWijmoと一緒に読み込む方法は後述します。

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
  • Internet Explorer 11

Wijmoウィジェットを利用する下準備

 Wijmoのウィジェットを利用するためには、HTMLファイルにおいてWijmoライブラリ一式を読み込む必要があります。リスト1はWijmoライブラリを読み込むための記述で、HTMLファイルのheadタグ内に記述します。(1)(2)がWijmoのCSS指定、(3)(4)は依存ライブラリを自動的に読み込むRequireJsの読み込みおよび設定です。

[リスト1]Wijmoライブラリを読み込む記述
<!-- WijmoテーマCSS ……(1) -->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!-- WijmoウィジェットCSS ……(2) --> 
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20141.34.min.css" rel="stylesheet" type="text/css" /> 

<!-- RequireJs ……(3) -->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

<!-- RequireJsにこのページで読み込むライブラリを設定 ……(4) -->
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20141.34/",
            paths: {
                "jquery": "jquery-1.9.1.min",
                "jquery-ui": "jquery-ui-1.10.1.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

 ウィジェットを利用するときにはRequireJsが提供するrequireメソッドでウィジェットのコードを読み込みます。例えば後述するDialogウィジェット(wijdialog)を利用する場合、リスト2のように記述します。

[リスト2]ウィジェットを読み込む記述
<script type="text/javascript">
    require(["wijmo.wijdialog"], function(){ // wijdialogウィジェットを読み込み
        $(function(){ 
            // ここにウィジェットに関する処理を記述
        }
    }); 
</script>

jQuery UIよりも多機能なDialogウィジェット

 Dialogウィジェット(wijdialog)は、Web画面上にダイアログを表示するウィジェットです。Wijmoが下敷きとしているjQuery UIにもダイアログウィジェットが存在しますが、Wijmoのダイアログウィジェットには以下の機能が追加されています。ここでは追加された機能を中心に紹介していきます。

  • ダイアログの最大化・最小化
  • ダイアログの固定
  • コンテンツの切り替え・再読み込み

 あるHTML要素をダイアログとして表示する記述はリスト3です。表示されるダイアログの右上には、左から順に以下のボタンが表示されます。

  • ダイアログ固定:ダイアログをマウスでドラッグできるかどうかを切り替える
  • 更新:ダイアログ内容を更新する
  • 折りたたみ:ダイアログを折りたたむ(上部タイトルバーのみ表示)
  • 最小化:ダイアログを最小化する
  • 最大化:ダイアログを最大化する
  • 閉じる:ダイアログを閉じる
[リスト3]Dialogウィジェットの設定
require(["wijmo.wijdialog"], function(){ 
    $(function(){ 
        $("#dialog").wijdialog({ 
            autoOpen: true
        }); 
    }); 
}); 
図2 リスト3で表示されるダイアログ
図2 リスト3で表示されるダイアログ

 ダイアログのautoOpenプロパティにtrueを設定することで、ページ表示直後からダイアログを表示状態にすることができます。ページ表示後にダイアログを表示・非表示にするにはそれぞれopen・closeメソッドを使用します。

[リスト4]ダイアログの表示・非表示
$("#dialog").wijdialog("open");  // ダイアログを表示
$("#dialog").wijdialog("close"); // ダイアログを非表示

 ダイアログ右上に表示されるボタン(閉じるボタンを除く)はcaptionButtonsプロパティを指定することで非表示にすることができます。閉じるボタン以外をすべて表示しない指定方法はリスト5になります。

[リスト5]captionButtonsオプションの指定
captionButtons: {
    pin:      { visible: false }, // ダイアログ固定(Pin)ボタンを非表示にする
    refresh:  { visible: false }, // 更新(Refresh)ボタンを非表示にする
    toggle:   { visible: false }, // ダイアログ折りたたみ(Toggle)ボタンを非表示にする
    minimize: { visible: false }, // 最小化(Minimize)ボタンを非表示にする
    maximize: { visible: false }  // 最大化(Maximize)ボタンを非表示にする
} 

 contentUrlプロパティにURLを指定することで、ダイアログ内にWebページを表示することができます。

[リスト6]ダイアログ内にWebページを表示する指定
$("#dialog").wijdialog({
    contentUrl: "http://codezine.jp/"
}); 
図3 ダイアログ内にWebページを表示できる
図3 ダイアログ内にWebページを表示できる

 なおcontentUrlプロパティの値を変更することで、表示後に内容を差し替えることも可能です。ダウンロードできるサンプルコードには内容を変更する処理の例が含まれています。

手軽にカレンダーを表示できるCalendarウィジェット

 Web画面で年月日を表示したり入力したりする場合、簡単にカレンダーを表示できると便利です。Wijmoではカレンダーを表示するためのCalendarウィジェット(wijcalendar)が提供されています。jQuery UIで提供されるカレンダーウィジェット(DatePicker)にはない以下の機能を備えています。

  • 月切り替え時アニメーションの指定
  • 月プレビュー(前後月カレンダーを表示)
  • クイックナビゲーション(年単位の切替ボタン)

 単純にカレンダーを表示するためにはリスト7のように記述します。なおリスト7には日本語で自然な表示を行うための記述が含まれています。

[リスト7]Calendarウィジェットの表示
require(["wijmo.wijcalendar", "globalize",  "globalize.cultures"], function(){
    $(function(){
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#calendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D"     // ツールチップ書式
        });
    });
}); 

 カレンダーの挙動はwijcalendarメソッドの引数によりカスタマイズ可能です。例えばカレンダーの月を切り替える際のアニメーションは、directionプロパティで方向を、durationプロパティで速度(時間)を、easingプロパティで速度変化を、それぞれ設定できます。

[リスト8]アニメーションの設定
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
    $(function (){
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#calendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D",    // ツールチップ書式
            direction: "vertical", // アニメーション方向(縦)
            duration: 200,         // アニメーション時間(200ms)
            easing: "linear"       // アニメーション速度変化(一定速度)
        });
    });
});

 月プレビューを有効にするためにはallowPreviewプロパティをtrueに設定します。またクイックナビゲーションを有効にするためにはnavButtonsプロパティに"quick"を指定します。

[リスト9]月プレビュー、クイックナビゲーションの設定
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
    $(function (){
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#calendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D",    // ツールチップ書式
            allowPreview: true,    // 月プレビュー有効
            navButtons: "quick"    // クイックナビゲーション有効
        });
    });
});

 月プレビューを有効にするとカレンダーの左右にコントロールが表示され、マウスをポイントすると前月または次月のカレンダーがプレビュー表示されます。

図4 月プレビューにより次月のカレンダーが表示される
図4 月プレビューにより次月のカレンダーが表示される

 またクイックナビゲーションを有効にするとカレンダー上部に切替ボタンが2種類表示され、外側のボタンを押すと年単位でカレンダーが切り替わるようになります。なおjQuery UIのカレンダーウィジェットには年選択プルダウンを表示させるchangeYearプロパティが存在しますが、クイックナビゲーションのような前年/次年ボタンは表示されません。

図5 クイックナビゲーションの表示
図5 クイックナビゲーションの表示

 現実的には日付の入力が必要となった時のみカレンダーを表示するといったことが多いのではないでしょうか。Calendarウィジェットはこのような利用法に対応するポップアップモードを備えます。リスト10はポップアップモードを利用して、選択した日付をテキストボックスに反映させる例です。

[リスト10]カレンダー選択日付の取得
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){ 
    $(function(){ 
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#wijcalendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D",    // ツールチップ書式

            // ポップアップモードを有効化
            popupMode:"true", 
            // 日付選択時にテキストボックスに反映する処理
            selectedDatesChanged: function () { 
                var selDate = $(this).wijcalendar("getSelectedDate"); 
                if (selDate) { 
                    $("#txtbox_selected_date").val(selDate.toDateString()); 
                }
            }
        });
        // テキストボックスクリック時にカレンダーを表示
        $("#txtbox_selected_date").click(function(){
            $("#wijcalendar1").wijcalendar("popup", { 
                of: $("#txtbox_selected_date") 
            });
        });
    });
});
図6 テキストボックス選択でカレンダーが表示され、カレンダーで選択した日がテキストボックスに反映される
図6 テキストボックス選択でカレンダーが表示され、カレンダーで選択した日がテキストボックスに反映される

折れ線グラフを描画できるLineChartウィジェット

 Wijmoにはグラフを描画するウィジェットとして以下が含まれています。

  • 棒グラフ(BarChartウィジェット)
  • バブルチャート(BubbleChartウィジェット)
  • 複合グラフ(CompositeChartウィジェット)
  • 折れ線グラフ(LineChartウィジェット)
  • 円グラフ(PieChartウィジェット)
  • 散布図(ScatterChartウィジェット)

 これらのウィジェットにはグラフにするデータのほか、x軸・y軸のラベル、グラフ表示色やアニメーションなどが指定でき、Webブラウザ上でさまざまなグラフを表示することができます。

 前回記事では棒グラフ(BarChartウィジェット)を簡単に紹介しましたが、今回は別の例として折れ線グラフを描画するLineChartウィジェット(wijlinechart)を紹介します。

 シンプルなLineChartウィジェットの使用例をリスト11に示します。

[リスト11] LineChartウィジェットによる折れ線グラフの表示
require(["wijmo.wijlinechart"], function(){ 
    $(function(){ 
        $("#wijlinechart1").wijlinechart({
            header:{text:"電池使用時の電圧変化"},
            axis:{ // 軸の設定 …… (1)
                x:{text:"時間(h)"},
                y:{text:"電圧(V)"}
            },
            showChartLabels: false, // 折れ線グラフ内に値を表示しない
            seriesList:[ // データの設定 …… (2)
                {
                    label:"電池A",
                    data:{
                        x:["0", "1", "2", "3", "4", "5"],
                        y:[1.5, 1.45, 1.35, 1.25, 1.12, 0.95]
                    }
                },
                {
                    label:"電池B",
                    data:{
                        x:["0", "1", "2", "3", "4", "5"],
                        y:[1.2, 1.2, 1.18, 1.16, 1.08, 0.9]
                    }
                }
            ],
            seriesStyles:[ // データ表示形式 …… (3)
                {stroke:"rgb(0, 0, 255)", "stroke-width":2},
                {stroke:"rgb(255, 0, 0)", "stroke-width":2},
            ]
        });
    }); 
});
図7 リスト11で表示される折れ線グラフ
図7 リスト11で表示される折れ線グラフ

 まずaxisプロパティ(1)においてグラフのx軸・y軸の設定(ここでは軸タイトルの指定)を行います。グラフに表示するデータはseriesListプロパティ(2)で指定します。seriesListプロパティは配列形式になっており複数のデータを指定可能です。ここでは電池Aと電池Bの2系統のデータを指定しています。seriesStylesプロパティ(3)では折れ線の表示型式(色、太さ)を設定しています。

 リスト11では表示するデータを直接seriesListプロパティに設定していますが、別の配列に保持されているデータを間接的に参照することも可能です。例えばリスト12のようなデータ配列を参照してグラフを描画するseriesList指定はリスト13のようになります。

[リスト12] グラフに表示させるデータを格納した配列
var batteryA = [
    {hour:"0", voltage:1.5},
    {hour:"1", voltage:1.45},
    {hour:"2", voltage:1.35},
    {hour:"3", voltage:1.25},
    {hour:"4", voltage:1.12},
    {hour:"5", voltage:0.95}
];
var batteryB = [
    {hour:"0", voltage:1.2},
    {hour:"1", voltage:1.2},
    {hour:"2", voltage:1.18},
    {hour:"3", voltage:1.16},
    {hour:"4", voltage:1.08},
    {hour:"5", voltage:0.9}
];
[リスト13] リスト12の配列データをグラフ表示するseriesListプロパティの指定
seriesList:[
    {
        label:"電池A",
        dataSource:batteryA,
        data:{
            x:{bind:"hour"},
            y:{bind:"voltage"}
        }
    },
    {
        label:"電池B",
        dataSource:batteryB,
        data:{
            x:{bind:"hour"},
            y:{bind:"voltage"}
        }
    }
],

 このような間接的なデータ参照は、JavaScriptで取得・処理したデータを元にグラフを表示するような場合に便利に活用できます。

まとめ

 本記事では、JavaScriptライブラリ「Wijmo」が提供するウィジェットのいくつかについて、その機能やコーディング方法を紹介しました。WijmoはjQueryやjQuery UIをその下敷きにしているため、jQuery操作の延長線上でWijmoウィジェットの機能を活用できます。Wijmoのウィジェットは種類が多く、かつそれぞれに多くの便利な機能がつめ込まれており、今回紹介したのはあくまでその一部です。今回紹介しきれなかったウィジェットのより詳細な機能については本連載で随時紹介していきたいと思います。

 次回はWebページ上でExcelのようなスプレッドシート機能を実現できるWijmoの機能であるSpreadJSを取り上げます。

参考資料

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5