Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

グラフやゲージなど「Wijmo(ウィジモ) 5」のさまざまなUI部品を活用

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

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

 本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo(ウィジモ)」について、サンプルとともに利用例を紹介します。今回はWijmo 5が提供するグラフやゲージ、入力部品について利用法を説明していきます。

はじめに

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

 2015年1月に提供開始されたWijmoの新版「Wijmo 5」には、前回記事で紹介したグリッド部品「FlexGrid」以外にも表1のようなUI部品(JavaScriptコントロール)が含まれています。

表1 本記事で紹介するWijmo 5のUI部品
部品 内容
FlexChart チャート(棒グラフ、折れ線グラフなど)
Gauge ゲージ(LinearGauge、RadialGauge)
Input 入力部品(多機能テキストボックス、カレンダーなど)

 本記事では表1のUI部品について、概要と利用法をサンプルで説明していきます。

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • より軽量/高速なJavaScriptのUI部品を探している方
  • Wijmo 5が提供するUI部品の全容を把握したい方

必要な環境

 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

 なお本記事のサンプルコードはAngularJS(バージョン1.2.1)およびWijmo 5のAngularJS連携機能を利用しています。

チャートを表示するFlexChart

 FlexChartはチャートを表示するUI部品です。AngularJSと組み合わせる場合はwj-flex-chartディレクティブ(独自タグ)でチャート全体を、wj-flex-chart-seriesディレクティブで1つのデータ系列を記述します。棒グラフと折れ線グラフ、凡例を表示する図1のようなサンプルを本連載の第2回で説明しています(今回記事のサンプルコードにも同じ内容のサンプルを含めています)。

図1 FlexChartによるグラフ表示(001_wijmo_flexchart1.html)
図1 FlexChartによるグラフ表示(001_wijmo_flexchart1.html)

グラフの種類を指定

 FlexChartではchartTypeプロパティ(chart-typeディレクティブ属性)の設定によりさまざまなグラフを表示できます。主なグラフの種類を表2に示します。サポートするすべての種類はドキュメントを参照してください。

表2 FlexChartで表示できる主なグラフ
名前 内容
Column 縦棒グラフ
Bar 横棒グラフ
Line 折れ線グラフ
LineSymbols シンボル付き折れ線グラフ
Spline スプライングラフ(曲線でデータを補完)

 これらのグラフ種類を切り替えて表示するサンプルをリスト1に示します。

リスト1 グラフの種類を切り替えて表示(002_wijmo_flexchart2.html)
<h3>FlexChart</h3>
<wj-flex-chart items-source="chartData" 
    binding-x="quarter" 
    chart-type="{{chartType}}" 
    style="width:640px;height:300px;">
    <wj-flex-chart-series name="訪問数" binding="visit">
    </wj-flex-chart-series>
    <wj-flex-chart-series name="売上高" binding="sales">
    </wj-flex-chart-series>
</wj-flex-chart>

<h3>グラフ種類</h3>
<select ng-model="chartType">
    <option value="Column">Column</option>
    <option value="Bar">Bar</option>
    <option value="Line">Line</option>
    <option value="LineSymbols">LineSymbols</option>
    <option value="Spline">Spline</option>
</select>

 wj-flex-chartのchart-type属性にスコープの変数chartTypeを指定します。selectタグで記述されたプルダウンを操作するとAngularJSの双方向バインディングによりchartTypeの値が変更され、それに応じてグラフの種類が切り替わります。

図2 グラフの種類を切り替えて表示(002_wijmo_flexchart2.html)
図2 グラフの種類を切り替えて表示(002_wijmo_flexchart2.html)

タイトルと軸の設定

 グラフにはwj-flex-chartのheader、footer属性でヘッダー・フッター文字列を設定できます。またwj-flex-chart-axisディレクティブで軸の設定をカスタマイズできます。これらを設定した例をリスト2に示します。

リスト2 グラフにタイトルと軸を設定(003_wijmo_flexchart3.html)
<wj-flex-chart items-source="chartData" binding-x="quarter" 
    header="営業記録" footer="2015年4月1日現在"
    style="width:640px;height:300px;">
    <!-- X軸の指定 ...(1)-->
    <wj-flex-chart-axis wj-property="axisX" 
        title="四半期"
        major-grid="true"
        >
    </wj-flex-chart-axis>
    <!-- Y軸の指定 ...(2)-->
    <wj-flex-chart-axis wj-property="axisY" 
        title="数値" 
        max="600000"
        min="0"
        major-unit="200000">
    </wj-flex-chart-axis>
    <!-- 中略 -->
</wj-flex-chart>

 wj-flex-chartディレクティブのheader、footer属性でヘッダー(「営業記録」)とフッター(「2015年4月1日現在」)を設定しています。(1)は軸の指定で、wj-propertyに"axisX"を設定してX軸を表しています。ここでは軸に表示する文字列をtitle属性に設定しています。major-gridは軸のグリッド線を表示する属性で、trueを設定してグリッド線を表示させます。一方(2)はy軸の指定で、titleのほかにmax、min属性で最大値・最小値を、major-unit属性で軸線の間隔を指定しています。

 リスト2を実行すると、タイトルと軸がカスタマイズされたグラフが表示されます。

図3 タイトル・軸を変更したグラフを表示(003_wijmo_flexchart3.html)
図3 タイトル・軸を変更したグラフを表示(003_wijmo_flexchart3.html)

ゲージを表示するLinearGaugeとRadialGauge

 本連載の第2回で、直線ゲージを表示するLinearGaugeを紹介しましたが、Wijmo 5にはLinearGaugeのバリエーションとして半円形のゲージを表示するRadialGaugeが用意されています。それぞれwj-linear-gaugeとwj-radial-gaugeディレクティブで記述でき、利用法はほぼ同じです。

 これらのゲージを表示する例をリスト3に示します。

