Qlik Senseのビジュアライゼーション拡張機能について概要から詳細な実装方法まで解説いたします。Extension(エクステンション)と呼ばれる機能は、標準的なWeb技術を利用してQlik Senseの可視化機能を拡張することを可能にします。Extensionを用いれば、開発者はQlik Sense APIのパワーとWeb技術を組み合わせることができるプラグインを開発可能です。

1. Qlik Sense Extension開発
- Extensionの概要から実際の開発詳細まで
2021/02/09
クリックテック・ジャパン株式会社
TECH TALK

2. TECH TALKとは？
Qlikの製品や機能の中から
特定のテーマを取り上げて、
技術的な情報を発信していくセミナーです。

3. Q&Aについて
• 質問はZoom画面下のQAアイコンをクリックして入力してください。
• 質問に対してQlikパネラーが随時QAパネルで回答します。
• 質問と回答については、セミナーの最後に他の参加者に情報共有させていただき
ます。

4. 1. Qlik Senseの統合機能について
 Extend, Embed, Expand
2. Extension(エクステンション)について
 エクステンションとは?
 エクステンションの導入および開発環境
 実際にエクステンションを開発してみる
• Hello World的なもの
• 標準およびカスタムプロパティ
• 集計データを取得&表示
 Tips
• Extensionを開発する際の注意点など
• HyperCubeの全データを取得・表示する最もシンプルな汎用的Extensionコード
アジェンダ

5. Qlik Senseの統合機能について

6. Qlik Senseの統合機能について
Extend(拡張)
標準のQlik Senseの機能
(チャート等)以外に、独自の
ビジュアライゼーションを開
発し、アプリ内に配置
Embed(埋め込み)
Qlik Senseのアプリを、他の
Web系システム(Salesforce
等)に配置したり、マッシュアップ
やWebサイトを作成
Expand(発展)
Qlik SenseのAPI群を駆使し、
Qlik Senseのクライアントインター
フェイスから独立したWebアプリや
カスタムソリューションを開発

7. • 汎用的なWeb技術の採用により、様々なカスタマイズや拡張を行うことが可能
• HTML5, CSS, JavaScriptなどの汎用的なWeb技術に基づいたQlik Sense APIを提供
Qlik Senseが採用・提供するWeb技術とオープンなAPI

8. Extension(エクステンション)について

9. Extension(エクステンション,拡張)とは?
• JavaScriptで動作するWeb部品で、Qlik
Senseの標準チャート類と同様に動作
• 既存のサードパーティ製可視化ライブラリを活
用しつつ、設計・開発される
• 他のシステムやプロセスに接続したり、統合す
るためも利用可能(チャートに限らない)
• 利用するには、Qlik Senseへのインス
トールが必要
• Qlik Senseの連想エンジンと対話するた
めの各種アプリケーションプログラミングイン
ターフェース(API)を利用

10. • エクステンションのインストールと使い方
• 基本の「Hello World」エクステンションの作成手順
• 開発者が利用する環境
• カスタムプロパティの追加
• データバインディング
• Tips
Extensionの導入から開発までの道のり

11. はじめてのExtension
• QlikのWebサイト経由で何かのExtensionをダウンロードする
• そのExtensionをQlik Senseにインストールする
• Qlik Senseで、そのExtensionを表示する

12. Extensionの検索 & インストール
https://developer.qlik.com/garden -> GitHub -> 指示に従い.zipをダウンロード
(必要ならサンプルの.qvfファイル等も)

13. Extensionのインストール & 表示
• Qlik Sense Desktop
• C:Users[User]DocumentsQlikSenseExtensions に.zipを解凍
• Qlik Sense Enterprise on Windows
• QMC-[Extensions]-[Import]で.zipをインポート
• SaaS版 Qlik Sense
• [管理]-[エクステンション]-[追加]で.zipをインポート
• アプリを開いて、編集モードに
• カスタムオブジェクト -> エクステンション
• 編集画面内にドラッグアンドドロップ
• 軸・数式や各種設定を編集

14. • エクステンションのインストールと使い方
• 基本の「Hello World」エクステンションの作成手順
• 開発者が利用する環境
• カスタムプロパティの追加
• データバインディング
• Tips
Extensionの導入から開発までの道のり

