はじめに
Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット（UI部品）を利用者に提供します。
本記事ではWijmoが提供する40種類以上のウィジェットから、すぐに使い始められてWijmoの便利さを体感できるものという観点から以下のウィジェットを紹介します。
- Dialogウィジェット（wijdialog）：ダイアログを表示
- Calendarウィジェット（wijcalendar）：カレンダーを表示
- LineChartウィジェット（wijlinechart）：折れ線グラフを表示
なお、本記事では基本的な機能を抜粋して紹介しています。機能の詳細やプロパティ・メソッドは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の読み込みおよび設定です。
<!-- 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のように記述します。
<script type="text/javascript">
require(["wijmo.wijdialog"], function(){ // wijdialogウィジェットを読み込み
$(function(){
// ここにウィジェットに関する処理を記述
}
});
</script>
jQuery UIよりも多機能なDialogウィジェット
Dialogウィジェット（wijdialog）は、Web画面上にダイアログを表示するウィジェットです。Wijmoが下敷きとしているjQuery UIにもダイアログウィジェットが存在しますが、Wijmoのダイアログウィジェットには以下の機能が追加されています。ここでは追加された機能を中心に紹介していきます。
- ダイアログの最大化・最小化
- ダイアログの固定
- コンテンツの切り替え・再読み込み
あるHTML要素をダイアログとして表示する記述はリスト3です。表示されるダイアログの右上には、左から順に以下のボタンが表示されます。
- ダイアログ固定：ダイアログをマウスでドラッグできるかどうかを切り替える
- 更新：ダイアログ内容を更新する
- 折りたたみ：ダイアログを折りたたむ（上部タイトルバーのみ表示）
- 最小化：ダイアログを最小化する
- 最大化：ダイアログを最大化する
- 閉じる：ダイアログを閉じる
require(["wijmo.wijdialog"], function(){
$(function(){
$("#dialog").wijdialog({
autoOpen: true
});
});
});
ダイアログのautoOpenプロパティにtrueを設定することで、ページ表示直後からダイアログを表示状態にすることができます。ページ表示後にダイアログを表示・非表示にするにはそれぞれopen・closeメソッドを使用します。
$("#dialog").wijdialog("open"); // ダイアログを表示
$("#dialog").wijdialog("close"); // ダイアログを非表示
ダイアログ右上に表示されるボタン（閉じるボタンを除く）はcaptionButtonsプロパティを指定することで非表示にすることができます。閉じるボタン以外をすべて表示しない指定方法はリスト5になります。
captionButtons: {
pin: { visible: false }, // ダイアログ固定（Pin）ボタンを非表示にする
refresh: { visible: false }, // 更新（Refresh）ボタンを非表示にする
toggle: { visible: false }, // ダイアログ折りたたみ（Toggle）ボタンを非表示にする
minimize: { visible: false }, // 最小化（Minimize）ボタンを非表示にする
maximize: { visible: false } // 最大化（Maximize）ボタンを非表示にする
}
contentUrlプロパティにURLを指定することで、ダイアログ内にWebページを表示することができます。
$("#dialog").wijdialog({
contentUrl: "http://codezine.jp/"
});
なおcontentUrlプロパティの値を変更することで、表示後に内容を差し替えることも可能です。ダウンロードできるサンプルコードには内容を変更する処理の例が含まれています。
手軽にカレンダーを表示できるCalendarウィジェット
Web画面で年月日を表示したり入力したりする場合、簡単にカレンダーを表示できると便利です。Wijmoではカレンダーを表示するためのCalendarウィジェット（wijcalendar）が提供されています。jQuery UIで提供されるカレンダーウィジェット（DatePicker）にはない以下の機能を備えています。
- 月切り替え時アニメーションの指定
- 月プレビュー（前後月カレンダーを表示）
- クイックナビゲーション（年単位の切替ボタン）
単純にカレンダーを表示するためにはリスト7のように記述します。なおリスト7には日本語で自然な表示を行うための記述が含まれています。
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
$(function(){
// 日本語カルチャーを設定
Globalize.culture("ja-JP");
$("#calendar1").wijcalendar({
titleFormat: "Y", // タイトル書式
toolTipFormat: "D" // ツールチップ書式
});
});
});
カレンダーの挙動はwijcalendarメソッドの引数によりカスタマイズ可能です。例えばカレンダーの月を切り替える際のアニメーションは、directionプロパティで方向を、durationプロパティで速度（時間）を、easingプロパティで速度変化を、それぞれ設定できます。
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"を指定します。
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
$(function (){
// 日本語カルチャーを設定
Globalize.culture("ja-JP");
$("#calendar1").wijcalendar({
titleFormat: "Y", // タイトル書式
toolTipFormat: "D", // ツールチップ書式
allowPreview: true, // 月プレビュー有効
navButtons: "quick" // クイックナビゲーション有効
});
});
});
月プレビューを有効にするとカレンダーの左右にコントロールが表示され、マウスをポイントすると前月または次月のカレンダーがプレビュー表示されます。
またクイックナビゲーションを有効にするとカレンダー上部に切替ボタンが2種類表示され、外側のボタンを押すと年単位でカレンダーが切り替わるようになります。なおjQuery UIのカレンダーウィジェットには年選択プルダウンを表示させるchangeYearプロパティが存在しますが、クイックナビゲーションのような前年／次年ボタンは表示されません。
現実的には日付の入力が必要となった時のみカレンダーを表示するといったことが多いのではないでしょうか。Calendarウィジェットはこのような利用法に対応するポップアップモードを備えます。リスト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")
});
});
});
});
折れ線グラフを描画できるLineChartウィジェット
Wijmoにはグラフを描画するウィジェットとして以下が含まれています。
- 棒グラフ（BarChartウィジェット）
- バブルチャート（BubbleChartウィジェット）
- 複合グラフ（CompositeChartウィジェット）
- 折れ線グラフ（LineChartウィジェット）
- 円グラフ（PieChartウィジェット）
- 散布図（ScatterChartウィジェット）
これらのウィジェットにはグラフにするデータのほか、x軸・y軸のラベル、グラフ表示色やアニメーションなどが指定でき、Webブラウザ上でさまざまなグラフを表示することができます。
前回記事では棒グラフ（BarChartウィジェット）を簡単に紹介しましたが、今回は別の例として折れ線グラフを描画するLineChartウィジェット（wijlinechart）を紹介します。
シンプルなLineChartウィジェットの使用例をリスト11に示します。
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},
]
});
});
});
まずaxisプロパティ（1）においてグラフのx軸・y軸の設定（ここでは軸タイトルの指定）を行います。グラフに表示するデータはseriesListプロパティ（2）で指定します。seriesListプロパティは配列形式になっており複数のデータを指定可能です。ここでは電池Aと電池Bの2系統のデータを指定しています。seriesStylesプロパティ（3）では折れ線の表示型式（色、太さ）を設定しています。
リスト11では表示するデータを直接seriesListプロパティに設定していますが、別の配列に保持されているデータを間接的に参照することも可能です。例えばリスト12のようなデータ配列を参照してグラフを描画するseriesList指定はリスト13のようになります。
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}
];
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を取り上げます。
