Qlik TechFest A-7 qvfもソースコードも全部見せます！ユーザが作るExtension

© 2021 PRESUS CUBE Corporation. All Right Reserved.
2021年6月
株式会社プレサスキューブ
木下直己
qvfもソースコードも
全部見せます！
ユーザが作る Extension
Extension

1
会社概要
事業内容：保健薬局向け経営支援及びマーケティング支援
会社名：株式会社プレサスキューブ
取締役：代表取締役社長小森雄太
代表取締役副社長熊倉武史
取締役金指伴哉
取締役小林英長
取締役宮川順平
所在地：〒1070052 東京都港区赤坂8-5-6 住友不動産青山ビル西館4F
URL ： http://presus3.com
設立年月日： 2016年7月1日

2
BHIとは
BI - Business Intelligence -
企業に蓄積された大量のデータを集めて分析し、迅速な
意思決定を助けるのためのツールです。経営管理や売上
のシミュレーションなどに活用できるもので、近年BIツール
を利用する企業が増加しています。
（データの時間 https://data.wingarc.com/what-is-bitool-6123より）
薬局は顧客一人ひとりから貴重なデータを日々いただいてい
ます。そのデータは膨大です。いただいたデータをその顧客
のために活用させていただくことはもちろんですが、更に地域
の顧客のために「薬局ができること」がデータから発見できる
と私たちは信じています。
BHI - BUSINESS and HEALTHCARE INTELLIGENCE -

はじめに
qvfもソースコードも公開して、
ユーザが作るExtensionをご紹介します。
※ データは第1回 Qlik データソンの課題を使用
3

その１．表に数式を入れたい
表に数式を入れたい
軸で数式を入れるとなんかカッコ悪い。
4

Extentionを作ると
好きなデザインを作れます。
5
Extension

Extentionを使うべき理由①
メジャー（数式、書式）が使える
標準のグラフや表のようにメジャーを追加し、
数式や書式を設定できます。
複雑な計算処理はQlikが実行し、計算結果を書式を
そろえた状態でExtentionに戻してくれます。
例）
layout.qHyperCube.qDataPages[0].qMatrix[0][0].qText
6
791,611,880円が戻ってくる

Extentionを使うべき理由②
HTMLで描画できる
Qlikが戻した計算結果を、
HTMLで自由に描画できます。
※ JavaScriptでタグを組み立てます。
7

Extentionを使うべき理由③
CSSが使える
CSSが使えるので
デザインを思いのまま！！
8

Extentionを使うべき理由
1. メジャー（数式、書式）が使える
2. HTMLで描画できる
3. CSSが使える
難しい事はQlikに任せて、いいとこ取りの
分析アプリが自由に作れちゃいます。
9
Extension

その２．分析軸を切り替えたい
分析軸を切り替えたい
代替軸でもできますが気づいてもらえない・・・。
10

分析軸Extentionを作ると
シンプルで使い勝手が良くなります。
11
Extension

分析軸Extentionを使うべき理由①
クリックするだけで切り替わる
分析軸をクリックすると、全てのグラフ、表の
集計単位（分析軸）が切り替わります。
シートを切り替えても分析軸が引き継がれるので
今どんな切り口で分析しているかが分かります。
12

分析軸Extentionを使うべき理由②
一覧で、どんな分析軸があるか分かる
分析軸を一覧表示する事で、マニュアルを確認しな
くても、どんな分析軸があるか分かります。
「あの切り口で見てみよう」というユーザの意欲を
引き出します。
13

分析軸Extentionを使うべき理由③
シンプルで、自由度の高い分析
一つのグラフで全てのデータを見る事ができます。
またQlikの連想技術との相性が良く、「選択」と「分
析軸の切り替え」を繰り返す事で、どこまでもドリル
ダウンする事ができます。
14

分析軸Extentionを使うべき理由
1. クリックするだけで切り替わる
2. 一覧で、どんな分析軸があるか分かる
3. シンプルで、自由度の高い分析
シンプルなのに、
自由度の高い
分析アプリが作れます。
15

• 文字列の変数に項目名を保存
• グラフにドル記号展開を記述し、項目を切り替え
られるようにする
16

• Extensionのクリックイベントで変数を書き換え
17
labelValName
defValName

• 分析軸をJSON形式で一覧定義
※ カスタムプロパティや外部ファイルにしても良いかもしれません。
18

その３． KPIをツリーで描画したい
KPIをツリーで描画したい
19
売上
単価
数量

ExtensionでSVGを描画できます！！（D3.js）
SVG(Scalable Vector Graphics)
ベクター画像。好きな位置に四角や曲線を配置でき
ます。拡大・縮小しても画質が損なわれません。
20

ExtentionでSVGを使うと
自由に好きなデザインを作れます。
21

ExtentionでSVGを使うべき理由①
座標を指定して図形が描ける
好きな位置に、色々な図形が描画できるため、表現力が上がります。
またベクター画像であるため、拡大・縮小しても綺麗に描画されます。
エクスポートでPDF出力も可能。
22

ExtentionでSVGを使うべき理由②
メジャー（数式、書式）が使える
標準のグラフや表のようにメジャーを追加し、数式や書式を設定でき
ます。
複雑な計算処理はQlikが実行し、計算結果を書式をそろえた状態で
Extentionに戻してくれます。
例）
layout.qHyperCube.qDataPages[0].qMatrix[0][0].qText
23
51,433,046円が戻ってくる

ExtentionでSVGを使うべき理由③
シンプルで、パワフルな表現力
SVGオブジェクトとQlikのテーブルを対応させる事で、シンプルなデ
ータでパワフルな描画ができます。
24

ExtentionでSVGを使うべき理由
1. 座標を指定して図形が描ける
2. メジャー（数式、書式）が使える
3. シンプルで、パワフルな表現力
難しい事はQlikに任せて、分析結果をベクター画
像で自由自在に表現できます。
25

• SVGオブジェクトをテーブルで表現 (qvf ロード文)
load * inline [
SvgNo, SvgType , SvgX , SvgY , SvgWidth, SvgHeight, SvgText
1 , RECT , 10 , 10 , 200 , 70 ,
2 , TEXT , 30 , 30 , , , 売上
3 , PATH , 210 , 155 , 410 , 55
];
26

•テーブルデータを受け取る（Extention JavaScript）
var svgType = matrix[row][1].qText;
var svgX = matrix[row][2].qNum;
var svgY = matrix[row][3].qNum;
var svgWidth = matrix[row][4].qNum;
var svgHeight = matrix[row][5].qNum;
•SVGオブジェクトを生成（Extention JavaScript）
27

•メジャーをテーブルに埋め込む（Pick関数を使います）
load * inline [
SvgNo, SvgType , SvgX , SvgY , SvgWidth, SvgHeight, SvgMeasureID
1 , MEASURE , 10 , 10 , , ,1
];
SET KPI_SVGWriterMeasure=Pick(SvgMeasureID
//1 売上今年
,Num(
Sum({<今年前年={'今年'},同時期フラグ={1}>}
[販売ユニット数量]*[販売ユニット単価]*(1-[割引率])
)
,'#,##0円')
);
28

KPIツリー
29

Qlik TechFest A-7 qvfもソースコードも全部見せます！ユーザが作るExtension

More Related Content

What's hot (20)

More from QlikPresalesJapan (20)