目次


Dojo Mobile でグラフィカル KPI ダッシュボード・アプリを作成する

Dojo Mobile を使用してネイティブ・モバイル・アプリの中で主要業績指標を編成して提供する

Comments

Dojo Toolkit の拡張モジュールである Dojo Mobile は、jQuery に匹敵する、充実した HTML5 および JavaScript フレームワークです。Dojo Mobile は Dojo Toolkit の拡張機能として、dojox JavaScript ライブラリーと、dojox/mobile というパッケージ/命名規則を使用します。

Dojo がその充実したウィジェット・モジュールで有名なように、Dojo Mobile にはネイティブ端末をエミュレートするのに役立つフォーム、ボタン、アイコン、フリップ操作可能なナビゲーション、タブ、見出し、バッジ、リストなどのウィジェットが揃っています。このチュートリアルでは、ネイティブ・モバイル・アプリの中でビジネス・プロジェクトまたは部門別 KPI のレポートを作成するために、Dojo Mobile を使用する方法を紹介します。具体的には、ビジネス・ユーザーや経営者が組織のプロジェクトの状況や目標の達成状況をリアルタイムで評価するためにアクセスできるビジュアル・ダッシュボードを、Dojo Mobile のチャート作成ライブラリーとゲージ・ライブラリーを使用して開発する方法を紹介します。

KPI は、それぞれの組織の目標に応じてさまざまに定量化できる評価指標です。同じ組織に属していても、部門が異なれば、目標がどの程度達成されているかを測るために、独自の評価指標を用いたりもします。標準的な KPI であれば、グラフ、ゲージ、アラート、ドリルダウン機能と一緒に組織のエグゼクティブ・ダッシュボードに組み込むことができます。このチュートリアルでは、KPI をレポートするグラフとアナログ・ゲージがモバイル端末に表示されるよう、サイズを小さくしたネイティブ Dojo Mobile アプリを開発します。

アプリを作成するために必要となるもの

KPI ダッシュボード

モバイル端末の場合に極めて重要になってくるのは、画面スペースと帯域幅を有効に利用することです。KPI をモバイル端末に配信するには、データをレイアウトする方法、データを取得するために呼び出しを行う方法、必要に応じてキャッシングを用いるなどして不要なオーバーヘッドをなくす方法など、配信方法を慎重に計画しなければなりません。

ユーザー・エクスペリエンスを最適化するには、あらゆる詳細を提供してユーザーを圧倒させないようにする必要があります。Dojo の dgauge モジュールを使用すると簡単に、ある時点での評価指標をゲージで表示したり、一定期間にわたる測定値をグラフやチャートで表示したりすることができます。

KPI に最善の表示領域の活用法とは言えませんが、多くのビジネス・ユーザーは、自動車のダッシュボードに組み込まれたアナログ計器のようなゲージを歓迎します。自動車のダッシュボード・ディスプレイと同じく、ゲージには、事業のさまざまな側面におけるリアルタイムの (あるいはほぼリアルタイムの) 業績指標が表示されます。何にもまして、シンプルにするのが鉄則です。

Dojo API

このチュートリアルのサンプル・コードは、Dojo Toolkit バージョン 1.9 をベースに AMD フォーマットを使用しています。AMD はコミュニティーの標準です。つまり、この標準に準拠するローダーであれば、どのローダーでもコードを使用することができます。

Dojo Toolkit をまだダウンロードをしていない場合は、この時点でダウンロードしてから、AMD ローダーを使用するために Dojo ディストリビューションに含まれる dojo.js JavaScript ファイルをインポートします。リスト 1 に、dojo.js ファイルのインポート方法を示します。

リスト 1. dojo.js をインポートする
...........
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
    minimum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" >
    
    <title>Company XYZ<title>
           
   <script src="dojo-1.9/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script> 
 ...........
 ...........
 <head>

