はじめに
Wijmo（ウィジモ）は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。
2015年1月にWijmoの新版「Wijmo 5」が国内でも提供開始されました。Wijmo 5は従来のWijmo（Wijmo 3）との過去互換性や古いブラウザのサポートを切り捨てることで、より高速／軽量なライブラリになっています。
Wijmo 5の特徴として、JavaScriptライブラリ「AngularJS」の充実したサポートを挙げることができます。以前の記事で紹介したように従来のWijmoでもAngularJSを利用できましたが、Wijmo 3におけるAngularJSサポートがオプション的な位置づけだったのに対して、Wijmo 5はAngularJSで利用する方法をむしろ主流と位置づけ、ほとんどのサンプルでAngularJSが利用されています。Wijmo 5のすべてのコントロールをAngularJSのディレクティブ（独自のタグ）で記述でき、AngularJSの一部のようにWijmo 5を用いることができます。
本記事ではWijmo 5とAngularJSを組み合わせて使用する方法を、サンプルを交えて説明していきます。
対象読者
- WebサイトやWebアプリケーションのレベルをワンランク上げたい方
- より軽量／高速なJavaScriptのUI部品を探している方
- AngularJSとWijmoの組み合わせを本格的に活用したい方
必要な環境
Wijmo 5はECMAScript 5をサポートする、いわゆるモダンブラウザをターゲットにしており、WijmoのWebサイトでは以下のブラウザがサポート対象として案内されています。
- Internet Explorer：9以上
- Google Chrome：5以上
- Mozilla Firefox：4以上
- Safari：5以上
- Opera：12以上
今回は以下の環境で動作を確認しています。
-
Windows 7 64bit版
- Internet Explorer 11
AngularJSの紹介
AngularJSはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、公式サイトからMITライセンスで配布されています。AngularJSは以下のような機能を開発者に提供します。
| 機能 | 内容 |
|---|---|
| モデルとビューの分離 | JavaScriptでモデルを、HTMLでビューをそれぞれ表現 |
| 双方向データバインディング | モデルの値をビューに反映し、ビューでの変更がモデルに反映される |
| ディレクティブ | タグや属性を独自に定義して使用できる |
AngularJSについては以前のWijmoとの組み合わせを紹介した記事や、AngularJSの連載記事も参照してください。
AngularJSのディレクティブでWijmo 5のコントロールを記述
Wijmo 5が提供するすべてのコントロールには、AngularJSのディレクティブ（独自のタグ）が定義されています。AngularJSのディレクティブを利用することで、通常のHTMLタグの延長線上でWijmo 5のコントロールを記述できます。
リスト1はWijmo 5とAngularJSでゲージ（LinearGauge）を表示するサンプルです。比較のため、表示や挙動は前回記事で紹介した（AngularJSを利用しない）サンプルと同一にしています。
<!DOCTYPE html> <html ng-app="MyApp"> <!-- モジュールを指定 ...（1）--> <head> <meta charset="UTF-8"> <title>Wijmo 5 + AngularJS サンプル1</title> <!-- Wijmo ...（2）--> <script src="http://cdn.wijmo.com/5.20143.27/controls/wijmo.min.js" type="text/javascript"></script> <link href="http://cdn.wijmo.com/5.20143.27/styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmoコントロール ...（3）--> <script src="http://cdn.wijmo.com/5.20143.27/controls/wijmo.gauge.min.js" type="text/javascript"></script> <!-- Wijmoテーマ ...（4）--> <link href="http://cdn.wijmo.com/5.20143.27/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmoカルチャ ...（5）--> <script src="http://cdn.wijmo.com/5.20143.27/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script> <!-- AngularJSとWijmoのAngularディレクティブ ...（6）--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/5.20143.27/interop/angular/wijmo.angular.min.js" type="text/javascript"></script> <script type="text/javascript"> // Wijmoモジュール"wj"を指定して新規モジュールを作成 ... （7） var myApp = angular.module("MyApp", ["wj"]); // モジュールにコントローラーを定義 ...（8） myApp.controller("MyController", ["$scope", function($scope) { // スコープに変数を設定 $scope.curValue = 50; // 現在値50 $scope.min = 0; // 最小値0 $scope.max = 100; // 最大値100 $scope.isReadOnly = false; // 操作可能 }]); </script> </head> <!-- bodyタグ内でMyControllerを参照 ...（9）--> <body ng-controller="MyController"> <h1>Wijmo 5 + AngularJS サンプル1</h1> <!-- LinearGauge表示 ...（10）--> <wj-linear-gauge value="curValue" min="{{min}}" max="{{max}}" is-read-only="{{isReadOnly}}" style="width:400px"> </wj-linear-gauge> <!-- LinearGauge値表示 ...（11）--> <p>value：{{curValue}}</p> </body> </html>
（2）～（5）でWijmo 5本体を読み込んでいます。（6）はAngularJSの本体およびWijmoのディレクティブ定義で、AngularJSとWijmoを組み合わせて使う場合には読み込む必要があります。
（1）（7）（8）では「モジュール」「コントローラー」「スコープ」を記述しています。AngularJSのモジュールは機能をグループ分けする単位で、コントローラーは機能を実現するための変数やメソッドをスコープに設定し、スコープはHTMLに対して変数やメソッドを公開する役割を担います。リスト1ではMyAppモジュールにMyControllerコントローラーを定義し、公開する変数として現在値（curValue=50）、最小値（min=0）、最大値（max=100）、読み取り専用かどうか（isReadOnly=false）をスコープに設定しています。
（9）でMyControllerコントローラーを参照します。（10）がWijmo 5のLinearGaugeコントロールを表す記述です。「wj-linear-gauge」というタグ名でコントロールの種類を表し、タグの属性でコントロールのプロパティを指定します。「{{（変数名またはメソッド）}}」という記述の箇所に、変数の値やメソッドの返り値が挿入されます。ここでは最小値（min）、最大値（max）、読み取り専用かどうか（is-read-only）の属性に（8）で指定した値を指定しています。
一方でwj-linear-gaugeの現在値（value）属性には変数名そのものを指定します。この記述によりwj-linear-gaugeコントロールと変数curValueが関連付けられ（バインドされ）、コントロールと変数の一方が変更されると他方に反映されるようになります（AngularJSの「双方向データバインディング」と呼ばれる仕組みです）。
最後に（11）ではcurValueの値を画面に表示します。
リスト1を実行するとLinearGaugeが表示され、マウスクリックや（タッチスクリーンの）画面タッチで操作することができます。また双方向データバインディングにより、LinearGaugeの操作で変数curValueの値が変更され、（11）のテキスト表示に反映されます。
さまざまなWijmo 5コントロールをディレクティブで記述
リスト1で紹介したLinearGaugeコントロールだけではなく、すべてのWijmo 5コントロールには「wj-」で始まるAngularJSディレクティブが定義されています。以下ではWijmo 5コントロールのディレクティブ使用例をいくつか説明します。
カレンダーや日時を扱うCalendar、InputDate、InputTimeコントロール
wijmo.input.js（またはwijmo.input.min.js）に含まれるCalendarはカレンダーを表示するコントロール、InputDateとInputTimeはそれぞれ日付と時間を表示・入力するコントロールです。これらを表示する記述はリスト2のようになります。それぞれwj-calendar、wj-input-date、wj-input-timeディレクティブを使用します。ここでvalue属性に指定されているdateValueはAngularJSのスコープに設定したJavaScriptのDateオブジェクトです。
<!-- Calendar --> <h3>Calendar</h3> <wj-calendar value="dateValue" style="width:400px"> </wj-calendar> <!-- InputDate／InputTime --> <h3>InputDate／InputTime</h3> <wj-input-date value="dateValue"></wj-input-date> <wj-input-time value="dateValue"></wj-input-time>
リスト2を実行すると図3のようにカレンダーと入力部品が表示されます。各コントロールのvalue属性に同一変数（dateValue）が指定されているので、1つのコントロールで変更した値が他のコントロールに反映されます。
グリッドを表示するFlexGridコントロール
wijmo.grid.js（またはwijmo.grid.min.js）に含まれるFlexGridは、.NETなど他環境で提供されている同名グリッド部品のJavaScript版です。FlexGridにデータを表示するにはリスト3のように記述します。
<wj-flex-grid items-source="gridData" style="width:600px">
<wj-flex-grid-column header="製品名" binding="name"></wj-flex-grid-column>
<wj-flex-grid-column header="メーカー" binding="vendor"></wj-flex-grid-column>
<wj-flex-grid-column header="メモリ" binding="ram"></wj-flex-grid-column>
<wj-flex-grid-column header="OS" binding="version"></wj-flex-grid-column>
</wj-flex-grid>
wj-flex-gridディレクティブがグリッド全体を表し、items-source属性に設定されたgridDataという変数のデータがグリッドに反映されます。wj-flex-grid-columnはグリッドの1列を表し、binding属性の値に対応するgridData内のデータ項目をグリッドに表示します。
グリッドに表示するデータを含む変数gridDataはAngularJSのスコープにリスト4のように設定します。
// スコープに変数を設定
$scope.gridData = [
{
"name":"iPhone 6",
"vendor": "Apple",
"ram": "1GB",
"version":"iOS 8.1.3"
},
{
"name":"iPhone 6 Plus",
"vendor": "Apple",
"ram": "1GB",
"version":"iOS 8.1.3"
},
{
"name":"Nexus 6",
"vendor": "Google",
"ram": "3GB",
"version":"Android 5.0.2"
},
{
"name":"Zenfone 5",
"vendor": "ASUS",
"ram": "2GB",
"version":"Android 4.4.2"
}
];
リスト3、4を実行すると図4のように表示されます。双方向データバインディングにより、グリッドで値を変更すると変数gridDataにも反映され、画面下部の表にも反映されます。
チャートを表示するFlexChartコントロール
wijmo.chart.js（またはwijmo.chart.min.js）に含まれるFlexChartはチャート（グラフ）を表示するコントロールです。FlexChartにデータを表示するにはリスト5のように記述します。
<wj-flex-chart items-source="chartData" binding-x="quarter" style="width:400px;height:300px;">
<wj-flex-chart-series name="訪問数" binding="visit">
</wj-flex-chart-series>
<wj-flex-chart-series name="売上高" binding="sales" chart-type="LineSymbols">
</wj-flex-chart-series>
<wj-flex-chart-legend position="Bottom">
</wj-flex-chart-legend>
</wj-flex-chart>
wj-flex-chartディレクティブがチャート全体を表し、items-source属性に設定されたchartDataという変数のデータがチャートに反映されます。wj-flex-chart-seriesはチャートの1系列を表し、binding属性の値に対応するchartData内のデータ項目をチャートに表示します。ここでは2系統のwj-flex-chart-seriesを記述しています。2系統の片方にはchart-type属性を指定して線グラフにしています。chart-type属性を指定しない場合は棒グラフになります。
またwj-flex-chart-legendはグラフの凡例を表します。ここでは表示位置を表すposition属性をBottom（＝下）と設定しています。position属性はこの他Left（＝左）、Right（＝右）、Top（上）、None（＝表示なし）が指定可能で、指定しない場合は右側に凡例が表示されます。
チャートに表示するデータを含む変数chartDataはAngularJSのスコープにリスト6のように設定します。
// スコープに変数を設定
$scope.chartData = [
{
"quarter":"1Q",
"visit": 120000,
"sales": 300000
},
{
"quarter":"2Q",
"visit": 400000,
"sales": 325000
},
{
"quarter":"3Q",
"visit": 80000,
"sales": 120000
},
{
"quarter":"4Q",
"visit": 500000,
"sales": 30000
}
];
リスト5、6を実行すると図5のようにチャートが表示されます。
まとめ
本記事では、グレープシティのJavaScriptライブラリWijmoの最新版「Wijmo 5」とAngularJSを組み合わせた利用法をサンプルコードを交えて紹介しました。AngularJSのディレクティブ（独自タグ）機能により、Wijmo 5のコントロールをHTMLタグの延長線上で直感的に記述することができます。また双方向データバインディングにより、コントロールの操作によるデータ変更を容易に他のコントロールや画面表示に反映できます。
AngularJSと組み合わせたWijmo 5の活用にはAngularJSについて最低限の理解が必要ですが、それを乗り越えることでWijmo 5の記述をシンプルに行えるようになります。AngularJSの連載記事なども参考に、ぜひチャレンジしてみてください。なお次回以降の連載記事では基本的にAngularJSを用いたサンプルを紹介します。
次回記事では今回も取り上げたグリッド部品「FlexGrid」について、より掘り下げて説明していきます。
