Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

さまざまな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...

バックナンバー

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

もっと読む

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