dojo.js をインポートすると、Dojo Mobile アプリを開発するために必要な標準のモバイル Dojo モジュールにアクセスできるようになります。開発時には、isDebug プロパティーを True (1) に設定してください。AMD を使用する場合は、async プロパティーも True (1) に設定する必要があります。

HTML ページは、必要な Dojo クラスを組み込むだけで、ロードして構文解析することができます。リスト 2 の基本的なモバイル・アプリは、dojox/dgauges ライブラリーから各種の Dojo ゲージおよび指標をロードします。以下に示されているモジュールは、KPI をモバイル・ダッシュボードへ配信するのに役立ちます。これらのモジュールは、Dojo、Dijit、Dojox 別にグループ化されていることに注意してください。

リスト 2. モジュールをロードする (AMD スタイル)
require(["dojox/mobile/parser", "dojo/ready","dojo/dom","dojo/_base/xhr",
"dojox/dgauges/components/default/CircularLinearGauge",
"dijit/registry","dojox/mobile/deviceTheme","dojox/mobile", 
"dojox/mobile/ScrollableView", "dojox/mobile/TabBar", "dojox/mobile/compat"], 
function(parser,ready,registry,deviceTheme) 
{ 

parser.parse();
// Do other stuff here too.

 } );

円形ゲージ、半円形ゲージ、または棒ゲージを作成するには、Dojo Mobile に含まれている dojox.dgauges を使用することができます。また、現在の値、背景、針、矢印を表す組み込みテキストなどの要素を含めてカスタマイズすることで、独自のゲージを作成することもできます。リスト 2 に示されているように、必ず dojox.dgauges を使用してください。古いバージョンの dojox.gauges ライブラリーは非推奨となり、 Dojo バージョン 2.0 で廃止される予定です。

REST/JSON または WebSocket によるデータ・アクセス

RESTful Web サービスと JSON については、よくご存知のことでしょう。以下の Dojo JavaScript スニペットには、e-コマース・ショップが、1 日の返品数に関する評価指標を RESTful に使用可能なリソースから取得して測定する方法を示します。

リスト 3. KPI の評価指標を取得する
require(['dojo/ready','dojo/_base/xhr'], 
     function(ready,xhr){
          ready(function () {
               var targetNode = dojo.byId("kpiGauge");
  xhr.get({
    url:"resources/kpi", handleAs:"json",timeout:10,
    load: function(data){
                     
                    var parsedJSON = dojo.fromJson(dojo.toJson(data));
 
                    addGauge(parsedJSON.dailyReturnMetric);
                  
    },
                    error: function (error) {
                    targetNode.innerHTML = "An unexpected error occurred: " + error;
                }
  });
     });
     
        });

データを取得するには、WebSocket プロトコルを使用するという選択肢もあります。頻繁に更新しなければならない KPI を配信するモバイル Web アプリには、この選択肢が最適です。幸い Dojo には、dojox ソケットをベースに Comet スタイルのリアルタイム通信を使用して WebSocket 接続を行うためのクライアント・モジュールがあります。

リスト 4 では、dojox.socket を使用して、url パラメーターに示されているように Comet リソースから評価指標 KPI を取得します。この場合、返されるコンテンツは JSON フォーマットのままです。フォーマットはリスト 3 の例と同じなので、データを取得するために使用するプロトコルを簡単に置き換えられることがわかるはずです。

リスト 4. WebSocket の場合のコード
var socket = dojox.socket({
    url:"/comet",
    headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
    }});

ステップ 1. KPI モバイル・アプリを作成する

このサンプル・アプリに使用する IBM MobileFirst Platform Foundation Developer Edition は、IBM WebSphere Application Server V8.5 Liberty プロファイルを実行します。MobileFirst Platform 環境は、5 つのコンポーネント (MobileFirst Studio、MobileFirst Server、MobileFirst Device Runtime Components、WebSphere Liberty、MobileFirst Console) を 1 つにまとめたものです。