15. 最も基本的なExtensionを開発
1. Qlik Sense Desktopを利用
2. Extensionの最小限の構成要素「qextファイル」と「jsファイル」を用意
3. C:Users[user]DocumentsQlikSenseExtensionsSimpleHel
loWorld フォルダを作成
4. simple-helloworld.qextファイルとsimple-helloworld.jsファイルをコピー
5. Qlik Sense Desktopで何かアプリを開く
6. 何かシートを開き、編集モードに
7. カスタムオブジェクトとしてエクステンションが出現!!
8. Simple Hello Worldエクステンションを実際に配置して、実行してみる

16. Qlik SenseのExtensionの基本構成要素
xxxxx.qext – Extensionの定義ファイル(JSON形式,UTF-8)
xxxxx.js – ExtensionのメインのJavaScriptファイル(UTF-8), RequireJS向けのモジュールを実装

17. simple-helloworld.js – メインのJavaScriptファイル
利用したい(および関連する)JavaScriptライブラリなどをRequireJSで要求
‘jquery’は、Qlik Senseに内蔵される’jquery.js’への特別なパス
Extension内でライブラリ(例:jquery)を参照する場合の変数

18. 配置したExtensionのHTML領域をレンダリングするためのメソッド
再描画時や集計データ変更時、必要に応じてQlik Senseから度々呼び出される
simple-helloworld.js – メインのJavaScriptファイル

19. • layout.qInfo.qId
 配置したExtensionのオブジェクトID(文字列)で、追加するHTML要素の’id’を構成する際に超重要!!
simple-helloworld.js – メインのJavaScriptファイル
配置したExtensionのレンダリング領域のHTML要素を表すjQueryのオブジェクト
配置したエクステンションの集計データやプロパティを含むオブジェクト

20. Simple Hello Worldエクステンションを試す
?!

21. • エクステンションのインストールと使い方
• 基本の「Hello World」エクステンションの作成手順
• 開発者が利用する環境
• カスタムプロパティの追加
• データバインディング
• Tips
Extensionの導入から開発までの道のり

22. Extensionの開発時に使える便利な環境
• Qlik Sense Desktop の場合
• Qlik Sense Enterprise on Windows(サーバー版)の場合
• ログを出力するJavaScriptコードを編集して追加
• JavaScriptコードの不具合を修正
• Webブラウザの開発者機能とコンソール

23. Qlik Sense Desktopの場合
• C:Users[user]DocumentsQlikSenseExtensions フォルダに
ある.jsファイルなどを、エディタで直接編集
• [F5]キーでアプリ画面をリロード
• 各種プロパティの構造を変更した場合は、Extensionの再配置(または置換)が必要
• Webブラウザで http://localhost:4848/hub/ を表示すると便利!!
• Qlik Sense Desktop内蔵の簡易IDE(統合開発環境)”Dev Hub”
• Webブラウザで http://localhost:4848/dev-hub にアクセス
• [Extension editor] -> [Create new project] または [Open project]
• wbfolder.wblファイルが必要(Extensionとして利用するファイル一覧を列挙)
• .jsファイルなどをDev Hubのエディタで編集し、アプリ画面をリロード
• 各種プロパティの構造を変更した場合は、Extensionの再配置(または置換)が必要

24. Qlik Sense Enterprise on Windowsの場合
• Qlik SenseサーバーマシンのExtensionのリポジトリ(共有フォルダ)を直接編
集する訳にはいかない。。。
• Extensionの更新は、QMCで削除して再インポート!!
• Qlik Senseサーバー内蔵の簡易IDE(統合開発環境)”Dev Hub”
• Webブラウザで http[s]://[Qlik Senseサーバー]/dev-hub にアクセス
• [Extension editor] -> [Create new project] または [Open project]
• wbfolder.wblファイルが必要(Extensionとして利用するファイル一覧を列挙)
• .jsファイルなどをDev Hubのエディタで編集し、アプリ画面をリロード
• 各種プロパティの構造を変更した場合は、Extensionの再配置(または置換)が必要

25. Qlik Sense内蔵の”Dev Hub”

26. JavaScriptコードの修正
• コンソールログの出力
• div要素にid属性を設定
• ExtensionのHTML領域をクリアしてから、div要素(jQueryオブジェクト)を追加

