Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

最新フレームワーク「Angular 2」と組み合わせて「Wijmo(ウィジモ) 5」を使おう

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

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

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

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。

 一方、Angular 2は、Googleとオープンソースコミュニティが開発しているJavaScriptフレームワーク「AngularJS」の新バージョンです。Wijmo 5はもともと、AngularJSの従来バージョン(AngularJS 1)での利用をサポートしていましたが、Wijmo 5の現行バージョン「2016J v2」に対するアップデート(5.20162.231)で、Angular 2(2.0.0)での利用をサポートしました。

 本記事では、Wijmo 5をAngular 2と組み合わせて利用する設定や実装方法を、サンプルをあげながら説明していきます。

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • より軽量/高速なJavaScriptのUI部品を探している方
  • やはりフレームワークは新しいものに限るという方

必要な環境

 Wijmo 5はECMAScript 5に対応する、いわゆるモダンブラウザをサポートします。対応ブラウザはWijmoのWebサイトで案内されています。

 Angular 2のプロジェクトを実行するにはNode.jsが必要となります。また、Angular 2は現在もバージョンアップが続いていますが、本記事では、Wijmo 5が正式にサポートするバージョン2.0.0を利用します。

 以上より、今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Wijmo 5 5.20162.231 体験版
    • Angular 2 2.0.0
    • Node.js v6.9.2 64bit版
    • Microsoft Edge 38.14393.0.0

 なお、Angular 2の開発ではJavaScriptそのものではなくTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)を利用する場合が多く、本記事でもTypeScriptを利用します。Wijmo 5はTypeScriptで開発されており、この意味でAngular 2との親和性が高いといえます。

プロジェクトの環境設定

 最初に、Angular 2とWijmo 5のプロジェクトを作る手順を、順に説明していきます。

Angular 2のプロジェクトテンプレートを取得

 Angular 2のプロジェクトのテンプレートは、GitHubで公開されています。今回はAngular 2(バージョン2.0.0)のテンプレートをダウンロードします。

図1 GitHubからAngular 2のプロジェクトテンプレートをダウンロード
図1 GitHubからAngular 2のプロジェクトテンプレートをダウンロード

 ダウンロードした圧縮ファイルを展開後、まずプロジェクトフォルダ内で、Node.jsのコマンド「npm install」を実行して、必要なライブラリをダウンロードします。完了後に「npm start」コマンドを実行すると、WebブラウザでWebページを表示します。プロジェクトテンプレートの詳細は公式サイトも参照してください。ダウンロードできるサンプルコードにもプロジェクトテンプレート(angular-startup)を含めています。

Wijmo 5のモジュールをプロジェクトテンプレートに設定

 Wijmo 5が利用できるよう、プロジェクトテンプレートを設定していきます。まず、Wijmo 5が含まれるWijmo Enterpriseの体験版を、グレープシティのWebページからダウンロードします。

図2 Wijmoの体験版をダウンロード
図2 Wijmoの体験版をダウンロード

 ダウンロードした圧縮ファイルから、Wijmo 5のフォルダ(Wijmo5EntEval_5.20162.231)を展開して、プロジェクトテンプレートと同じフォルダに配置します。このときフォルダ名を「wijmo_download」に変更しておきます。

図3 Wijmo 5を展開して配置
図3 Wijmo 5を展開して配置

 次に、プロジェクトで利用するライブラリを定義するpackage.jsonファイルのdependencies属性に、リスト1のようにWijmoの定義を追記します。

リスト1 Wijmoのパッケージ定義(wijmo-001-gauge/package.json)
"dependencies": {
  (中略)
  "wijmo": "../wijmo_download/NpmImages/wijmo-system-min"
},

 リスト1の記述後に「npm install」コマンドを実行すると、Wijmo 5のフォルダからプロジェクト内(node_modules/wijmoフォルダ)に、Wijmo 5のライブラリ一式がコピーされます。

 さらに、モジュールローダーSystemJSの設定ファイル(systemjs.config.js)に、Wijmoの設定をリスト2のように記述します。