MobileFirst Platform Foundation Developer EditionWebSphere Liberty がまだインストールされていない場合は、この時点でインストールしてください。

インストールが完了したら、アプリの作成に取り掛かることができます。まず、Eclipse IDE を開いてプロジェクトを作成し、そこに MobileFirst Platform 開発サーバーへの参照を含めます。同じプロジェクト内に Dojo Mobile Web アプリと RESTful Web サービスを作成すると便利です。動的 Web プロジェクト内には、Java EE Web サービスを含めて、そのサービスからいずれかの KPI のサンプル・データを提供します。

  1. 動的 Web プロジェクトを作成し、ランタイムを IBM MobileFirst Platform 開発サーバーに関連付けます。
  2. Dojo ソース (dojo-1.9) を WebContent ディレクトリーにコピーします。
  3. WebContent ディレクトリー内に、index.html ファイルとして単一ページのモバイル・アプリを作成します。
  4. オプションで、Java EE を使用したガイドとして、独自のサンプル Web サービスを作成します。このサービスは、Java アプリケーション・サーバーにデプロイします。

Dojo Mobile コードを実際の RESTful Web サービスでテストしたいとしたら、ApplicationConfig.java (リスト 5)、KPIMetricBean.java (リスト 6)、KPIMobileResource.java (リスト 7) という 3 つの Java ソース・ファイルを作成し、Java EE アプリケーション・サーバーにデプロイすれば簡単にテストすることができます。サンプル・アプリでは、これが 1 日の評価指標としての RESTful リソースとして機能します (図 4 を参照)。

リスト 5. ApplicationConfig.java
package kpi;

import javax.ws.rs.core.Application;

@javax.ws.rs.ApplicationPath("resources")
public class ApplicationConfig extends Application {

}
リスト 6. KPIMetricBean.java
package kpi;

import javax.ejb.Singleton;

@Singleton
public class KPIMetricBean {

    private final String dailyReturnMetric = "56";

    /**
     * @return the singleValue
     */
    public String getDailyReturnMetric() {
        return dailyReturnMetric;
    }

    /**
     * @param singleValue the singleValue to set
     */
    public void setDailyReturnMetric(String dailyReturnMetric) {
            this.dailyReturnMetric = dailyReturnMetric;
    } 
}
リスト 7. KPIMobileResource.java
package kpi;

import javax.ejb.EJB;
import javax.ejb.Stateless;
import javax.ws.rs.Path;
import javax.ws.rs.GET;
import javax.json.JsonObject;
import javax.ws.rs.Produces;
import javax.json.Json;
import javax.ws.rs.PathParam;
import javax.ws.rs.core.MediaType;


@Stateless
@Path("/kpi")
public class KPIMobileResource {

    @EJB
    private KPIMetricBean kpiMetric;

    @GET
   @Produces({MediaType.APPLICATION_JSON})
    public KPIMetricBean getDailyReturns() {

    return  kpiMetric;  
  
    }

}

ステップ 1a. メニューと見出しを追加する

ベースとなる適切な形式の HTML ページ (index.html) を作成し、リスト 1リスト 2 を使用して Dojo Mobile アプリを開始します。<body> タグにはリスト 8 のコードを挿入して、モバイル・アプリの見出しを設定します。

リスト 8. 見出しとリスト項目
    <!-- Start Main List -->
<div id="main" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
    <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">
        <!-- the refresh button -->
        <div data-dojo-type="dojox.mobile.ToolBarButton" style="float:right;"> 
        <!-- you can place a refresh icon here if you choose --> </div>
        Company XYZ
    </h1>
    <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Commerce KPI</h2>
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
        moveTo="inStore" transition="slide">
           In Store
        </li>
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
        moveTo="web" transition="slide">
           Web
        </li>
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
        moveTo="mobile" transition="slide">
           Mobile
        </li>
    </ul>

</div>
  
    <!-- End Main List -->

