TECHTALK 20210427 Qlik Sense マッシュアップ開発 - チャートの埋め込みから高度な開発詳細まで

Qlik Sense マッシュアップ開発
- チャートの埋め込みから高度な開発詳細まで
2021/04/27
クリックテック・ジャパン株式会社
TECH TALK

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

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

1. Qlik Senseの統合機能について
 Extend, Embed, Expand
 マッシュアップについて
2. オンプレ版(Qlik Sense Enterprise for Windows)でのマッシュアップ
 サーバーの設定(WebサーバーはQlik Senseを使用)
 Qlik Senseアプリの複数チャートをHTMLに<iframe>タグで埋め込む
 Qlik Senseアプリの複数チャートをHTMLの<div>タグ内にロードする
 Qlik Senseアプリからデータ(軸・メジャー)を取得してWebページに表示(+項目選択,更新イベント)
 Qlik Senseアプリからデータを取得して外部のJavaScriptライブラリでチャート表示
3. SaaS版(Qlik Sense Enterprise SaaS)でのマッシュアップ
 サーバーの設定(WebサーバーはIISやApacheなどを使用)
 Qlik Senseアプリの複数チャートをHTMLに<iframe>タグで埋め込む
 Qlik Senseアプリの複数チャートをHTMLの<div>タグ内にロードする
 Qlik Senseアプリからデータ(軸・メジャー)を取得してWebページに表示(+項目選択,更新イベント)
 Qlik Senseアプリからデータを取得して外部のJavaScriptライブラリでチャート表示
4. Qlik Senseからのログアウト方法
アジェンダ

Qlik Senseの統合機能について

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

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

マッシュアップについて

Qlik Senseのマッシュアップ(Mashup)機能とは?
• マッシュアップでは、Qlik Senseアプリのビジュアライゼーションや、Qlik Engineと通信する機能
をWebサイトに組み込むことが可能
• Webサイトでは、WebページがQlikのJavaScriptライブラリ群を読み込み、Qlik Senseの
APIを利用して、既存アプリのチャートの埋め込みや、項目の選択、集計データ(HyperCube)
の生成・取得などが可能
• 個々のエクステンションを開発してQlik Senseサーバーにインストールすることなく、Qlik Sense
を活用した独自のWebページを実装可能

オンプレ版(Qlik Sense Enterprise for Windows)
でのマッシュアップ

• Webサーバー兼BIサーバーとしてのQlik Sense Enterprise for Windows
 静的な.htmlファイルや.jsファイルなどをサーバーにアップロードしてホスト可能(アクセスするには認証が必須)
 もちろんマッシュアップ用のWebコンテンツを外部のIISやApacheでホストしても良いですが、いつかはQlik Senseの認証が必要
 Qlik API用のJavaScriptライブラリはサーバーからロード
 ログイン(認証)してCookieを取得(セッション確立)するには、先に何かしらのリソース(URLや.html等)にアクセスする
• Qlik Senseアプリの複数チャートをHTMLに<iframe>タグで埋め込む
 チャート(またはシート)ごとにWebアプリとして動作するためのURLを持つ
• Qlik Senseアプリの複数チャートをHTMLの<div>タグ内にロードする
 アプリにチャートを配置した際に固有のID(文字列)が自動で与えられる。それをQlik APIに渡してロードしてもらう
• Qlik Senseアプリからデータ(軸・メジャー)を取得してWebページに表示
 特定フィールドの軸値を取得してリストボックスで表示し、軸値の選択処理を実行
 軸とメジャーを定義して集計データ(HyperCube)を生成し、取得してWeb画面に<table>タグで表示
 データ更新イベントをキャッチして、Web画面をリフレッシュ
• Qlik Senseアプリからデータを取得して外部のJavaScriptライブラリでチャート表示
 最近のD3.jsと、D3.jsを簡潔にラップするライブラリ(dimple.js)をロードして棒グラフをレンダリング
単純なマッシュアップから高度な実装まで(オンプレの場合)