27. Webブラウザの開発者機能とコンソール
• Webブラウザでアプリにアクセスして、Webブラウザの開発者機能を利用
• http://localhost:4848/sense/app/...
• http[s]://[Qlik Senseサーバー]/sense/app/...
• 実は、Qlik Sense Desktop内蔵のChromiumの[DevTools]を表示可能!!

28. • エクステンションのインストールと使い方
• 基本の「Hello World」エクステンションの作成手順
• 開発者が利用する環境
• カスタムプロパティの追加
• データバインディング
• Tips
Extensionの導入から開発までの道のり

29. カスタムプロパティの追加
definition: { … } の定義を追加
uses: xxxxx でデフォルト機能を流用
paint: { … } でプロパティを取得
layout.[ref名] でアクセス

30. • エクステンションのインストールと使い方
• 基本の「Hello World」エクステンションの作成手順
• 開発者が利用する環境
• カスタムプロパティの追加
• データバインディング
• Tips
Extensionの導入から開発までの道のり

31. データバインディング - 集計データを取得&表示してみる
• “Hello Data”エクステンションを新規作成(+ プレビュー画像)
• 集計データの取得
• 軸・メジャーなどを指定できるプロパティの追加
• 集計データ(Qlik HyperCube)の各種データにアクセス
• HyperCubeの「initialProperties」の指定
• HTMLの<table>要素のレンダリング

32. “Hello Data”エクステンションを新規作成 + プレビュー画像
hellodata.png
hello-data.qext
hello-data.js

33. 集計データを取得できるようにして、その中身を確認
• 軸・メジャーを設定するプロパティを追加定義
• 何らかのアプリ内でExtensionを配置し、軸を2つ、メジャーを2つ指定
• paint:メソッドで、取得したHyperCubeの内容を確認
• 軸(0個...N個)の情報
• メジャー(0個...M個)の情報
• 集計データの各セルをテーブル形式(N+M x 行数)で格納
• 集計データ全体の縦横サイズ情報
etc.
軸1 軸2 メジャー1 メジャー2
N M
行数

34. Extensionに軸・メジャーを設定するプロパティを追加
単にデフォルト機能
軸・メジャー・ソース
を流用して定義

35. HyperCubeの内容を確認
• layout.qHyperCube.qDimensionInfo
• 軸(0個...N個)の情報
• layout.qHyperCube.qMeasureInfo
• メジャー(0個...M個)の情報
• layout.qHyperCube.qDataPages
• 集計データの各セルをテーブル形式で格納
• layout.qHyperCube.qSize.qcx
• 集計データ全体の横サイズ
• layout.qHyperCube.qSize.qcy
• 集計データ全体の縦サイズ
• this.backendApi.getRowCount() でも可
?!

36. Extensionを完成させる
集計データをすぐに受信するために、プロパティを追加
軸やメジャーのラベルや書式設定を変更する
集計データの構造をWebブラウザのコンソールで確認
<table>要素をレンダレングするJavaScriptコード

37. initialPropertiesの指定 - 集計データをすぐに受信
• 1ページ分だけ最初に自動でデータを受信してくれる
• 集計データの更新時にも1ページ分は自動で受信
• paintメソッドは、layout.qHyperCube.qDataPages[0]を
利用可能な状態で呼ばれる
• qInitialDataFetch で指定
• qWidth >= 軸の数(N) + メジャーの数(M)
• qHeight = 取得したい最大行数
※但し、セルの個数は最大で
qWidth x qHeight <= 10000
・
・
・

38. Qlikの連想エンジンが返す集計データの構造
qMatrix[i].length=4 (qArea.qWidth)
qMatrix.length=7
(aArea.qHeight)
• layout.qHyperCube.qDataPages[0].qMatrix は、配列の配列でセルデータを保持

39. <table>要素をレンダレングするJavaScriptコード
• ...qDimensionInfo[i].qFallbackTitle
• 軸の表示用ラベル文字列
• ...qMeasureInfo[i].qFallbackTitle
• メジャーの表示用ラベル文字列
• ...qDataPages[0].qMatrix[r][c].qText
• データを書式付き文字列として表したもの
を参照して、<table>要素用の文字列を作成