dojox.mobile.RoundRectCategory は、ユーザーが各種のリスト・ビューをナビゲートする際の最上部の位置に、見出しとして企業の KPI を設定します。一方、dojox.mobile.RoundRectList は、リスト項目のコンテナーです。リスト項目ごとに、dojox.mobile.RoundRectList を使用します。定義される各項目は、ユーザーが対象の KPI を選択するための基本ナビゲーションになります。この例の場合、小売業者の売上高に基づく KPI として、「In Store (ストア内)」、「Web」、「Mobile (モバイル)」という 3 つのリスト項目があります。

ユーザーが指で特定のリスト項目をスライドすると、transition="slide" プロパティーにより、指定された <div> タグへの遷移が行われます。moveTo="toDivName" は、ユーザーが実際にスライドする先の <div> タグを指定します。

リスト 9 は、基本的にはリスト 8 で説明した構文の繰り返しです。ユーザーが前述のリスト項目のいずれかの上で指をスライドさせると、選択肢を特定の KPI に絞り込んだ別の単純なリストが表示されます。この例では、親リスト項目それぞれの「Revenue (収益)」、「Customers (顧客)」、「Returns (返品)」の KPI に絞り込まれます。

リスト 9. リスト項目を宣言する
   <!-- Start In Store KPI -->
      <div id="inStore" data-dojo-type="dojox.mobile.View">
       <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
       moveTo="#main">In Store KPI</h1>
       <br/>
       <ul data-dojo-type="dojox.mobile.RoundRectList">
           <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
           moveTo="storeRevenueKPI" transition="slide">
           Revenue
           </li>
           <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"
            moveTo="storeCustomerKPI" transition="slide">
            Customers
          </li>
           <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
           moveTo="storeReturnKPI" transition="slide">
            Returns
        </li>

    </ul>
</div>
    
    <div id="storeRevenueKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#inStore">In Store Revenue KPI</h1>
    <br/>
    <div class="claro" id="simplechart" style="width: 450px;
 height: 550px; "></div>
</div>

<div id="storeCustomerKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#inStore">In Store Customer KPI</h1>
    <br/>
    <div style="width:300px;height:300px;left:100px;top:100px" id="kpiGauge">
</div>
</div>

<div id="storeReturnKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"
     moveTo="#inStore">In Store Returns KPI</h1>
    <br/>
    <div id="reportTotalsChartDiv"
     style='display:block; clear:none; z-index:999; width:100%; height:100%;'></div>
    <div id='reportTotalsLegendDiv'></div>
</div>
    
    <!-- End In Store KPI -->
    
    <!-- Start Web KPI -->
    
    <div id="web" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#main">Web KPI</h1>
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
        moveTo="webRevenueKPI" transition="slide">
           Revenue
        </li>
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
        moveTo="webCustomerKPI" transition="slide">
            Customers
        </li>
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
        moveTo="webReturnKPI" transition="slide">
            Returns
        </li>

    </ul>
</div>
<div id="webRevenueKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"
     moveTo="#web">Web Revenue KPI</h1>
    <br/>
    <div class="claro" id="simplechart" style="width: 450px; 
height: 550px; "></div>
</div>

<div id="webCustomerKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#web">Web Customer KPI</h1>
    <br/>
    <div style="width:300px;height:300px;left:100px;top:100px"
 id="webkpiGauge">
</div>
</div>

<div id="webReturnKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#web">Web Returns KPI</h1>
    <br/>
    <div id="reportTotalsChartDiv" style='display:block;
     clear:none; z-index:999; width:100%; height:100%;'></div>
    <div id='reportTotalsLegendDiv'></div>
</div>

    <!-- End Web KPI -->
    
    
    <!-- Start Mobile KPI -->
    
    <div id="mobile" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#main">Mobile KPI</h1>
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"
         moveTo="mobileRevenueKPI" transition="slide">
           Revenue
        </li>
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"
         moveTo="mobileCustomerKPI" transition="slide">
            Customers
        </li>
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"
         moveTo="mobileReturnKPI" transition="slide">
            Returns
        </li>

    </ul>
