Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

「Wijmo(ウィジモ)」アップデートで追加された新ウィジェットや機能を紹介

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

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

 本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo(ウィジモ)」について、サンプルとともに利用例を紹介します。本記事では2014年9月に行われた2014J v2アップデートで追加された新機能を取り上げます。

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット(UI部品)を利用者に提供します。

 2014年9月にWijmoのアップデート(2014J v2)がリリースされました。このアップデートにより提供される主な新機能には、以下のようなものがあります。

Wijmo Professional
  • 新ウィジェット(スパークライン、フリップカード)
  • チャートウィジェットの機能追加(近似曲線、HTML形式ヒント)
Wijmo Enterprise
  • チャートやグリッドの、画像やPDFへのエクスポート
SpreadJS
  • 新しいスパークライン(円グラフ、エリアグラフ、散布図)
  • 配列数式のサポート
  • 数式テキストボックスを表示可能に
  • セル・セル範囲にコメントを設定
  • シートにチャートなどのオブジェクトを配置可能に

 新機能の概要はWijmoのWebページでも紹介されています。

図1 新機能を紹介するWijmoのWebページ
図1 新機能を紹介するWijmoのWebページ

 そこで本稿では、Wijmoの2014J v2アップデートの新機能についてサンプルコードを交えて紹介します。今回は新機能のうち、Wijmo Professionalに含まれる新しいウィジェットやチャートの機能追加を紹介していきます。

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • 短納期で高度なWebサイトの作成を求められている方
  • Webサイト作成において充実したサポートを求める方
  • 新しい機能はとにかく試してみたい性分の方

必要な環境

 Wijmoを利用するにはjQueryおよびjQuery UIの参照が必須です。2014J v2アップデートでは、jQuery 1.11.1/2.1.1とjQuery UI 1.11.0(モバイル用ページではjQuery Mobile 1.4.0)が指定されています。

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

Windows 7 64bit版
  • Internet Explorer 11

スパークラインは軽量なチャート部品

 2014J v2アップデートで盛り込まれたスパークライン(wijsparkline)は、小型のチャートをインラインで表示するウィジェットです。他のチャートウィジェットよりも小型、軽量で、図2のように1ページ内に複数のスパークラインを表示する使い方が想定されています。

図2 スパークラインを用いて表示する携帯電話事業者の純増数とMNP(001_wijmo_sparkline1.html)
図2 スパークラインを用いて表示する携帯電話事業者の純増数とMNP(001_wijmo_sparkline1.html)

 図2ではWijmoが提供するグリッド(wijgrid)の要素としてスパークラインを表示しています。スパークライン指定の記述をリスト1に示します。

リスト1 グリッド内にスパークラインを表示する記述(001_wijmo_sparkline1.html)
columns: [
// 中略
    {
        dataKey: "diff", 
        headerText: "月次純増数", 
        textAlignment: "center",
        cellFormatter: function (args) {
            if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                var diffSparkline = $("<div></div>") // ... (1)
                    .css({
                        height: 80,
                        width: 200
                    });
                args.$container.empty()              // ... (2)
                    .append(diffSparkline);
                diffSparkline.wijsparkline({         // ... (3)
                    data: args.row.data.diff, 
                    type: "area",
                    valueAxis: true,
                    origin: 0
                });
                return true;
            }
        }
    },
// 中略
]

 (1)でスパークラインを表示するdiv要素を作成し、(2)でグリッドに設定しています。そのdiv要素に対して(3)でスパークラインの指定を記述しています。001_wijmo_sparkline1.htmlでは純増数とMNPでこの処理を2組記述しているため、グリッドの各行にスパークラインが2個ずつ描画されます。

スパークラインの基本

 それではスパークラインウィジェットの利用法をより詳しく説明します。シンプルなスパークラインを表示する例はリスト2のようになります

