Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

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)

  • 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