高速／軽量に進化した「Wijmo（ウィジモ）」新版「Wijmo 5」の紹介

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

Wijmo 5の特徴

　まずWijmo 5が備える主な特徴を以下に紹介します。

モダンブラウザのみのサポート、高速／軽量化

　Wijmo 5はWeb標準を最大限に活用するため、比較的新しい、いわゆるモダンブラウザのみをサポート対象としました。この結果ライブラリの動作速度やサイズを最適化することが可能となり、従来のWijmoと比較してより高速／軽量なライブラリとなりました。

図2　高速／軽量はWijmo 5最大の売り（Wijmo Webページより）

モバイルデバイス、タッチデバイスへの最適化

　Wijmo 5はスマートフォンやタブレットといったモバイルデバイス、タッチデバイスでの利用が最初から考慮されています。高速／軽量化と相まって、モバイルデバイスにおいても良好なパフォーマンスで利用可能です。

図3　iPhone 6でWijmo 5デモを表示。軽快に操作できる

ECMAScript 5準拠のJavaScriptコントロール

　Wijmo 5のUI部品はJavaScript標準である「ECMAScript 5」を用いた「JavaScriptコントロール」になりました。ECMAScript 5が提供するプロパティ／メソッド／イベントの仕組みでUI部品を操作できるため、.NET（C#）ライクに処理を記述することができます。Wijmo 5と従来のWijmoを比較した具体的な記述例は本記事の後半で紹介します。

jQuery非依存

　従来のWijmoでは、jQuery／jQuery UI（モバイル向けにはjQuery Mobile）の参照が必須で、Wijmoウィジェットは実際のところjQuery UI（jQuery Mobile）ウィジェットの拡張になっていました。Wijmo 5ではjQuery／jQuery UI／jQuery Mobileへの依存が取り除かれ、純粋なJavaScriptライブラリとなりました。

より充実したAngularJSサポート

　前回の連載記事で紹介したように、Wijmoは従来よりAngularJSと連携した利用が可能でしたが、Wijmo 5ではAngularJSのサポートがより充実しました。ディレクティブ（AngularJSで用いる独自タグ）を用いてJavaScriptコントロールを記述でき、AngularJSを用いた充実したサンプルが提供されます。

さまざまなJavaScriptライブラリのサポート

　Wijmo 5はAngularJS以外にも、以下に示すJavaScriptライブラリと組み合わせた活用をサポートします。特にTypeScriptについては、Wijmo 5自体がTypeScriptで記述されており、型定義ファイルとソースが提供されます。

• TypeScript：静的型付けやクラスなどの仕組みを持ち、コンパイルでJavaScriptを生成する言語
• Bootstrap：CSSフレームワーク（連載記事に解説があります）
• Knockout：モデルとビューを分離するMVVM（Model View View-Model）ライブラリ
• Breeze：データ管理機能を提供するライブラリ

Wijmo 5の構成

　Wijmo 5を構成するライブラリ群を表1に示します。Core（とAngularJSを用いるときはInterop）は必須で、それ以外は使用するUI部品についてライブラリをインポートします。特にFlexGridは、.NETやSilverlightなどに向けて提供されている同名グリッド部品のJavaScriptコントロール版で、長年実績のある部品をHTML／JavaScript環境でも利用できます。

表1　Wijmo 5を構成するライブラリ要素

要素	ファイル名	ライブラリの内容
Core	wijmo.js／wijmo.css	Wijmo 5の基本機能
Interop	wijmo.angular.js	AngularJSとの連携機能
FlexGrid	wijmo.grid.js	グリッドを表示するJavaScriptコントロール
FlexChart	wijmo.chart.js	グラフを表示するJavaScriptコントロール
Gauge	wijmo.gauge.js	ゲージを表示するJavaScriptコントロール
Input	wijmo.input.js	入力部品を表示するJavaScriptコントロール

Wijmo 5登場で従来のWijmoはどうなる？

　Wijmo 5の登場により、Wijmoの提供形態は表2のようになります。

表2　Wijmo 5登場後のラインナップ

ラインナップ	含まれる内容
Wijmo Enterprise	Wijmo 5、Wijmo 3、SpreadJS、Wijmo エクスポートサービス
Wijmo 5	Wijmo 5単体
Wijmo 3	Wijmo 3単体（旧「Wijmo Professional」）
Optional Pack for Wijmo Enterprise	SpreadJSエディタ、Excel IOサービス

　Wijmo 5の登場で従来のWijmo（「Wijmo Professional」）は「Wijmo 3」と呼ばれるようになります。Wijmo 5とWijmo 3は基本的に別のライブラリで互換性はなく、またWijmo 3の全機能がWijmo 5で提供されるわけでもありません。Wijmo 5とWijmo 3の違いについてはグレープシティが公開している比較表を参照してください。

　なおWijmo 3には成果物のソースコードをGNU GPLv3ライセンスに基づき公開する場合に無償でWijmoを利用できるオープンソースライセンスを選択できましたが、Wijmo 5ではオープンソースライセンスが提供されません。またWijmo 5の商用ライセンスはWijmo 3とは別になり、別途購入が必要です。