Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo(ウィジモ)」について、サンプルとともに利用例を紹介します。今回はより高速/軽量に生まれ変わったWijmoのニューバージョン「Wijmo 5」について紹介していきます。

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、Webサイトで活用できるUI部品を利用者に提供します。

 jQueryやjQuery UI、jQuery Mobileをベースにしていた従来のWijmoとは別に新規開発されたWijmoの新版「Wijmo 5」が、2015年1月から国内でも提供開始されました。

図1 新たに提供開始されたWijmo 5(Wijmo Webページより)
図1 新たに提供開始されたWijmo 5(Wijmo Webページより)

 Wijmo 5は従来のWijmoと比較して以下のような特徴を持っています。

  • モダンブラウザのみをサポートすることで高速/軽量化
  • モバイルデバイス、タッチデバイスに最初から最適化
  • ECMAScript 5準拠のUI部品であるJavaScriptコントロール
  • jQuery/jQuery UI/jQuery Mobileに依存しない
  • AngularJSサポートの強化

 そこで本記事ではWijmoのニューカマーであるWijmo 5について概要を示すとともに、簡単なサンプルで利用イメージを紹介します。

対象読者

  • Webサイト制作のレベルをワンランク上げたい方
  • より軽量/高速なJavaScriptのUI部品を探している方
  • AngularJSとWijmoの組み合わせを本格的に活用したい方

必要な環境

 Wijmo 5はECMAScript 5をサポートする、いわゆるモダンブラウザをターゲットにしており、WijmoのWebサイトでは以下のブラウザがサポート対象として案内されています。

  • Internet Explorer:9以上
  • Google Chrome:5以上
  • Mozilla Firefox:4以上
  • Safari:5以上
  • Opera:12以上

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
  • Internet Explorer 11

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

Wijmo 5を使ってみよう

 それでは、Wijmo 5を実際に使ってみましょう。CDNでトライアル版が公開されており、Wijmo 5を試すことができます。本連載のWijmo 5サンプルは基本的にトライアル版を使用します。

 リスト1はWijmo 5でゲージ(LinearGauge)を表示するサンプルです。Wijmo 5の基礎を把握することを目的として、リスト1ではWijmo以外のライブラリは一切使用していません。

リスト1 Wijmo 5でLinearGaugeを表示(001_wijmo5.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wijmo 5 サンプル</title>

<!-- Wijmo ...(1)-->
<script src="http://cdn.wijmo.com/5.20143.24/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20143.24/styles/wijmo.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmoコントロール ...(2)-->
<script src="http://cdn.wijmo.com/5.20143.24/controls/wijmo.gauge.min.js" type="text/javascript"></script>

<!-- Wijmoテーマ ...(3)-->
<link href="http://cdn.wijmo.com/5.20143.24/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmoカルチャ ...(4)-->
<script src="http://cdn.wijmo.com/5.20143.24/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>

<script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function(){
        // LinearGaugeの値をテキスト表示する処理 ...(5)
        var updateValue = function(value) {
            document.getElementById("lineargaugevalue").innerText = value;
        };

        // LinearGaugeを設定 ...(6)
        var myLinearGauge = new wijmo.gauge.LinearGauge("#lineargauge1");

        // LinearGaugeにプロパティを設定 ...(7)
        myLinearGauge.min = 0;             // 最小値0
        myLinearGauge.max = 100;           // 最大値100
        myLinearGauge.value = 50;          // 現在値50
        myLinearGauge.isReadOnly = false;  // 操作可能

        // LinearGaugeにイベントを設定 ...(8)
        myLinearGauge.valueChanged.addHandler(function(){
            updateValue(myLinearGauge.value);
        });

        // 初期の設定値をテキストに反映 ...(9)
        updateValue(myLinearGauge.value);
    });
</script>

</head>
<body>
<h1>Wijmo 5 サンプル</h1>

<div id="lineargauge1" style="width:400px"></div> <!-- LinearGauge表示   ...(10)-->
<p>value:<span id="lineargaugevalue"></p>        <!-- LinearGauge値表示 ...(11)-->

</body>
</html>

 (1)~(4)でWijmo 5を読み込んでいます。(1)はWijmo 5のCoreライブラリで必ず参照します。(2)はJavaScriptコントロールで、今回利用するGaugeコントロール(wijmo.gauge.min.js)を参照します。(3)はテーマのCSSです。Wijmo 5では複数のカスタムテーマが提供され、テーマCSSを入れ替えることで外見を変更できます。(4)は日本語のカルチャファイルで、指定により日時や曜日などの表示を日本語や英語といった言語に合わせて変更できます。

 JavaScript部の(5)はLinearGaugeの値をテキスト表示する処理です。(6)~(8)がLinearGauge関連の記述で、(6)で設定したLinearGaugeに、(7)で各種プロパティ、(8)でLinearGaugeの値が変更された時に発生するvalueChangedイベントのイベントリスナーを、それぞれ設定しています。(9)は初期の設定値をテキストに反映する処理です。LinearGaugeとその値はそれぞれHTML部の(10)(11)に表示されます。

 リスト1を実行すると、LinearGaugeが表示され、マウスクリックや(タッチ対応デバイスの)画面タッチで操作することができます。またLinearGaugeの値がテキストで表示されます。

図4 LinearGaugeを操作して値を変更(001_wijmo5.html)
図4 LinearGaugeを操作して値を変更(001_wijmo5.html)

 ここでWijmo 5の記述をWijmo 3と比較してみましょう。リスト1と類似の処理をWijmo 3のSliderウィジェットで実現する場合、リスト1(6)~(8)に対応するウィジェット関連の記述はリスト2のようになります。

リスト2 Wijmo 3でSliderを表示(002_wijmo3.html)
// Sliderを設定し、プロパティ・イベントを設定
var mySlider = $("#slider1").wijslider({
    "min": 0,
    "max": 100,
    "value": 50,
    "change": function(e, data) {
        updateValue($("#slider1").wijslider("option", "value"));
    }
});

 リスト2の記述にはJavaScriptオブジェクトによるプロパティ/イベント設定などJavaScript独特の型式が見られます。リスト1とリスト2を比較すると、リスト1(Wijmo 5)ではプロパティやイベントの記述が.NET(C#)に近く、より分かりやすくなっています。

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmoの最新版「Wijmo 5」の概要を紹介しました。従来のWijmoとの過去互換性や古いブラウザのサポートを切り捨てることで、最新のWeb技術トレンドを反映した軽量/高速なライブラリに仕上がっています。

 本連載では次回以降、Wijmo 5の利用方法や実装例を紹介していきます。Wijmoに興味があるものの今まで手を付ける機会がなかったという人にとって、新しいWijmo 5の登場は絶好の機会です。ぜひお付き合いください。

 今回のサンプルではWijmo 5を単体で使用しましたが、今回紹介したとおりWijmo 5はAngularJSのサポートが充実しています。次回はWijmo 5とAngularJSを組み合わせた利用法を、Wijmo 5のさまざまなJavaScriptコントロールと共に紹介します。

参考資料

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

著者プロフィール

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

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

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

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

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