さまざまな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」について、より掘り下げて説明していきます。