リスト2 シンプルなスパークラインの表示(002_wijmo_sparkline2.html)
<script type="text/javascript">
    require(["wijmo.wijsparkline"], function(){ 
        $(function(){ 
            $("#wijsparkline1").wijsparkline({ // スパークラインの設定 ...(1)
                data: [23, 15, 3, -2, -10, 0, 10, 25, 12, -8, -15, 5, 3, 18, 14, -10],
                type: "area"
            }); 
        }); 
    });
</script>
...中略...
<!-- スパークラインを表示する要素 ...(2) -->
<div id="wijsparkline1" style="width:320px; height:240px;"> 
</div>
</body>
</html>

 (1)でスパークラインを表示するwijsparklineの設定を行っています。ここではオプションとしてdataにグラフデータ、typeにグラフ種類("area")を設定しています。オプションについては後述します。この設定により(2)のHTML要素にスパークラインが表示されます。

 リスト1を実行すると、図3のように設定されたデータがグラフ表示されます。

図3 リスト2を実行してスパークラインを表示(002_wijmo_sparkline2.html)
図3 リスト2を実行してスパークラインを表示(002_wijmo_sparkline2.html)

 wijsparklineメソッドにJavaScriptオブジェクトを設定することでオプションを指定できます。主なオプションを表1に示します。

表1 wijsparklineの主なパラメータ
パラメータ名 内容 初期値
data 表示するデータ(配列) null
type グラフの種類 "line"
valueAxis 正負の値を区別する false
origin 値軸をセンタリングする位置 0
seriesStyles 各系列のスタイル指定 [](空配列)

 ここでグラフの種類(type)は線グラフ("line")、面グラフ("area")、棒グラフ("column")が指定できます。

図4 左から順にline、area、columnのスパークライン
図4 左から順にline、area、columnのスパークライン

 オプションを指定した例をリスト3に示します。seriesStylesには正・負・ゼロのそれぞれについて色を指定しています。

リスト3 スパークラインにオプションを指定(003_wijmo_sparkline3.html)
$("#wijsparkline1").wijsparkline({
    type: "column",                  // グラフ種類
    seriesStyles: [{                 // 表示型式
        fill: "#0066ff",             // 正の値の色
        zeroStyle:{fill: "green"},   // ゼロの値の色
        negStyle: {fill: "#ff8080"}, // 負の値の色
    }],
    valueAxis: true,                 // 正負を区別
    origin: 0                        // 値軸をセンタリングする位置
}); 

 リスト3を実行すると、図5のように、正の値・ゼロの値・負の値がそれぞれ指定された色で棒グラフが表示されます。

図5 スパークラインウィジェットで表示した棒グラフ(003_wijmo_sparkline3.html)
図5 スパークラインウィジェットで表示した棒グラフ(003_wijmo_sparkline3.html)

コンテンツに表裏を付けるフリップカード

 もう一つの新ウィジェットであるフリップカード(wijflipcard)は、スマートフォンアプリでよく見られる「押下すると表と裏が回転して切り替わるパネル」を実現するウィジェットです。使用例をリスト4に示します。

リスト4 フリップカードで回転するパネルを表示(004_wijmo_flipcard1.html)
<!-- Wijmo読み込みの記述は省略 -->
<script type="text/javascript">
    require(["wijmo.wijflipcard"], function(){ 
        $(function(){ 
            $("#flipcard1").wijflipcard({ // フリップカードを設定 ...(1)
                height: 450,  // 幅
                width: 300    // 高さ
            });
        }); 
    }); 
</script>
</head>
<body>
<h1>FlipCardウィジェット(wijflipcard)</h1>
<div id="flipcard1"><!-- フリップカードになる要素 ...(2)-->
    <div style="text-align:center"> <!-- 表面 ...(3)-->
        <p>こちらが表面です</p>
        <div style="margin-left:auto;margin-right:auto">
          <img src="img/sheep.jpg" style="width:240px"></a>
        </div>
    </div>
    <div style="text-align:center"> <!-- 裏面 ...(4)-->
        <p>こちらが裏面です</p>
        <div style="margin-left:auto;margin-right:auto">
          <img src="img/goat.jpg" style="width:240px"></a>
        </div>
    </div>