リスト3 LinearGaugeとRadialGaugeの表示(004_wijmo_gauge1.html)
<!-- LinearGauge表示 -->
<wj-linear-gauge
    value="curValue" 
    min="0" 
    max="100" 
    is-read-only="false" 
    show-text="All"
    style="width:400px">
</wj-linear-gauge>
<!-- RadialGauge表示 -->
<wj-radial-gauge
    value="curValue" 
    min="0" 
    max="100" 
    is-read-only="true" 
    show-text="Value"
    style="width:400px;height:300px;">
</wj-radial-gauge>

 wj-linear-gaugeとwj-radial-gaugeディレクティブには共通でvalue(現在値)、min(最小値)、max(最大値)の属性を設定しています。またwj-linear-gaugeにはis-read-only属性(読み取り専用)にfalseを設定して値を変更できるようにしています。

 show-text属性(showTextプロパティ)はゲージに表示する文字の設定で、表3の値が指定できます。

表3 show-text属性の値
名前 内容
All 現在値・最小値・最大値を表示
MinMax 最小値・最大値を表示
Value 現在値を表示
None 何も表示しない

 リスト3を実行すると、値が連動するLinearGaugeとRadialGaugeが表示されます。

図4 連動するLinearGaugeとRadialGauge(004_wijmo_gauge1.html)
図4 連動するLinearGaugeとRadialGauge(004_wijmo_gauge1.html)

さまざまな入力シーンをサポートするWijmo 5の入力部品

 Wijmo 5はHTML標準フォーム部品より多機能な、さまざまな入力部品を提供しています。本連載の第2回では、カレンダーを表示するCalendar、年月日や時間を入力するInputDate/InputTimeを紹介しました。Wijmo 5が提供する主な入力部品を表4に示します。すべての入力部品リストはドキュメントを参照してください。今回はAutoCompleteとInputMaskを紹介します。

表4 Wijmo 5が提供する入力部品の一部
名前 内容
Calendar カレンダーを表示・年月日を指定
InputDate 年月日を指定
InputTime 時間を指定
AutoComplete 入力の自動補完
InputMask フォーマット指定のテキストボックス

入力途中で候補を表示するAutoCompleteコントロール

 AutoCompleteは、入力途中で合致する候補を表示する入力部品です。利用例をリスト4に示します。

リスト4 AutoComplete入力部品の利用(005_wijmo_input1.html)
<wj-auto-complete items-source="companies" css-match="highlight">
</wj-auto-complete>

 wj-auto-completeディレクティブでは、入力補完候補の配列をitems-source属性に、合致部分に適用するCSSクラスをcss-match属性にそれぞれ指定します。companies変数はリスト5のようにスコープ変数に設定しておきます。なおサンプルコードでcss-match属性に設定しているCSSクラスhighlightには太字(font-weight:bold;)を設定しています。

リスト5 AutoCompleteに指定する入力補完候補(005_wijmo_input1.html)
$scope.companies=[
    "NTT",
    "NTT East",
    "NTT West",
    "NTT docomo",
    "NTT data",
    "KDDI",
    "SoftBank Mobile",
];

 リスト4、5を実行して文字を入力すると、前方一致で合致した候補が自動的に表示されます。

図5 AutoCompleteで入力を簡略化(005_wijmo_input1.html)
図5 AutoCompleteで入力を簡略化(005_wijmo_input1.html)

入力形式を強制できるInputMask

 InputMaskは、指定した入力形式以外を許容しないテキストボックスです。リスト6のように、wj-input-maskディレクティブのmask属性にマスク文字列を指定します。

リスト6 InputMask入力部品の利用(006_wijmo_input2.html)
<wj-input-mask mask="(000)0000-0000">
</wj-input-mask>

 mask属性に指定できる主な文字列を表5に示します。

表5 InputMaskのmask属性に指定できる主な文字列
文字列 意味
0 数字
9 数字または空白
# 数字、記号、または空白
L 文字
l 文字または空白
A 英数字
a 英数字または空白

 またマスク文字に「>」を含めるとそれ以降の文字がすべて大文字に、「<」の場合はすべて小文字で入力されるようになります。リスト7は(Microsoftのライセンスキーのように)自動的に大文字で入力させる例です

リスト7 大文字の入力を強制する例(006_wijmo_input2.html)
<wj-input-mask mask=">AAAA-AAAA-AAAA-AAAA">
</wj-input-mask>

 リスト6、7を実行すると、指定された文字以外は入力できないテキストボックスが表示されます。

図6 InputMaskにより入力形式が強制される(006_wijmo_input2.html)
図6 InputMaskにより入力形式が強制される(006_wijmo_input2.html)

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmo 5が提供するチャート部品FlexChart、ゲージ部品のLinearGaugeとRadialGauge、およびいくつかの入力部品について概要とサンプルコードを紹介しました。これらの部品はすべてAngularJSとの連携が考慮されており、ディレクティブ(独自タグ)や双方向データバインディングなど、AngularJSが提供する便利な機能を活用できるようになっています。

 本連載ではこれまでWijmo 5のさまざまな機能を紹介してきました。Wijmo 5はレガシーブラウザを切り捨てることでシンプルかつ強力な機能をHTML/JavaScript環境に提供するソフトウェア部品です。リッチなWebサイトをより少ない手数で作成できるので、対応ブラウザの要件が合致するならば利用を検討したいソフトウェア部品と言えます。

参考資料

  • 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