Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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コンポーネントのマークアップ構文については、公式ドキュメントで詳細に解説されています。


  • 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-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5