はじめに

Qlik SenseではHTML5, CSS, jQuery, AngularJSなどの汎用的なウェブ技術を利用して、標準では提供されていない新たなビジュアライゼーション部品をエクステンションとして作成することが可能です。

extension

このエントリでは、”Hello World”の簡単なエクステンションの開発を通じて、エクステンション開発の基本的な流れとプロジェクトのファイル構成について確認したいと思います。

エクステンション作成の準備

Qlik Senseのダウンロードと導入

Qlik Sense Desktopのダウンロードと導入の手順」に従ってQlik Sense Desktopの導入を事前に行って下さい。

image6

利用するアプリのプロジェクトへの追加

また、今回のエクステンションでは「Exective Dashboard」のサンプルアプリを使用します。以下のリンクからサンプルアプリをダウンロードします。

>> Executive Dashboardアプリのダウンロード

ダウンロードしたZipファイルを解凍し、中に含まれる「Executive Dashboard.qvf」のアプリを以下のディレクトリにコピーします。

  • C:\Users\%username%\Documents\Qlik\Sense\Apps

image_thumb10

エクステンション・プロジェクトの作成

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

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

image

「Create New」をクリックします。

1

以下を入力・選択して「Create」をクリックします。

  • Name: MyExtension
  • Template: Basic Visualization template

image

以下の編集画面が立ち上がります。

image

“Hello World”エクステンションの作成

まずは、エクステンションの基本的な作成手順と動きを確認するために、”Hello World”の文字列を表示するシンプルなエクステンションを作成してみたいと思います。

「MyExtension.qext」ファイルのタブを開き、nameの項目を”Hello World”に修正します。

image

「MyExtension.js」ファイルを開き、$element.htmlの引数を”Hello World”に修正し、「Save」ボタンをクリックします。

image

ウェブブラウザから以下のURLを開き、Hubを開きます。(Qlik Sense DesktopからもHubを開くことは出来ますが、エクステンション開発時にはウェブブラウザからHubを開いて動作を確認する方が作業上便利です。)

http://localhost:4848/hub

image

「Executive Dashboard」のアプリを開いてシートを新規作成し、編集モードに入ります。「Hello World」という名称のチャート部品が追加されていることを確認します。

image

「Hello World」のチャート部品をシートにドラッグ&ドロップで配置し、以下の様に「Hello World」という文字列を表示されたことを確認します。

image

エクステンションのファイルの構成

“Hello World”エクステンションで基本的な動きを確認しましたので、次にエクステンション・プロジェクトに作成されたファイルの役割を確認したいと思います。尚、作成したエクステンション・プロジェクトの実態は以下のフォルダに保存されています。

  • C:\Users\%username%\Documents\Qlik\Sense\Extensions\MyExtension

image

QEXTファイル

QEXTファイルはエクステンション名やアイコンなど、エクステンションに関わるメタデータを管理するファイルになります。このファイルでは以下の様な項目を管理することが可能です。

name : エクステンションの名称を指定します。先ほどは”Hello World”を指定して以下の形でライブラリやプレビューに名称が表示されていました。

image

description: エクステンションの説明を記述します。

descriptionの内容は以下の様にプレビューに説明が表示されます。

image

icon: ライブラリやプレビューに表示されるアイコンを指定します。以下のアイコンが指定可能で、デフォルトでは”extension”となっています。

image

(※上記テーブルはQlik Sense for Developer : Working with the meta data より抜粋)

ここで例えば”icon”に”table”を指定すると、以下の様にライブラリとプレビューにテーブルのアイコンが表示されます。

image

preview: プレビューに表示するイメージを指定します。このpreviewの指定が省略された場合には、上記のiconのイメージが表示されます。

image

ここで例えば、preview.pngをエクステンション・プロジェクトのフォルダ(C:\Users\%username%\Documents\Qlik\Sense\Extensions\MyExtension)に配置し、上記の形で”preview”に”preview.jpg”のアイコン名を指定すると、以下の様にプレビューやWorkbench上のアイコンにテーブルのアイコンが表示されます。

image

画像のフォーマットはPNG形式で、140×140のサイズのイメージファイルを利用することが推奨されます。

その他、以下の様な項目が設定可能となっています。

type: エクステンションのタイプを指定します。ビジュアライゼーション用のエクステンションは必ず”visualization”を指定する必要があります。