40. Tips - Extensionを開発する際の注意点など
• QlikのJavaScriptライブラリ本体(Capability API)を利用するため、‘qlik’ はたいていの場合必要となる
define(['qlik'], function(qlik) {
return {
• 外部のJavaScriptライブラリなどもロードできる(※ライブラリは基本的にモジュール/RequireJSへの対応が必要になるでしょう)
• 例えば、Qlik Sense同梱のd3.jsではない、最新のd3.jsなどをロードしてExtension内で利用することも可能
https://help.qlik.com/en-US/sense-developer/November2020/Subsystems/Extensions/Content/Sense_Extensions/extensions-load-resources.htm
• layout.qHyperCube.qDataPagesには、自動で1ページ目(最大で10000セル)しか読み込まれない
• 巨大な集計データを一遍にに受信すると、長時間Web画面が固まるなどの弊害が出るため、小分けにして受信出来る仕様
• その1ページ目のため、qInitialDataFetchプロパティ(列数と行数)を事前に固定値として指定しなくてはならない
• 10000セルを超える集計データを取得するには??
• Extension用に提供されるBackend APIの「this.backendApi.getData(...)メソッド」を繰り返し呼び、2ページ目以降を取得
• getDataメソッドは非同期で実行され(JavaScriptのPromiseオブジェクトを返す)、追加のデータ受信をコールバックで待つ必要がある
var requestPage = [{qTop: t, qLeft: 0, qWidth: w, qHeight: h}];
self.backendApi.getData(requestPage).then(function(dataPages) {...});
• ...qMatrix[r][c]のqTextプロパティ(書式付文字列 or “-”)が無く、qNumプロパティ(数値 or “NaN”)のみの場合がある
• qElemNumberプロパティが-2ならNullのセル
• 通常は、文字列をHTMLデータとして出力する際は、サニタイズ(例:‘<’を’&lt;’に置換など)が必要です!!

41. HyperCubeの全データを取得・表示する最もシンプルなExtensionコードの例
QlikのAPI全体を活用する場合、’qlik’を追加
qInitialDataFetchプロパティは使わず、全データを受信す
るために、1ページ目も含めて全ページを自前で受信する。その
おかげで、列数と行数とを事前に固定値に決め打ちする必要が
無くなり、1ページ目が自動で取得されてしまうことも防ぐ
qDataPages[p]の1ページに詰め込める最大行数を計算
全データ受信済みなら、単に全データをレンダリングしてpaint
メソッドを抜ける
2..N番目のページを要求するため、再帰呼び出し
1..N-1番目のページを要求して、受信されるとコールバック
メソッドが呼ばれる
全データを受信したら、データをレンダリングして、再帰を終了
1ページ内に受信するデータの最大範囲を指定
初回または集計データ変更時にpaintメソッドが呼び出された際、
qDataPagesは空配列の状態(length=0)になっている
軸・メジャーの個数はそれぞれ任意の数でOK

42. HyperCubeの全データを取得・表示する最もシンプルなExtensionコードの例
今、アプリが「編集モード」か否かを判定して、デザイン時のみ
表示を動的に切り替えることも可能
受信済みの全データを、ページ単位で繰り返しアクセス
Nullデータは ‘-’ で表示

43. その他の情報

44. Qlik SenseのExtensionに関するWebサイト
• オンラインヘルプ > Qlik Sense for developers > Using Sense APIs > Widgets and
extensions > Visualization extensions(英語)
 https://help.qlik.com/en-US/sense-
developer/November2020/Subsystems/Extensions/Content/Sense_Extensions/extensions-
introduction.htm
• サンプルのソースコードのダウンロード(英語)
 https://help.qlik.com/en-US/sense-
developer/November2020/Subsystems/Extensions/Content/Sense_Extensions/Tutorials/extensions-
downloadable-examples.htm
• Extension開発者向けポータル(英語)
 https://developer.qlik.com/garden
• Qlik Sense Enterprise on Windows向けAPIリファレンス(英語)
 https://help.qlik.com/en-US/sense-developer/November2020/Content/Sense_Helpsites/APIs-and-
SDKs.htm

45. Qlik Sense 参考書
Qlik Sense ユーザーのためのデータ分析実践バイブル
・判型：B5 変 ・総ページ数：～480 ページ程度
・予価本体：4,200円 (+税)
• QlikSpaceの記事をベースに、書籍用に大幅にカ
スタマイズ＆加筆
• 1 冊でQlik Sense の基本をマスターし（＝基本
編）、ニーズの高い分析例（＝応用編）をできる
だけ丁寧に紹介