リスト2 SystemJSへのWijmo設定(wijmo-001-gauge/systemjs.config.js)
map: {
  (中略)
  // Wijmo ...(1)
  'wijmo': 'node_modules/wijmo'
},
packages: {
  (中略)
  // Wijmo ...(2)
  wijmo: {
    defaultExtension: 'js'
  }
}

 (1)は、Wijmoのパッケージがコピーされるnode_modules/wijmoフォルダに短縮名「wijmo」を設定する記述、(2)は、デフォルトのファイル拡張子を「js」に指定する記述です。これらの記述により、「node_modules/wijmo/wijmo.angular2.gauge.js」という実際の相対パスの代わりに、「wijmo/wijmo.angular2.gauge」という記述でWijmoのコンポーネントを指定できるようになります。

[参考]Wijmo 5が対応するモジュール仕様

 今回利用するプロジェクトテンプレートでは、SystemJSと呼ばれるモジュールローダーを利用して、モジュールを動的に参照します。リスト1で指定した「wijmo-system-min」は、SystemJSのモジュール仕様に対応したWijmo 5のモジュールです。

 Wijmo 5では、SystemJSとは別のモジュール仕様であるCommonJSに対応した「wijmo-commonjs-min」、AMD(Asynchronous Module Definition)に対応した「wijmo-amd-min」が提供されており、必要に応じて選択できます。

WijmoのCSSファイルをコピーして参照

 Wijmo 5のフォルダのDist/stylesから、wijmo.min.cssファイルをプロジェクトのルートフォルダにコピーして、index.htmlファイルで参照させます。

リスト3 WijmoのCSSファイルを参照(wijmo-001-gauge/index.html)
<link rel="stylesheet" href="wijmo.min.css">

 ここまでの手順で、Angular 2プロジェクトでWijmoを利用する準備が整いました。

Angular 2でWijmoコンポーネントを活用

 Wijmo 5をAngular 2と組み合わせて使う最初の例として、Wijmo 5の線形ゲージ(WjLinearGauge)コンポーネントをWebページに配置していきます。

図4 WjLinearGaugeをWebページに配置(wijmo-001-gauge)
図4 WjLinearGaugeをWebページに配置(wijmo-001-gauge)

 以下では、Angular 2のモジュールやコンポーネントに対して、Wijmoの記述を追加します。モジュールやコンポーネントの詳細については、CodeZineのAngular 2解説記事も参考にしてください。

 まず、アプリそのものを表すモジュール(ルートモジュール)の定義ファイルapp.module.tsに、リスト4のようにWijmoを設定します。

リスト4 ルートモジュールの記述(wijmo-001-gauge/app/app.module.ts)
// モジュール参照 ...(1)
import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { WjGaugeModule } from "wijmo/wijmo.angular2.gauge";

// コンポーネント参照 ...(2)
import { AppComponent }  from "./app.component";