</div>
</body>
</html>

 (1)でdiv要素にフリップカードを設定しています。一方、フリップカードとして表示されるdiv要素は(2)です。この要素に含まれる1番目のdiv要素(3)が表面、2番目のdiv要素(4)が裏面になります。

 リスト4を実行すると、マウスクリックにより表裏が切り替わるカードが表示されます(図6)。

図6 リスト4で表示されるフリップカード(004_wijmo_flipcard1.html)
図6 リスト4で表示されるフリップカード(004_wijmo_flipcard1.html)

 wijflipcardメソッドで指定できる主なオプションを表2、表3に示します。animationのtypeには"scroll"、"slide"などのアニメーション効果が指定できます。また、directionを"vertical"に設定すると垂直方向のアニメーションになります。flipping、flippedイベントを指定することで、アニメーション開始、終了のタイミングでイベントを受け取ることができます。

表2 wijflipcardの主なパラメータ
パラメータ名 内容 初期値
height 高さ null
width null
animation 切替時アニメーション 表3参照
flipping アニメーション開始イベント null
flipped アニメーション終了イベント null
表3 animationの主なパラメータ
パラメータ名 内容 初期値
disabled アニメーション無効 false(アニメーション有効)
type アニメーション種類 "flip"(回転切替)
duration アニメーション時間 500(0.5秒)
direction アニメーション方向 "horizontal"(水平方向)

 オプションの指定例をリスト5に示します。

リスト5 フリップカードにオプションを指定(005_wijmo_flipcard2.html)
$("#flipcard1").wijflipcard({ 
    height: 450,
    width: 300,
    animation: {
        type: "flip",              // アニメーション種類:flip
        direction: "vertical",     // アニメーション方向:縦
        duration: 1000             // アニメーション時間:1秒
    },
    flipping: function (e, data) { // アニメーション開始イベント
        $("#eventdisp").text("flipping");
    },
    flipped:  function (e, data) { // アニメーション終了イベント
        $("#eventdisp").text("flipped");
    }
});

グラフの傾向を表示できるチャートウィジェットの近似曲線

 グラフ表示を実現するチャートウィジェットにも新機能が追加されました。まず、チャートで表示するグラフに近似曲線を表示できるようになりました。近似曲線はグラフ系列(series)の一つとして、リスト6のように定義します。(1)がグラフ本体、(2)が近似曲線をそれぞれ表します。

リスト6 近似曲線の定義(006_wijmo_barchart1.html)
seriesList:[
    // 棒グラフ本体 ...(1)
    {
        label:"降水量",
        dataSource: rain_value,
        data:{
            x:{bind:"month"},
            y:{bind:"rain"}
        }
    },
    // 近似曲線 ...(2)
    {
        label:"近似曲線",
        isTrendline: true,       // 近似曲線を指定
        fitType: "polynom",      // 多項式近似
        order: 6,                // 多項式の次数
        dataSource: rain_value,
        data:{
            x:{bind:"month"},
            y:{bind:"rain"}
        }
    },
]

 リスト6を実行すると図7のように、グラフの実値を近似するように曲線が描画されます。

図7 グラフに近似曲線を描画(006_wijmo_barchart1.html)
図7 グラフに近似曲線を描画(006_wijmo_barchart1.html)

 近似曲線の定義で指定できる主なオプションを表4に示します。近似曲線にするためにはisTrendLineをtrueに設定します。詳細はWijmoのドキュメントを参照してください。

表4 近似曲線の主なパラメータ
パラメータ名 内容 初期値
isTrendline 近似曲線を指定 false
fitType 近似曲線の種類 "polynom"(多項式近似)
order 近似曲線の次数 1

 パラメータfitTypeには近似の種類を指定できます。指定できる種類は表5のとおりです。