• 必要に応じてQMCでVirtual Proxy(Webアクセス用URLパス)を作成・設定
 例えば windows という名前のVirtual Proxyを追加(デフォルトのNTLM/フォーム認証)
 注: デフォルトのNTLM/フォーム認証でも、最終的にはTicket API(チケットパラメータ)を使用した認証です
マッシュアップ用にVirtual Proxyを設定

• 必要に応じて、Webブラウザがリソースをロードする際のセキュリティ設定を追加
 <iframe>の読み込みとCookie送信のために、Cookie属性に”SameSite=None”を追加
 CORS(Cross-Origin Resource Sharing)用にレスポンスヘッダ ”Access-Control-Allow-Origin: *” を追加
マッシュアップ用にVirtual Proxyを設定(続き)

• 例えば mashup という名前で追加して、ファイル(.html,.js)をアップロード(上書きアップロードも可)
 アクセス用URL例: https://[server]/[virtual proxy]/content/mashup/xxxxx.html
• 必要に応じて、認証後の「アクセス権限用のセキュリティルール」を設定
マッシュアップ用にContent Libraryを追加・設定

• あるアプリのあるチャートを表示するURLや、あるチャートのIDの確認するには?
複数チャートをHTMLに<iframe>タグで埋め込む
https://[server]/[virtual proxy]/single/?appid=[app id]&obj=[char id]
&lang=ja-JP&opt=ctxmenu&theme=[theme id]

複数チャートをHTMLに<iframe>タグで埋め込む(続き)
アプリのIDは、サーバーにアップロードした時点で与えられる
チャートのIDは、作成された時点で決まり、以降、変化しない
https://[qsserver]/[virtual proxy]/content/mashup/mashup_iframe_object.html

Qlik APIの基礎となるRequire.JSと
Qlik用CSSは、サーバーからロード
複数チャートをHTMLの<div>タグ内にロードする
Require.JSでQlik APIをロード
<div>タグのIDと、チャートのIDを指定して
Qlik APIがチャートを埋め込んでくれる
アプリにアクセス

複数チャートをHTMLの<div>タグ内にロードする(続き)

フィールド値/集計データを取得(受信)する単純な方法
createListメソッドでフィールドの軸値一覧を生成し、
コールバック関数で最大10000セル(1ページ)を自動受信する
qInitialDataFetchパラメータで指定
qWidth >= 軸の数(N=1) + メジャーの数(M=0)
qHeight = 取得したい最大行数
※セル数は最大で qWidth x qHeight <= 10000

フィールド値/集計データを取得(受信)する単純な方法(続き)
createCubeメソッドで軸とメジャーからなる集計データを生成し、
コールバック関数で最大10000セル(1ページ)を自動受信する
qInitialDataFetchパラメータで指定
qWidth >= 軸の数(N=1) + メジャーの数(M=1)
qHeight = 取得したい最大行数
※セル数は最大で qWidth x qHeight <= 10000

フィールドの軸値すべてを取得してWebページに表示
createListメソッドでフィールドの軸値一覧を生成し、
戻り値のPromiseで得られるパラメータ(model)から
各種APIを呼び出し、全データを受信して保持する
Promiseで得られるパラメータ(model)を使って、
選択変更などによりデータが更新されるイベントを捕捉。
model.Validate.bindでデータの再受信と画面更新
Qlik API と Qlik内蔵のjQueryをロード
qInitialDataFetchの自動受信を使用しない

フィールドの軸値すべてを取得してWebページに表示(続き)
軸値の選択(qElemNumberを使用)
軸値のIDを利用
軸値の選択状態(S)を参照

データ(軸・メジャー)をすべて取得して<table>で表示
createCubeメソッドに軸(複数可)と数式(複数可)を渡して、
「軸,..,集計値,...」 x N行で構成される表形式の集計データ
(HyperCube)の生成をリクエスト
軸(ディメンション)として「営業員名」を指定
数式(メジャー)として「Sum([販売価格])」を指定
数値書式(通貨=M)やソート順なども指定
createCubeメソッドの戻り値のPromiseを利用し、
そこで得られるパラメータ(model)から各種APIを呼び出し、
HyperCubeの全データを受信して保持する