version: エクステンションのバージョンを指定します。

author: エクステンションの作成者を記入します。

Javascript(JS)ファイル

Javascriptファイルはエクステンションを実行する主なコードを含むファイルとなり、エクステンションの開発は主にこのファイル上で行います。

image

このJavascriptのファイルには最低限defineとpaintの項目が含まれます。

define: 先頭に配置されたこのdefineコマンドにより、jQueryやCSSなど他のコードへの参照を追加することができます。 (Javascriptモジュールの依存性を管理するRequireJSのdefineが利用されています。)例えば、以下の様にdefineに’jquery’を追加し、functionの引数に$を追加すると、$(“..”)の一般的なjQueryの形式でjQueryの処理を記述することができます。

define( [
  'jquery'
],
function ($) {

	return {
		paint: function ($element) {
			//add your rendering code here  
			$element.html("Hello World");        
		}
	};

} );

paint: paintメソッドはビジュアライゼーションを描画するためのメソッドで、描画を行うタイミングで毎回呼び出されます。paintメソッドは以下の引数を受け取ることができます。

  • $element: ビジュアライゼーションが描画される領域のHTML要素を含むjQueryラッパー
  • layout: ビジュアライゼーションに利用するデータとプロパティの内容
define( [
  'jquery'
],
function ($) {

	return {
		paint: function ($element) {
			//add your rendering code here          
			$element.html( '<div id="display"></div>' );
            		$("#display").text("Displayed by jquery");
		}
	};

} );

上記では$elementを利用して、エクステンションの表示領域に<div id=”display”></div>を追加する処理を行っています。その後にjQuery処理で”Displayed by jquery”の文字列をその<div>タグ内に追加しています。上記の結果は以下の形となります。

image

また、同様にCSSへの参照を追加することができます。CSSについては次のCSSファイルの説明の中で見ていきたいと思います。

CSSファイル

CSSファイルを追加してビジュアライゼーションのスタイルを調整することが出来ます。以下、CSSファイルを追加する手順をご説明します。

左上のMenuから「New file」をクリックします。

image

ファイル名を指定して「Create」をクリックします。ここではstyle.cssと入力します。

image

追加されたCSSファイルに記述を追加します。Qlik Senseではビジュアライゼーションにqv-object-[エクステンション名]の形式でCSS classが設定されます。以下ではビジュアライゼーション中の”display”のclass属性を持つ<div>タグ内のテキストを赤字で表示するよう指定しています。

/* CSS */
.qv-object-MyExtension div#display {
	color: red;
}

「MyExtension.js」ファイルタブを開き、以下の形でCSSファイルへの参照を追加します。

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

	return {
		paint: function ($element) {
			//add your rendering code here          
			$element.html( '<div id="display"></div>' );
            		$("#display").text("Displayed by jquery");
		}
	};

} );

CSSが適用され、以下の様にエクステンション内の文字が赤字で表示されるようになります。

image

尚、上記はQlik Senseが含むRequireJSプラグインを利用してCSSの内容をドキュメントヘッダーに注入する方法になりますが、以下のステートメントを追加してCSSへの参照リンクのみをヘッダーに加える方法もあります。

$('<link rel="stylesheet" type="text/css" href="/extensions/MyExtension/style.css"  />').appendTo("head");

また、以下の形でRequireJSのCSS Loader Pluginを利用することも可能です。この時は「$(“<style>”)・・・」の処理は不要です。

define( [
  'jquery',
  'css!./style.css'
],
function ($) {

	return {
		paint: function ($element) {
			//add your rendering code here          
			$element.html( '<div id="display"></div>' );
            		$("#display").text("Displayed by jquery");
		}
	};

} );

wbfolder.wblファイル

Workbench上では非表示となっていますが、エクステンション・プロジェクトのフォルダ内にwbfolder.wblファイルが作成されます。このファイルには、以下の形でプロジェクトに含まれるファイル名の一覧が含まれています。

image

まとめ

このエントリでは”Hello World”の文字列を表示するシンプルなエクステンションの作成を通じて、新規エクステンション作成の手順やエクステンション・プロジェクトに含まれるファイルの役割などについて確認してきました。この次のエントリではQlik Senseエンジンで集計されたデータを表示する処理を組み込んでいきたいと思います。

>>Qlik Senseエクステンション開発入門(2)- 基本的なテーブルの作成