Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

高速/軽量に進化した「Wijmo(ウィジモ)」新版「Wijmo 5」の紹介

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

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

Wijmo 5の特徴

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

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

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

図2 高速/軽量はWijmo 5最大の売り(Wijmo Webページより)
図2 高速/軽量はWijmo 5最大の売り(Wijmo Webページより)

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

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

図3 iPhone 6で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とは別になり、別途購入が必要です。


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

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5