</div>
<div id="mobileRevenueKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"
     moveTo="#mobile">Mobile Revenue KPI</h1>
    <br/>
    <div class="claro" id="simplechart" 
style="width: 450px; height: 550px; "></div>
</div>

<div id="mobileCustomerKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#mobile">Mobile Customer KPI</h1>
    <br/>
    <div style="width:300px;height:300px;left:100px;top:100px"
 id="mobilekpiGauge">
</div>
</div>

<div id="mobileReturnKPI" data-dojo-type="dojox.mobile.View">
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
    moveTo="#mobile">Mobile Returns KPI</h1>
    <br/>
    <div id="reportTotalsChartDiv"
     style='display:block; clear:none; z-index:999; width:100%;
 height:100%;'></div>
    <div id='reportTotalsLegendDiv'></div>
</div>

    <!-- End Mobile KPI -->

リスト 9 で重要なプロパティーは、moveTotransition です。moveTo はレンダリングする <div> ID を指定し、transition=slide は、モバイル機器で非常に一般的なスライド・パターンをビューで使用できるようにします。moveTo で指定された <div> ID のビューがレンダリングされると、新しいページ・ビューが表示されます。

この例の場合、「Revenue (収益)」、「Customers (顧客)」、「Returns (返品)」の 3 つのKPI のリストを示す別のビューが表示されます。スライド操作により、メイン・ビューと同じパターンを使用して KPI のビジュアル・レポートがレンダリングされます。「シンプルにする」手法に従って、今度はレポートのレンダリングに移ります。レポートのレンダリングでは、チャート作成、アナログ・ゲージ、そしてデータ収集用 Ajax/JSON に、Dojo モジュールの充実したライブラリーをそのまま利用することができます。

ビュー・ページおよび遷移ページを完成させるために、最後に画面の一番下にタブ・メニューを組み込みます。リスト・ビューの項目に遷移する main タブと、ユーザーの選択項目に遷移するための settings タブを追加してください。

リスト 10. 「Main (メイン)」タブと「Settings (設定)」タブ
     <!--  Start Settings for KPI  -->
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
    <h1 data-dojo-type="dojox.mobile.Heading" 
    data-dojo-props="fixed: 'top'">Settings</h1>
    <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Settings code here</h2>

</div>

<!-- End Settings for KPI -->

<!--  Keep this at bottom for navigating main screen and settings 'TabBar' -->
<ul data-dojo-type="dojox.mobile.TabBar"
	 data-dojo-props=" fixed: 'bottom'">
    <!-- top left width height -->
    <li data-dojo-type="dojox.mobile.TabBarButton" 
    data-dojo-props=" selected: true, moveTo: 'main'">Main</li>
    <li data-dojo-type="dojox.mobile.TabBarButton" 
    data-dojo-props=" moveTo:'settings'">Settings</li>
</ul>

アプリのランディング・ページには、ナビゲーションの結果として表示される見出し、タブ付きメニュー、リスト・ビューが表示されます。

図 1. KPI モバイル・アプリのランディング・ページ
アプリのランディング・ページのスクリーンショット
アプリのランディング・ページのスクリーンショット

リスト項目をタップすると、ページが次のリスト・ビューのセットに遷移します。図 2 では、「In Store (ストア内)」項目が選択された状態になっていて、ユーザーに「Revenue (収益)」、「Customers (顧客)」、「Returns (返品)」の KPI チャートまたはダイヤルを選択するためのオプションが表示されています。

図 2. KPI のフォーマットの選択
表示する KPI の選択肢のスクリーンショット
表示する KPI の選択肢のスクリーンショット

ステップ 1b. データ・アクセスを検証する

