SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用

今話題の「AngularJS」と「Wijmo(ウィジモ)」連携で広がる可能性

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第8回

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

連携機能を使ってWijmoでAngularJSの機能を利用

 WijmoウィジェットはAngularJSと組み合わせることで、リスト1で示したようなデータと表示の同期を実現することができます。Sliderウィジェット(wijslider)とProgressBarウィジェット(wijprogressbar)を用いたサンプルをリスト2に示します。

リスト2 WijmoとAngularJSを組み合わせた実装例(002_wijmo_angularjs1.html)
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Wijmoサンプル1(AngularJS)</title>

<!--jQuery ...(1)-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>
 
<!-- WijmoテーマCSS ...(2)-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
 
<!-- WijmoウィジェットCSS ...(3)--> 
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.48.min.css" rel="stylesheet" type="text/css" />
 
<!-- WijmoウィジェットJavaScript ...(4)-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20142.48.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.48.min.js" type="text/javascript"></script>

<!-- AngularJS ...(5)-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js" type="text/javascript"></script>
<!-- Wijmo対応AngularJS拡張ライブラリ ...(6)-->
<script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20142.48.min.js"></script>

<script type="text/javascript">
    // wijmoモジュールを使用するモジュールを定義 ... (7)
    var myApp = angular.module("MyApp", ["wijmo"]);

    // コントローラーを定義 ... (8)
    myApp.controller("MyController", function($scope) {
        // 現在値、最小値、最大値
        $scope.curValue = 50;
        $scope.minValue = 0;
        $scope.maxValue = 100;
    });
</script>

</head>
<body ng-controller="MyController">
<h1>Wijmoサンプル1(AngularJS)</h1>

<p>入力:
<input ng-model="curValue" style="width: 200px;" /></p>
<p>入力内容: <span>{{curValue}}</span></p>

<h3>Sliderウィジェット(wijslider)</h3>
<!-- 現在値、最小値、最大値を指定してSliderウィジェットを定義 ... (9)-->
<wij-slider value="curValue" min="{{minValue}}" max="{{maxValue}}" style="width: 200px;"></wij-slider>

<h3>ProgressBarウィジェット(wijprogressbar)</h3>
<!-- 現在値、最小値、最大値を指定してProgressBarウィジェットを定義 ...(10)-->
<wij-progressbar value="{{curValue}}" min="{{minValue}}" max="{{maxValue}}" style="width:300px;height:30px" />

</body>
</html>

 (1)(4)でjQueryとWijmoを読み込んでいます。リスト2ではjQueryのメソッドを明示的に使用しませんが、Wijmo自体がjQueryやjQuery UIを必要とするため参照が必要です。また(5)でAngularJSを、(6)でWijmoをAngularJSと組み合わせて利用するためのライブラリを読み込んでいます。

 (7)でMyAppモジュールを定義しています。「["wijmo"]」という記述により、MyAppモジュールからwijmoモジュールを利用できるよう参照しています。(8)のMyControllerコントローラーでは、スコープにcurValue(現在値)、minValue(最小値)、maxValue(最大値)の変数を定義しています。

 (9)はWijmoのSliderウィジェット(wijslider)を<wij-slider>タグで定義しています。AngularJSと組み合わると、ディレクティブを用いた<wij-*>型式の独自タグでWijmoウィジェットを定義できます。この場合ウィジェットのプロパティはタグの属性として記述します。ここではvalue、min、maxの各プロパティをスコープに含まれるcurValue、minValue、maxValueでそれぞれ設定しています。minValue、maxValueは読み取り専用のため{{(変数名)}}型式で、curValueはSliderウィジェットで値を変更するため、リスト1(6)のng-modelディレクティブのように変数名のみで指定しています。

 (10)はProgressBarウィジェット(wijprogressbar)を<wij-progressbar>タグで定義しています。ProgressBarウィジェットのvalue、min、maxはすべて読み取り専用なので{{(変数名)}}型式で指定しています。

 リスト2を実行して、スライダーやテキストボックスの値を変更すると、図3のように変更内容が表示に反映されます。

図3 スライダーの変更がProgressBarやテキストボックスに反映(002_wijmo_angularjs1.html)
図3 スライダーの変更がProgressBarやテキストボックスに反映(002_wijmo_angularjs1.html)

 このように、AngularJSと組み合わせることで、ディレクティブによる独自タグや双方向データバインディングをWijmoウィジェットで利用できるようになります。

次のページ
AngularJS機能でWijmoチャートを動的に変更

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8313 2014/12/08 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング