はじめに
「Wijmo（ウィジモ）」は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット（UI部品）を利用者に提供します。
Wijmoには、jQuery以外のJavaScriptライブラリと組み合わせて使うための環境が提供されています。そのうち今回は、JavaScriptフレームワークとして注目されている「AngularJS」との連携機能を紹介します。AngularJS連携機能を利用することで、Wijmoに以下の機能が提供されます。
- 独自タグを使ってWijmoウィジェットを記述する機能
- AngularJSの双方向データバインディングをWijmoウィジェットで利用する機能
本記事ではAngularJSについて概要を述べた後、WijmoとAngularJSを組み合わせた使用法のサンプルを説明していきます。
対象読者
- WebサイトやWebアプリケーションのレベルをワンランク上げたい方
- 短納期で高度なWebサイトの作成を求められている方
- Webサイト作成において充実したサポートを求める方
- jQuery以外のフレームワークに興味がある方
必要な環境
AngularJSと組み合わせる場合でも、WijmoにはjQueryおよびjQuery UIの参照が必須です。現バージョンではjQuery 1.11.1／2.1.1とjQuery UI 1.11.0が指定されています。
Wijmoと組み合わせるAngularJSのバージョンは、Wijmo基本ウィジェットでは1.0.2、SpreadJSでは1.2.22がそれぞれ指定されています。本記事のサンプルコードでは以下バージョンを使用しています。
- jQuery 1.11.1
- jQuery UI 1.11.0
- AngularJS 1.0.2
また今回は以下の環境で動作を確認しています。
Windows 7 64bit版
- Internet Explorer 11
AngularJSの紹介
まずAngularJSについて簡単に紹介します。AngularJSはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、公式サイトで配布されています。ライセンスはMITライセンスです。Webブラウザで動作するHTML／JavaScriptアプリケーションにMVC（Model View Controller）パターンの考え方が取り入れられており、モデル（データ）とビュー（表示）の分離が自然に行えるようになっています。この仕組みをAngularJSではMVW（Model View Whatever）パターンとうたっています（注1）。
AngularJSは表1のような機能を開発者に提供します。
| 機能 | 内容 |
|---|---|
| モデルとビューの分離 | JavaScriptでモデルを、HTMLでビューをそれぞれ表現 |
| 双方向データバインディング | モデルの値をビューに反映し、ビューでの変更がモデルに反映される |
| ディレクティブ | タグや属性を独自に定義して使用できる |
MVC（Model View Controller）パターンにはMVVM（Model View ViewModel）、MVP（Model View Presenter）などの複数の派生パターンが存在しますが、AngularJSではパターンの細かい相違に関する議論を避けるためにMVW（Model View 「Whatever＝何でも」）という用語を使用しています。