RESTful 呼び出しの JavaScript をコーディングする前に、データが使用可能であることを確かめるのが賢明です。この検証を行っておくと、トラブルシューティングの際に役立ちます。RESTful Web サービスの利点は、GET 呼び出しについては一般に Web ブラウザーを使用して、URL が正しいこと、そして必要なパラメーターを渡していることを検証できることです。

ステップ 1c. 評価指標 KPI を作成する

KPI レポートの作成は、それぞれの組織や事業部門に固有の作業となるものであり、評価指標として KPI を作成するには、ゲージおよびチャート作成用の Dojo モジュールを使用するだけのことです。このアプリの評価指標を宣言によって作成するのではなく、プログラムによって作成すると、設計オプションの柔軟性を探ることができます。

Dojo のチャート作成モジュールを使用すると、ユーザーが一定期間にわたる KPI を表示してその推移を把握できる、魅力的なグラフやチャートを描画することができます。ただし、モバイル端末の画面サイズと帯域幅は限られています。余計なものは最小限にして、有用なビューを提供するようにしてください。

デモンストレーションするために、リスト 11 の JavaScript を index.html ページに配置することができます。あるいは、独自の JavaScript ファイルを作成してメイン HTML ページにインポートすることもできます。

リスト 11. チャート KPI をカスタマイズする
require(["dojox/charting/Chart","dojox/charting/themes/Julie",
		"dojox/charting/plot2d/Columns","dojox/charting/plot2d/Markers",
		"dojox/charting/axis2d/Default","dojo/domReady!",
		"dojox/charting/widget/Legend"], function(Chart, theme) {
      
        //Each item represents the monthly total revenue for the sales channel
        var sampleRevenueData = [10000,9200,11811,12000,7662,13887,
        14200,7142,8002,10009,11288,12099];

        var chart = new dojox.charting.Chart("kpiChart", {
            title: "Monthly Revenue Volume - 2013",
            titlePos: "bottom",
            titleGap: 25,
            titleFont: "normal normal normal 15pt Arial",
            titleFontColor: "black"
          });

        chart.setTheme(theme);
        chart.addPlot("default", {
            type: "Columns",
            label: true,
            gap: 1,
            styleFunc: function(item){
         if(item < 10000){
                  return { fill : "red" };
                }else if(item > 9999 && item < 11000){
                  return { fill: "yellow" };
                }
                else if(item >= 11000){
                    return { fill: "green" };
                  }      
                return {};
            }
        });

        chart.addAxis("x");
        chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
     	chart.addSeries("Monthly Volume - 2013 ",sampleRevenueData);
		chart.render();
    	
       	var chartLegend = new dojox.charting.widget.Legend(
       	{chart: chart, horizontal: true}, "chartLegend");
     
    });

上記の JavaScript コードによって、図 3 に示すチャートがレンダリングされます。この JavaScript はデータ値に対するロジックを使用して、列の色 (緑、黄、または赤) を塗りつぶします。左側の軸 (y 軸) は収益を表し、下側の軸 (x 軸) は 1 月から 12 月までを示します。

図 3. 色付きの列を使用した KPI チャート
色付きの列を使用した KPI チャートのスクリーンショット
色付きの列を使用した KPI チャートのスクリーンショット

ダッシュボード・ダイヤルを表すアナログ・ゲージは、KPI ユーザーの間で人気があります。アナログ・ゲージはモバイル環境の画面表示領域の大半を占める傾向がありますが、アラートしきい値を色分けできるため、ユーザーにとって理解しやすいという利点があります。

リスト 12 のコードに、画面ロード時の Dojo 円形リニア・ゲージを示します

リスト 12. ゲージを宣言する
require(["dojox/dgauges/components/classic/CircularLinearGauge"],
    function (CircularLinearGauge) {

        var kpiGauge = new CircularLinearGauge({

            minimum: 0,
            maximum: 100,
            majorTickInterval: 25,
            minorTickInterval: 5
        }, dojo.byId("kpiGauge"));
        kpiGauge.startup();
        
    });

