はじめに

前回の「Qlik Senseエクステンション開発入門(2)- 基本的なテーブルの作成」ではエクステンションを開発してテーブル形式でのデータの表示を行う方法をご説明してきました。

そこでは、initialProperties, definition, snapshot, paintの4つの処理をMyExtension.jsの一つのファイルにまとめて実装してきました。

image

ただ、特により複雑なエクステンションを開発する場合等には、これらの処理をそれぞれ別のファイルに分ける方がコードの管理性に優れます。ここでは、その方法をご紹介します。

新規ファイルの作成

左上のMenuから「New file」をクリックして、以下の2つのファイルを作成します。

  • initialProperties.js
  • properties.js

image

「initialProperties.js」の作成

initialProperties.jsファイルを作成し、MyExtension.jsファイルのinitialPropertyに記述した処理を切り取ってinitialProperties.jsファイルに貼り付け、以下の形に修正します。(define及びreturnの処理追加されています。)

define([], function(){
	return {
		version: 1.0,
		qHyperCubeDef: {
			qDimensions: [],
			qMeasures: [],
			qInitialDataFetch: [{
				qWidth: 2,
				qHeight: 50
			}]
		}
	}
})

「properties.js」の作成

同様にproperties.jsファイルを作成し、MyExtension.jsファイルのdefinitionに記述した処理を切り取ってproperties.jsファイルに貼り付け、以下の形に修正します。

define([], function(){
  return {
    type: "items",
    component: "accordion",
    items: {
      dimensions: {
        uses: "dimensions",
        max: 1
      },
      measures: {
        uses: "measures",
        max: 1
      },
      sorting: {
        uses: "sorting"
      },
      addons: {
        uses: "addons"
      },
      settings: {
        uses: "settings",
          items: {
            myNewHeader: {
                  type: "items",
                  label: "カスタムヘッダー",
            items: {
              MyStringProp: {
                ref: "prop.myTextBox",
                label: "カスタムプロパティ",
                type: "string",
                defaultValue: "MyExtension"
              }
            }
          }
        }
      }
    }
  }
})

MyExtention.jsファイルの修正

既存のMyExtension.jsファイルを以下の形に修正します。

define( [
  'jquery',
  'text!./style.css',
  './properties',
  './initialProperties'
],
function ($, cssContent, props, initialProps) {
	$("<style>").html(cssContent).appendTo("head");

	return {
      		initialProperties: initialProps,
      		definition: props,
      		snapshot: {
			canTakeSnapshot: true
		},
		paint : function($element,layout) {

上記では、「properties.js」と「initialProperties.js」をモジュールとして読み込んでpropsとinitialPropsの変数に格納し、それらをinitialPropertiesとdefinitionに設定しています。

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

image

まとめ

以上、エクステンションの実装をinitialProperties.js、properties.jsに分割する方法をご説明しました。また、以下では「Yeoman(ヨーマン)」と呼ばれるツールを利用した、Qlik Senseエクステンションを開発するに当たっての雛形を作成(Scaffolding)するモジュールが公開されています。

Yeoman Generator for Qlik Sense Extensions

今回ご紹介したinitialProperties.js、properties.jsの分割などのプロジェクトのファイル構成の標準化やGruntを使ったタスク自動化などがこのモジュールには組み込まれており、こういったツールを使ってエクステンション開発作業の効率化や標準化を図ることができます。

>>Qlik Senseエクステンション開発入門(4)- Backend APIの活用