データ(軸・メジャー)をすべて取得して<table>で表示(続き)
Promiseで得られるパラメータ(model)を使って、
選択変更などによりデータが更新されるイベントを捕捉
model.Validate.bindでデータの再受信と画面更新

データをすべて取得して外部のJavaScriptライブラリでチャート表示
HyperCubeの受信データを
dimple.js用のデータに変換
Require.jsを使用して、
D3.js と dimple.js をロード。
Qlik Sense内蔵のD3.jsは使用しない
dimple.jsを使用して、
D3.jsで棒チャートをレンダレング

SaaS版(Qlik Sense Enterprise SaaS)
でのマッシュアップ

単純なマッシュアップから高度な実装まで(SaaSの場合)
• Webサーバー兼BIサーバーとしてのQlik Sense Enterprise SaaS テナント
 静的な.htmlファイルや.jsファイルなどはテナントにアップロード出来ません!!!!
 マッシュアップ用のHTML/JavaScript/CSSなどのコンテンツやWebサイトは、外部のIISやApacheでホスト
 Qlik API用のJavaScriptライブラリはテナントからロード
 IdPで認証してテナントにログインし、Cookieを取得(セッション確立)するには専用のテナントログイン用URLを利用
• Qlik Senseアプリの複数チャートをHTMLに<iframe>タグで埋め込む
 チャート(またはシート)ごとにWebアプリとして動作するためのURLを持つ
• Qlik Senseアプリの複数チャートをHTMLの<div>タグ内にロードする
 アプリにチャートを配置した際に固有のID(文字列)が自動で与えられる。それをQlik APIに渡してロードしてもらう
• Qlik Senseアプリからデータ(軸・メジャー)を取得してWebページに表示
 特定フィールドの軸値を取得してリストボックスで表示し、軸値の選択処理を実行
 軸とメジャーを定義して集計データ(HyperCube)を生成し、取得してWeb画面に<table>タグで表示
 データ更新イベントをキャッチして、Web画面をリフレッシュ
• Qlik Senseアプリからデータを取得して外部のJavaScriptライブラリでチャート表示
 最近のD3.jsと、D3.jsを簡潔にラップするライブラリ(dimple.js)をロードして棒グラフをレンダリング