次に、ページのロード時に RESTful サービスをロードして呼び出す JavaScript を作成します。リスト 5リスト 6、およびリスト 7 に記載した Java ソース・ファイルを使用して Java EE RESTful サービスを作成した場合、リスト 13 によって取得されたデータが表示されます。データが正常に取得されると、addGauge 関数が呼び出され、数値で指定された画面上の範囲が評価レベルを示す色でレンダリングされ、取得されたデータ値を針が指すようになります。

リスト 13. Ajax/JSON を使用してデータを取得する
require(['dojo/ready','dojo/_base/xhr'], 
     function(ready,xhr){
          ready(function () {
               var targetNode = dojo.byId("kpiGauge");
  xhr.get({
    url:"resources/kpi", handleAs:"json",timeout:10,
    load: function(data){
                     
                    var parsedJSON = dojo.fromJson(dojo.toJson(data));
 
                 addGauge(parsedJSON.dailyReturnMetric);    
                  
	 },
                    error: function (error) {
                    targetNode.innerHTML = "An unexpected error occurred: " + error;
                }
  });
     });
     
        });

addGauge 関数は、レンダリングするゲージをカスタマイズします。

リスト 14. ゲージ KPI をカスタマイズする
function addGauge(value) 
{
require(["dojo/ready","dojo/dom","dojo/_base/xhr", "dijit", "dojox/dgauges/TextIndicator",
    "dojox/dgauges/LinearScaler","dojox/dgauges/CircularScale",
    "dojox/dgauges/CircularRangeIndicator","dojox/dgauges/CircularValueIndicator"],
    function (ready,dom, xhr,dijit, TextIndicator, LinearScaler, CircularScale,
              CircularRangeIndicator,CircularValueIndicator) {
        ready(function () {

            var kpiGauge = dijit.registry.byId("kpiGauge");

            kpiGauge.addElement("background", function(g){
                g.createEllipse({
                    cx: 100,
                    cy: 100,
                    rx: 100,
                    ry: 100
                }).setFill("#FFFFFF"); 
                // The background fill of our gauge. This overrides the default fill
                
            });

          // Set our range values and tick increments
            var range = new LinearScaler({
                minimum: 0, // scale starting value ( i.e. 0 )
                maximum: 100, // scale ending value (i.e.100 )
                majorTickInterval: 10, // Big ticks every 10th value, 10,20,30,40, etc.
                minorTickInterval: 5  // minor tick lines every 5th value
            });

            var scale = new CircularScale({
                scaler: range,
                originX: 100,
                originY: 100,
                startAngle: 110,
                endAngle: 70,
                radius: 70,
                labelPosition: "outside",
                tickShapeFunc: function(group, scale, tick){
                    return group.createLine({
                        x1: tick.isMinor ? 2 : 0,
                        y1: 0,
                        x2: tick.isMinor ? 8 : 12,
                        y2: 0
                    }).setStroke({
                            color: tick.isMinor ? "black" : "white",
                            width: tick.isMinor ? 0.5 : 1
                        });
                }
            });
            kpiGauge.addElement("scale", scale);

            // This is our needle
            var indicator = new CircularValueIndicator({
                interactionArea: "none",
                indicatorShapeFunc: function(group){
                    return group.createPolyline([15, -6, 60, 0, 15, 6, 16, -6])
                    .setFill("black").setStroke("white");
                },
                value : value
            });
         
            scale.addIndicator("indicator", indicator);
            
          // Our Green threshold is set
            var rangeIndicatorGreen = new CircularRangeIndicator({
                start: 0,
                value: 20, // End our Green max on the gauge
                radius: 60,
                startThickness:5,
                endThickness: 5,
                fill: "green",
                interactionMode: "none"
            });
            scale.addIndicator("rangeIndicatorGreen", rangeIndicatorGreen, true);

           // Our Yellow threshold is set
            var rangeIndicatorYellow = new CircularRangeIndicator({
                start: 20,
                value: 50, // End our Yellow max on the gauge
                radius: 60,
                startThickness:5,
                endThickness: 5,
                fill: "yellow",
                interactionMode: "none"
            });
            scale.addIndicator("rangeIndicatorYellow", rangeIndicatorYellow, true)

        
         // Our Red threshold is et
            var rangeIndicatorRed = new CircularRangeIndicator({
                start: 50,
                value: 100, // End our red max on the gauge
                radius: 60,
                startThickness:5,
                endThickness: 5,
                fill: "red",
                interactionMode: "none"
            });
            scale.addIndicator("rangeIndicatorRed", rangeIndicatorRed, true);

            // The sets the text of the current value
   
            var indicatorText = new TextIndicator();
       
            indicatorText.set("value", value + "%");
            indicatorText.set("x", 100);
            indicatorText.set("y", 120);
            kpiGauge.addElement("indicatorText", indicatorText);


        });
    });
    
    }

