はじめに

AngularJSは、SPA(Single Page Application)を含むダイナミックなウェブアプリケーションの構築や、MVCに基づいたアプリケーション設計を支援するオープンソースのJavaScriptフレームワークです。

Qlik Senseには標準機能としてAngularJSが組み込まれており、エクステンション開発においてもこのAngularJSを活用することができます。ここではその手順についてご説明します。

事前の準備

ウェブブラウザから以下のURLを開き、Dev Hubにアクセスします。(Chromeの利用が推奨されます。また、Dev HubはQlik Sense Desktopが稼働している場合のみ利用可能ですのでご注意ください。)

http://localhost:4848/dev-hub/

image

「Create new」をクリックして以下を入力・選択して新たなエクステンションのプロジェクトを作成します。

  • Name: MyAngularJS
  • Template: Basic Visualization template

AngularJSによる基本的な表示

まず、MyAngularJS.jsを開いて、以下の形に修正します。

  • AngularJSでは、制御はコントローラー(Controller)、表示はビュー(View)/テンプレートといった形で役割分担を行います。テンプレートとして「template.ng.html」を読み込み、templateメソッドで設定しています。
  • paintメソッドはAngularJSを利用する場合には不要です。
  • paintメソッドの代わりに、AngularJSを利用する場合にはcontollerメソッドを追加してコントローラーを定義し、ここに制御の処理を実装します。
  • $scopeはスコープオブジェクトと呼ばれ、コントローラとテンプレートの橋渡しを行います。ここではこのスコープのmsgという変数に”Hello AngularJS”を格納しています。
define( [
	'text!./template.ng.html'
],
function ( template ) {

	return {
		definition: {},
		initialProperties: {},
		snapshot: {canTakeSnapshot: true},
		template: template,
		controller: ['$scope', function( $scope ) {
			$scope.msg = "Hello AngularJS";
		}]
	};

} );

次に、「template.ng.html」という名称のファイルを新たに追加し、以下を入力します。

  • qv-extensionをルートのHTML要素に含める必要があります。
  • コントローラーで$scopeに作成されたmsg変数を表示します。AngularJSでは、{{変数名}}という形式で参照します。
<div qv-extension>
    <div>{{msg}}</div>
</div>

そして、エクステンションをQlik Senseアプリのシート上に追加すると、以下の形で表示されます。

image

AngularJSを用いたテーブルの表示

AngularJSを使って基本的なエクステンションの表示は確認しましたので、次にテーブルにデータを表示する処理を実装します。

まず、MyAngularJS.jsの以下の形に修正して、property.jsとinitialProperties.jsを読み込む設定を行います。

define( [
	'text!./template.ng.html',
	'./properties',
	'./initialProperties'
],
function ( template, props, initialProps ) {

	return {
		definition: props,
		initialProperties: initialProps,
		snapshot: {canTakeSnapshot: true},
		template: template,
		controller: ['$scope', function( $scope ) {
			$scope.msg = "Hello AngularJS";
		}]
	};
} );

properties.jsファイルを新たに作成して以下を入力します。

define([], function(){
  return {
    type: "items",
    component: "accordion",
    items: {
      dimensions: {
        uses: "dimensions"
      },
      measures: {
        uses: "measures"
      },
      sorting: {
        uses: "sorting"
      },
      addons: {
        uses: "addons"
      }
    }
  }
})

initialProperties.jsファイルを新たに作成して以下を入力します。

define( [], function () {
    return {
        qHyperCubeDef: {
            qDimensions: [],
            qMeasures: [],
            qInitialDataFetch: [
                {
                    qWidth: 10,
                    qHeight: 50
                }
            ]
        }
    };
} );

template.ng.htmlファイルに以下形でテーブルを追加します。ここでは、ng-repeat, ng-bindといったAngularJSのディレクティブと呼ばれる制御命令を利用しています。

  • ng-repeatは指定された配列から順に要素を取り出してループ処理を行います。ここでは、例えばlayout.qHyperCube.qDimensionInfoで軸の要素をループ処理で取り出し、その要素をdimという変数で参照可能としています。
  • ng-bindはモデルをビューにバインドします。ここでは、例えばdim.qFallbackTitleにより、軸の名称をモデルとして<th>の要素にバインドして表示させます。
<div qv-extension>
    <div>{{msg}}</div>
    <table border="1">
      <thead>
      <tr>
          <th ng-repeat="dim in layout.qHyperCube.qDimensionInfo" ng-bind="dim.qFallbackTitle" />
          <th ng-repeat="mea in layout.qHyperCube.qMeasureInfo" ng-bind="mea.qFallbackTitle" />
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="row in layout.qHyperCube.qDataPages[0].qMatrix">
          <td ng-repeat="col in row">{{col.qText}}</td>
      </tr>
      </tbody>
    </table>
</div>

以上の修正を完了し、エクステンションを表示して問題なくテーブルのデータが表示されることを確認します。

image

まとめ

このエントリでは、AngularJSを使ってエクステンションを開発する手順についてご説明しました。以下の情報もAngularJSを使ったエクステンションの開発に有用ですので、こちらもご参照ください。