• Management Consoleで「ウェブ統合」を作成して、IDを生成
 マッシュアップのHTMLコンテンツにアクセスする際のWebサーバーのOriginを登録(例: https://webserver)
 https://developer.mozilla.org/ja/docs/Glossary/Origin
 CORS対策で、Webブラウザで参照しているアドレスからのみテナントのQlik APIにアクセスできる
 レスポンスヘッダ “access-control-allow-origin: https://webserver”
マッシュアップ用にSaaSのテナントを設定
このID文字列をJavaScriptで利用

• 必要に応じて、Management Consoleで「Content Security Policy」を追加
 マッシュアップのHTMLコンテンツにアクセスする際のWebサーバーのOriginを登録(例: webserver)
 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy
 Webブラウザが<iframe>タグでチャートなどをロードする場合には、frame-ancestors の設定が必要
 レスポンスヘッダ “content-security-policy: ...; frame-ancestors ... webserver ...; ...”
マッシュアップ用にSaaSのテナントを設定(続き)

• IISやApacheなどにHTML/JavaScript/CSSやWebサイトをホストさせる
 アクセス用URLの例: https://[webserver]/xxxx.html
 もちろん、動的なWebコンテンツを返すWebアプリでも良いです
マッシュアップ用HTMLコンテンツをWebサーバーでホスト
• テナントにログイン(認証)するURL(エンドポイント)やフローが存在します
 Qlik APIを利用したり、<iframe>にチャートを埋め込むには、先に認証を済ませておく必要がある
https://help.qlik.com/en-US/sense-developer/February2021/Subsystems/Mashups/Content/Sense_Mashups/Howtos/external-mashups-integrate-cloud.htm
認証フロー
1. マッシュアップやWebアプリのサイト(IISやApache等)にアクセス
 https://[tenant]/api/v1/users/me にGETリクエストしてログイン状態をチェック
2. テナントにログイン(認証)済みで無ければ、ログイン用URLに遷移
 https://[tenant]/login?returnto=https://xxx&qlik-web-integration-id=[id]
 returnto は、IdPによる認証後に最終的に戻ってくるURL
 qlik-web-integration-id はウェブ統合で作成したID
3. テナントは、WebブラウザをIdPにリダイレクト
4. IdPによる認証が成功後、IdPはCookieを発行し、テナントにリダイレクト
5. テナントは、Webブラウザを returnto で指定したURLにリダイレクト

テナントにログイン(認証)するURL(エンドポイント)やフロー
https://[tenant]/api/v1/users/me
にGETリクエストしてレスポンスを確認(Fetchまたは各種Ajaxなど)
HTTPステータスが、401なら未認証、200なら認証済み
Web統合で作成したID
• https://[tenant]/api/v1/users/me
• https://[tenant]/login
のエンドポイントにアクセスする際に必要
IdPで未認証なら、テナントのログイン用URLに遷移
https://[tenant]/login?returnto=[url]&qlik-web-
integration-id=Jrh....cVG
IdP認証後に最終的に戻ってくるURLは現在のWebページをセット
テナントにログイン済みの場合は、マッシュアップ用の処理を開始

• あるアプリのあるチャートを表示するURLや、あるチャートのIDの確認するには?
複数チャートをHTMLに<iframe>タグで埋め込む
https://[tenant]/single/?appid=[app id]&obj=[char id]
&lang=ja-JP&opt=ctxmenu&theme=[theme id]

複数チャートをHTMLに<iframe>タグで埋め込む(続き)
アプリのIDは、サーバーにアップロードした時点で与えられる
チャートのIDは、作成された時点で決まり、以降、変化しない
https://[webserver]/mashup_iframe_object.html

複数チャートをHTMLの<div>タグ内にロードする
Qlik APIの基礎となるRequire.JSとQlik用CSSは、サーバーからロード
Require.JSでQlik APIをロード
webIntegrationId が必要
<div>タグのIDと、チャートのIDを指定して
Qlik APIがチャートを埋め込んでくれる
アプリにアクセス

データをすべて取得して外部のJavaScriptライブラリでチャート表示
HyperCubeの受信データを
dimple.js用のデータに変換
Require.jsを使用して、
D3.js と dimple.js をロード。
Qlik Sense内蔵のD3.jsは使用しな
い
dimple.jsを使用して、
D3.jsで棒チャートをレンダレング

Qlik Senseからのログアウト方法

• ログインした(Cookieがある)状態で、
1. http[s]://[qsserver]/[virtual proxy]/qps/user に DELETE メソッドを発行
2. http[s]://[qsserver]/[virtual proxy]/qps/logout?targetUri=[targetUri] に遷移
オンプレ版(QSE for Windows)でのログアウト

• ログインした(Cookieがある)状態で、
1. https://[tenant]/logout に遷移
SaaS版(QSE SaaS)でのログアウト

Qlik Senseのマッシュアップに関するWebサイト
• オンラインヘルプ > Qlik Sense for developers > Using Sense APIs > Mashups (英語)
 https://help.qlik.com/en-US/sense-
developer/February2021/Subsystems/Mashups/Content/Sense_Mashups/mashups-
start.htm
• オンプレ版のマッシュアップのサンプル(GitHub)
 https://github.com/ttcodegear/mashup_for_qseow
• SaaS版のマッシュアップのサンプル(GitHub)
 https://github.com/ttcodegear/mashup_for_qse_saas
• HyperCubeのデータを処理するエクステンションのサンプル(GitHub)
 https://github.com/ttcodegear/qs_extension

TECHTALK 20210427 Qlik Sense マッシュアップ開発 - チャートの埋め込みから高度な開発詳細まで

TECHTALK 20210427 Qlik Sense マッシュアップ開発 - チャートの埋め込みから高度な開発詳細まで

More Related Content

What's hot

Similar to TECHTALK 20210427 Qlik Sense マッシュアップ開発 - チャートの埋め込みから高度な開発詳細まで

More from QlikPresalesJapan

TECHTALK 20210427 Qlik Sense マッシュアップ開発 - チャートの埋め込みから高度な開発詳細まで

Editor's Notes