表5 fitTypeに指定できるパラメータ
パラメータ名 近似種類 近似内容
polynom 多項式近似 変動するデータに近似
exponent 指数近似 増加・減少度合いが次第に小さくなるデータに近似
logarithmic 対数近似 増加・減少度合いが次第に大きくなるデータに近似
power 累乗近似 特定の率で増加するデータに近似
fourier フーリエ近似 変動するデータに近似
minX 最小 X 近似 X方向の最小値を描画
minY 最小 Y 近似 Y方向の最小値を描画
maxX 最大 X 近似 X方向の最大値を描画
maxY 最大 Y 近似 Y方向の最大値を描画
averageX 平均 X 近似 X方向の平均値を描画
averageY 平均 Y 近似 Y方向の平均値を描画

 fitTypeごとの近似曲線描画を図8に示します。なお現状ではlogarithmicとpowerを指定した時に近似曲線が描画されませんでした。

図8 fitTypeの指定により描画される近似曲線のパターン
図8 fitTypeの指定により描画される近似曲線のパターン

マウスオーバー時のヒントをHTMLで指定してより見やすく

 細かい変更点として、マウスオーバー時に表示されるヒントの表示内容をHTMLで指定可能になりました。isContentHtmlプロパティにtrueを設定し、contentにHTMLタグを含めた内容を設定します。リスト7では文字サイズを大きくして太字にしています。

リスト7 ヒントの表示内容をHTMLで指定(007_wijmo_barchart2.html)
hint: {
    // HTML型式を指定
    isContentHtml: true, 
    // ヒント内容としてHTMLタグを含めた値を返却
    content: function(){
        return "<span style='font-size:20pt;font-weight:bold;'>" + 
               this.data.label + "<br/>" + 
               Globalize.format(this.y, "n2") + " mm" + "</span>";
    }
},

 リスト6を実行すると図9のようになり、大きな太文字でヒントが表示されます。

図9 HTML指定でツールチップの文字を大きくした例(007_wijmo_barchart2.html)
図9 HTML指定でツールチップの文字を大きくした例(007_wijmo_barchart2.html)

その他の変更

 2014J v2アップデートにおけるウィジェット関連のその他の変更は以下のとおりです。

複合チャートウィジェット(wijcompositechart)
  • 1つのチャート内に複数の円グラフを描画できる"sharedPie"(共有円)が追加されました。
Treeウィジェット(wijtree)
  • パフォーマンスが改善されました。
  • ノードがチェックされる前に発生するnodeCheckChangingイベントが追加され、ノードチェックのキャンセルができるようになりました。
EventCalendarウィジェット(wijevcal)
  • イベントカレンダーで表示するカレンダーに対して、Calendarウィジェット(wijcalendar)のオプションを指定できるcalendarオプションが追加されました。
Ribbonウィジェット(wijribbon)
  • ボタンをグループ化してリボンを小さく表示するcompactModeオプションが追加されました。
Editorウィジェット(wijEditor)
  • ボタンをグループ化してリボンを小さく表示するcompactRibbonModeオプションが追加されました。
InputDateウィジェット(wijinputdate)
  • Knockout利用時にminDateとmaxDateがサポートされました。

 また各種不具合の修正も行われています。詳細は更新履歴を参照してください。

まとめ

 本記事では、JavaScriptライブラリ「Wijmo」に対して2014年9月に行われた「2014J v2アップデート」のうち、Wijmo Professionalの新ウィジェットや機能を紹介しました。スパークラインは従来のチャートウィジェットよりも高速・軽量で、ちょっとした値の変化を視覚的に表示したいときに便利です。フリップカードは2つのコンテンツの切替機能を簡単に実現できます。また、チャートウィジェットの新機能はグラフの表現力向上に寄与します。

 次回は、Wijmo EnterpriseやSpreadJSに関連した2014J v2アップデートの新機能を紹介していきます。

参考資料

  • 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