Extension(エクステンション)と呼ばれる機能は、標準的なWeb技術を利用してQlik Senseの可視化機能を拡張することを可能にします。エクステンションを用いれば、開発者はQlik Sense APIのパワーとWeb技術を組み合わせることができるプラグインを開発可能です。 本セミナーでは、エクステンションの開発手順についてあらためて説明しつつ、HTMLデータやJavaScriptコードを自由にプログラミング可能な汎用的なエクステンションの実装例をデモとともに紹介・解説いたします。

1. Qlik Sense Extension開発 第2弾
- プログラミング可能な汎用エクステンションのご紹介
2021/08/31
クリックテック・ジャパン株式会社

2. 1. おさらい
 Extension(エクステンション)について
 エクステンション開発・配布・実行に関する考察
2. プログラミング可能な汎用エクステンションについて
 実装内容の解説
 いくつかの実行サンプル
 セキュリティ設定
アジェンダ

3. おさらい
Extension(エクステンション)について

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

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

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

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

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

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

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

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

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

13. エクステンション開発・配布・実行

14. エクステンション開発・配布・実行の実際のところ
1. 基本的に、特定の機能を実現する「1機能1エクステンション」
2. Qlik Sense(QlikViewも)向けには、これまで自由なHTML/JavaScriptを記
述できる汎用的なエクステンションが存在していない(有りそうで無い)
3. エクステンションの開発には、Qlik Sense Desktop または Qlik Sense
Enterprise for Windows が必須
4. 簡単なHTML/JavaScriptからなるエクステンションを開発しようにも、そもそも開
発作業の敷居が高い
5. 開発時のデバッグや、エクステンションの修正・確認に手間がかかる
6. エクステンションのバージョンアップなどの更新時には、QMC(QSEoW, SaaS)で
「削除->再インポート」の手間がかかる
などなど…

15. ご提案 - たった1つの汎用エクステンションですべて解決?!
私がふと思い付いて実際に実装してみたエクステンションとは??
GitHub - https://github.com/ttcodegear/QS_JavaScriptButton_Extension
1. エクステンションのカスタムプロパティで、数式としてHTMLデータやJavaScriptコー
ドを記述したり、既存の文字列をコピペするだけ
2. 1つのエクステンションで足りるので、QMCでエクステンションの更新は基本不要
3. 軸とメジャーの設定は、どちらも0個以上でOK
4. paintメソッドで、設定HTMLデータを出力したり、JavaScriptコードブロックを無
名メソッド(Functionクラスのオブジェクト)としてそのまま実行(call)する
5. エクステンション自体の実装は超超超シンプル
などなど・・・

16. プログラミング可能な汎用エクステンション
について

17. エクステンションのpaintメソッド(わずか6行、もっと減らせる)
・・・

18. エクステンションの軸・メジャー・ソートなどの基本設定

19. エクステンションのinitialProperties設定

20. エクステンションのカスタムプロパティ(HTML/JavaScript)

21. エクステンションのデフォルトの動作を試す

22. いくつかの実行サンプルとセキュリティ

23. Qlikアプリの変数を展開、JavaScriptデバッガの起動

24. Qlik APIの利用 – HyperCubeへのアクセス,数式計算

25. Ajaxの利用 – 外部のREST APIを呼び出す
REST APIのサンプル実装サイト
 https://reqres.in/

26. D3.jsの利用 – Qlik Sense内蔵のD3.jsを利用

27. Qlik Sense内蔵のRequireJS と 外部ライブラリ

28. レスポンスヘッダ: content-security-policy
Webブラウザで、以下の私のQlik Sense SaaS上のアプリにアクセスした時、
https://tts2.ap.qlikcloud.com/sense/app/3520fb1b-9fab-43ee-b299-6b6fb41b7760/overview
以下のレスポンスヘッダが返って来る
-------
...
content-security-policy: base-uri 'self'; block-all-mixed-content; child-src blob: app.pendo.io; connect-src 'self'
api.qlikdataengineering.com sqs.us-east-1.amazonaws.com maps.qlikcloud.com api.rollbar.com rs.fullstory.com
app.launchdarkly.com events.launchdarkly.com app.pendo.io data.pendo.io pendo-static-
5763789454311424.storage.googleapis.com cdn.qlikcloud.com cdnjs.cloudflare.com cdn.jsdelivr.net reqres.in unpkg.com
wss://tts2.ap.qlikcloud.com; default-src 'none'; font-src 'self' data: cdn.qlikcloud.com; frame-ancestors 'self' app.pendo.io
jatok-tts1 localhost; frame-src 'self' app.pendo.io; img-src 'self' data: maps.qlikcloud.com services.arcgisonline.com
cdn.pendo.io app.pendo.io pendo-static-5763789454311424.storage.googleapis.com data.pendo.io *.gravatar.com *.wp.com
*.googleusercontent.com cdn.qlikcloud.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: maps.qlikcloud.com
edge.fullstory.com app.pendo.io pendo-io-static.storage.googleapis.com cdn.pendo.io pendo-static-
5763789454311424.storage.googleapis.com data.pendo.io cdn.qlikcloud.com cdnjs.cloudflare.com cdn.jsdelivr.net reqres.in
unpkg.com; style-src 'self' 'unsafe-inline' app.pendo.io cdn.pendo.io pendo-static-
5763789454311424.storage.googleapis.com cdn.qlikcloud.com; upgrade-insecure-requests; worker-src blob:;
...
-------

29.  Qlik Sense SaaSでは、Webブラウザから外部のリソースをロードしたり、外部のWeb
サービスにAjaxなどでアクセスする場合には、Webブラウザのセキュリティ機能が解釈す
る「Content Security Policy」 のレスポンスヘッダについて、テナント管理者が管
理コンソール画面で追加設定する必要あり
レスポンスヘッダ: content-security-policy

30. Qlik Sense Enterprise for Windowsの場合
デフォルトでは、content-security-policy はレスポンスヘッダに含まれない
QMCのVirtual Proxyの[Additional response headers]で設定可能

31. その他の情報

32. Qlik SenseのExtensionに関するWebサイト
• 今回紹介したエクステンション
 https://github.com/ttcodegear/QS_JavaScriptButton_Extension
• オンラインヘルプ > Qlik Sense for developers > Using Sense APIs > Widgets and
extensions > Visualization extensions(英語)
 https://help.qlik.com/en-US/sense-
developer/May2021/Subsystems/Extensions/Content/Sense_Extensions/extensions-introduction.htm
• エクステンションのサンプルのソースコードのダウンロード(英語)
 https://help.qlik.com/en-US/sense-
developer/May2021/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/May2021/Content/Sense_Helpsites/APIs-and-SDKs.htm