Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

「Wijmo(ウィジモ) 5」を使うならAngularJSとの組み合わせがオススメ

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第2回

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

 本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo(ウィジモ)」について、サンプルとともに利用例を紹介します。今回はWijmoのニューバージョン「Wijmo 5」をJavaScriptライブラリ「AngularJS」と組み合わせて活用する方法を説明します。

はじめに

 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を用いることができます。

図1 公式サイトでもWijmo 5のAngularJSサポートを積極的にアピール
図1 公式サイトでもWijmo 5のAngularJSサポートを積極的にアピール

 本記事では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は以下のような機能を開発者に提供します。

表1 AngularJSが提供する機能
機能 内容
モデルとビューの分離 JavaScriptでモデルを、HTMLでビューをそれぞれ表現
双方向データバインディング モデルの値をビューに反映し、ビューでの変更がモデルに反映される
ディレクティブ タグや属性を独自に定義して使用できる

 AngularJSについては以前のWijmoとの組み合わせを紹介した記事や、AngularJSの連載記事も参照してください。

AngularJSのディレクティブでWijmo 5のコントロールを記述

 Wijmo 5が提供するすべてのコントロールには、AngularJSのディレクティブ(独自のタグ)が定義されています。AngularJSのディレクティブを利用することで、通常のHTMLタグの延長線上でWijmo 5のコントロールを記述できます。

 リスト1はWijmo 5とAngularJSでゲージ(LinearGauge)を表示するサンプルです。比較のため、表示や挙動は前回記事で紹介した(AngularJSを利用しない)サンプルと同一にしています。

リスト1 Wijmo 5とAngularJSでLinearGaugeを表示(001_wijmo_angular1.html)
<!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)のテキスト表示に反映されます。

図2 LinearGaugeを操作すると設定値がテキストで表示される(001_wijmo_angular1.html)
図2 LinearGaugeを操作すると設定値がテキストで表示される(001_wijmo_angular1.html)

さまざまな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オブジェクトです。

リスト2 Wijmo 5とAngularJSでカレンダーと日時の入力部品を表示(002_wijmo_angular2.html)
<!-- 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つのコントロールで変更した値が他のコントロールに反映されます。

図3 リスト2の実行結果。3つのコントロールが日時の値を共有(002_wijmo_angular2.html)
図3 リスト2の実行結果。3つのコントロールが日時の値を共有(002_wijmo_angular2.html)

グリッドを表示するFlexGridコントロール

 wijmo.grid.js(またはwijmo.grid.min.js)に含まれるFlexGridは、.NETなど他環境で提供されている同名グリッド部品のJavaScript版です。FlexGridにデータを表示するにはリスト3のように記述します。

リスト3 Wijmo 5とAngularJSでグリッドを表示(003_wijmo_angular3.html)
<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のように設定します。

リスト4 リスト3のグリッドに表示するデータの記述(003_wijmo_angular3.html)
// スコープに変数を設定
$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にも反映され、画面下部の表にも反映されます。

図4 FlexGridにデータを表示した例。編集も可能(003_wijmo_angular3.html)
図4 FlexGridにデータを表示した例。編集も可能(003_wijmo_angular3.html)

チャートを表示するFlexChartコントロール

 wijmo.chart.js(またはwijmo.chart.min.js)に含まれるFlexChartはチャート(グラフ)を表示するコントロールです。FlexChartにデータを表示するにはリスト5のように記述します。

リスト5 Wijmo 5とAngularJSでチャートを表示(004_wijmo_angular4.html)
<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のように設定します。

リスト6 リスト5のチャートに表示するデータの記述(004_wijmo_angular4.html)
// スコープに変数を設定
$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のようにチャートが表示されます。

図5 FlexChartでチャートを表示した例(004_wijmo_angular4.html)
図5 FlexChartでチャートを表示した例(004_wijmo_angular4.html)

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmoの最新版「Wijmo 5」とAngularJSを組み合わせた利用法をサンプルコードを交えて紹介しました。AngularJSのディレクティブ(独自タグ)機能により、Wijmo 5のコントロールをHTMLタグの延長線上で直感的に記述することができます。また双方向データバインディングにより、コントロールの操作によるデータ変更を容易に他のコントロールや画面表示に反映できます。

 AngularJSと組み合わせたWijmo 5の活用にはAngularJSについて最低限の理解が必要ですが、それを乗り越えることでWijmo 5の記述をシンプルに行えるようになります。AngularJSの連載記事なども参考に、ぜひチャレンジしてみてください。なお次回以降の連載記事では基本的にAngularJSを用いたサンプルを紹介します。

 次回記事では今回も取り上げたグリッド部品「FlexGrid」について、より掘り下げて説明していきます。

参考資料

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

著者プロフィール

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

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

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

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

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