このゲージは以下のように、さまざまなしきい値に応じて色分けされます。赤は、「問題のある」指標です。この KPI の例では、返品が 56 パーセントに上り、問題があることを示しています。ビジネス・ユーザーは、この問題を分析して、根本原因を明らかにすることになります。

図 4. KPI アナログ・ゲージ
KPI アナログ・ゲージを示すスクリーンショット
KPI アナログ・ゲージを示すスクリーンショット

ステップ 2. アプリをテストする

さまざまな端末に対応したモバイル・ブラウザー・シミュレーターを使用することで、Dojo Mobile KPI アプリを簡単にテストすることができます。

ステップ 2a. シミュレーターを使用する

モバイル・ブラウザー・シミュレーターは、Dojo Mobile KPI アプリをテストするのにうってつけのアプリです。このアプリはそのままの状態で MobileFirst Platform アプリで機能し、幅広いモバイル端末をシミュレートします。ローカルで実行する場合は、http://localhost:10080/_MobileBrowserSimulator/ にナビゲートして、モバイル・アプリの URL を入力します。これで、各種のシミュレートされた端末でアプリを表示することができます。選択肢には、Android 端末、BlackBerry 端末、および iOS 端末の多数のバリエーションが含まれています。端末のブラウザーにホスト名を入力する煩わしさを軽減するために、このシミュレーターには URL の QR コードも用意されています。したがって、実際のモバイル端末でテストする段階になったら、テスト対象の URL を入力せずに QR コードを使用することができます。

図 5. MobileFirst Platform 開発サーバーのモバイル・シミュレーター
MobileFirst Platform シミュレーターのスクリーンショット
MobileFirst Platform シミュレーターのスクリーンショット

ステップ 2b. 端末でテストする

シミュレーターでアプリが一応の基準を満たしたら、最終テストとして、利用可能なモバイル端末を使ってファイナル・テストを行います。その方法は、ファイアウォールやネットワークの問題がないことを確認した上で、モバイル端末のブラウザーを使ってアプリの URL にナビゲートするか、シミュレーターから QR コードを取り込むだけです。

まとめ

これで、Dojo Mobile のチャート、グラフ、ゲージを使用して、モバイルでアクセスできる効果的な KPI ダッシュボードを簡単に作成する方法を紹介するハンズオンは完了です。モバイル KPI ダッシュボードを開発する方法は、デスクトップ環境で同じものを開発する場合とそれほど変わりません。Dojo Toolkit を使い慣れている開発者であれば、このサンプル・アプリで使用したチャート作成モジュール、グラフ作成モジュール、ゲージ用モジュールを、Dojo Mobile を使用してモバイルの枠組みに移植するのは簡単です。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, Open source
ArticleID=1008728
ArticleTitle=Dojo Mobile でグラフィカル KPI ダッシュボード・アプリを作成する
publish-date=06252015