// モジュール定義 ...(3)
@NgModule({
  imports: [
    BrowserModule,
    WjGaugeModule  // WjGaugeModuleをインポート ...(4)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

 (1)で、このモジュールが参照する外部のモジュールを記述しています。Angular 2が提供するNgModule、BrowserModuleモジュールと同じ記述形式で、Wijmoのゲージモジュール(WjGaugeModule)が記述できます。(2)はこのアプリで表示されるコンポーネントで、詳細は後述します。(3)のモジュール定義で、imports属性に(4)のようにWjGaugeModuleを指定すると、モジュールがインポートされて、Wijmoのゲージ部品が利用できるようになります。

 次に、リスト4(2)のコンポーネント(ルートコンポーネント)を定義するapp.component.tsを、リスト5のように記述します。

リスト5 ルートコンポーネントの記述(wijmo-001-gauge/app/app.component.ts)
// 外部コンポーネント参照 ...(1)
import { Component, ViewChild } from "@angular/core";
import { WjLinearGauge } from "wijmo/wijmo.angular2.gauge"

// コンポーネントのパラメータ指定 ...(2)
@Component({
  selector: "my-app",
  template: `
    <h1>Wijmo + Angular 2 サンプル1</h1>

    <!-- WjLinearGaugeコンポーネント ...(3) -->
    <wj-linear-gauge style="width:400px"
      #gauge
      [isReadOnly]="false"
      [(value)]="curValue"
      (valueChanged)="onValueChanged()">
    </wj-linear-gauge>

    <!-- LinearGaugeの値を表示 ...(4) -->
    <p>value:{{curValue}}</p>
  `,
})

// コンポーネントの実装 ...(5)
export class AppComponent  {
  // WjLinearGaugeオブジェクトの参照 ...(6)
  @ViewChild("gauge") gauge: WjLinearGauge;

  // WjLinearGaugeの値 ...(7)
  curValue:number = 50;

  // 値が変更されたときのハンドラ ...(8)
  onValueChanged() {
    console.debug("value:" + this.gauge.value);
  }
}

 (1)は、このコンポーネントで利用する外部コンポーネントの参照です。コンポーネントの定義に利用するComponent、コンポーネントの子要素を参照するためのViewChildと同じ記述形式で、Angular 2の線形ゲージ(WjLinearGauge)コンポーネントを参照しています。

 (2)でコンポーネントのパラメータを指定します。コンポーネントの表示内容をHTMLで指定するtemplateパラメータに、WjLinearGaugeコンポーネントに対応した<wj-linear-gauge>タグを記述しています(3)。Wijmoコンポーネント名の大文字を小文字に変更して、区切りにハイフンを挿入したものがタグ名になります。

 (3)の「#gauge」属性は、コンポーネントをgaugeという変数名で参照する指定で、後述の(6)で利用します。「isReadOnly」属性は画面操作の可否、「value」属性は現在値、「valueChanged」属性は値変更時のイベントハンドラです。詳細は後述します。

 (4)は、Angular 2の双方向データバインディングで、線形ゲージの現在値を表示する記述です。

 (5)で、コンポーネントのクラスAppComponentを実装しています。(6)は、(3)で変数名を定義した線形ゲージのオブジェクトを、プロパティ変数gaugeで参照する記述です。(7)は線形ゲージの現在値を表すプロパティです。(8)は線形ゲージの値が変更されたときのイベントハンドラで、ここでは線形ゲージオブジェクトgaugeのvalueプロパティ(ゲージの現在値)をログ出力しています。

プロパティ名の記号が持つ意味

 リスト5(3)で、<wj-linear-gauge>のプロパティ名にはさまざまな記号がついています。この記号について、リスト6でもう少し詳しく説明します。

リスト6 プロパティ記述の種類
<wj-linear-gauge
  [isReadOnly]="false"                  // ...(1)
  [(value)]="curValue"                  // ...(2)
  (valueChanged)="onValueChanged()">    // ...(3)
</wj-linear-gauge>

 (1)は、ゲージを読み取り専用にするプロパティisReadOnlyに、値falseを設定して、マウスクリックで操作可能にすることを表します。このように、[]で囲まれたプロパティには、指定する値そのものを記述します。

 (2)は、現在値のプロパティvalueに、コンポーネントのcurValueプロパティの値を設定することを表します。このように、[()]で囲まれたプロパティは、コンポーネントのプロパティとの連結(双方向データバインディング)を表します。

 (3)は、値が変更されたときに発生するvalueChangedイベントで、onValueChangedメソッドを実行することを表します。このように、()で囲まれたプロパティは、イベントハンドラを表します。

 これらの記述方法はAngular 2で定義されているもので、WijmoをAngular 2で利用する場合は、これらの記述方法に従います。なお、Wijmoコンポーネントのマークアップ構文については、公式ドキュメントで詳細に解説されています。

さまざまなWijmoコンポーネントをAngular 2で活用

 以下では、Wijmoの特徴的なコンポーネントをAngular 2で活用するサンプルを紹介します。

グリッド表示を行うFlexGridコントロール

 FlexGridは、.NETなどさまざまな環境で提供されているグリッド部品のWijmoバージョンです。表形式のデータを表示/操作するグリッドをWebページに表示できます。

図5 FlexGridをWebページに表示(wijmo-002-flexgrid)
図5 FlexGridをWebページに表示(wijmo-002-flexgrid)

 FlexGridを利用するには、まず、FlexGridを含むモジュールWjGridModuleをインポートします(リスト7)。

リスト7 WjGridModuleをインポート(wijmo-002-flexgrid/app/app.module.ts)
import { WjGridModule } from "wijmo/wijmo.angular2.grid";
(中略)
@NgModule({
  // インポート
  imports: [
    BrowserModule,
    WjGridModule
  ],
(中略)
})

 FlexGridのコンポーネント名はWjFlexGridなので、対応するタグ名は<wj-flex-grid>となります。リスト8のように記述していきます。

リスト8 FlexGridの記述(wijmo-002-flexgrid/app/app.component.ts)
<wj-flex-grid [itemsSource]="gridData" style="width:500px">
  <wj-flex-grid-column [header]="'製品名'" [binding]="'name' "[width]="'*'">
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'会社'" [binding]="'vendor' "[width]="'*'">
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'発売'" [binding]="'delivery'" [width]="'*'">
  </wj-flex-grid-column>
</wj-flex-grid>

 <wj-flex-grid>がグリッド全体を表し、itemsSource属性に設定された変数gridDataのデータが表示されます。gridDataの内容はダウンロードできるサンプルコードを参照してください。<wj-flex-grid-column>がグリッドの1列で、header属性はヘッダー行に表示される文言、binding属性は対応するデータ項目名です。widthは列幅の指定で、「*」を指定すると、可能な限り列を左右に広げて表示します。

 ここで、[]で囲まれているプロパティに文字列の値を設定する場合は、「"'name'"」のように、ダブルクォーテーションとシングルクォーテーションを重ねて記述することに注意してください。

さまざまなグラフを表示するFlexChartコントロール

 FlexChartは、棒グラフや折れ線グラフなどを表示できるチャートコンポーネントです。

図6 FlexChartでグラフを描画(wijmo-003-flexchart)
図6 FlexChartでグラフを描画(wijmo-003-flexchart)

 リスト7と同様の記述でFlexChartを含むモジュール(WjChartModule)をインポート後、リスト9のように、FlexChartのコンポーネント(WjFlexChart)に対応する<wj-flex-chart>タグを記述します。

リスト9 FlexChartの記述(wijmo-003-flexchart/app/app.component.ts)
<wj-flex-chart [itemsSource]="chartData" [bindingX]="'ym'"
  style="width:480px;height:320px;">
  <wj-flex-chart-series [name]="'稼働時間'" [binding]="'time'">
  </wj-flex-chart-series>
  <wj-flex-chart-series [name]="'生産数'" [binding]="'count'"
    [chartType]="'LineSymbols'">
  </wj-flex-chart-series>
  <wj-flex-chart-legend [position]="'Bottom'">
  </wj-flex-chart-legend>
</wj-flex-chart>

 <wj-flex-chart>がチャート全体を表し、itemsSource属性に設定された変数chartDataのデータが表示されます。bindingX属性は、X軸に表示するデータ項目名です。<wj-flex-chart-series>がチャートの1系列を表し、name属性で名前、binding属性で対応するデータ名を指定します。<wj-flex-chart-legend>はグラフの凡例に対応し、ここでは凡例をグラフ下に描画するよう指定しています。

 FlexGridやFlexChartを含めて、Angular 2と組み合わせたときのWijmo 5コンポーネント記述は、プロパティの指定方法以外はAngularJS 1の場合とほぼ同じです。詳細は過去の解説記事も参考にしてください。

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmo 5を、JavaScriptフレームワークAngular 2と組み合わせて利用する方法を説明しました。適切に環境設定を行うことで、Wijmo 5のUI部品をAngular 2のWebサイト上で利用できます。Angular 2と同じ流儀でWijmo 5の実装を記述できるため、あたかもWijmo 5がAngular 2の一部であるように、シームレスに活用できます。

参考資料

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

著者プロフィール

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

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

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

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

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