Contenu connexe Similaire à TECHTALK 20210427 Qlik Sense マッシュアップ開発 - チャートの埋め込みから高度な開発詳細まで (20) Plus de QlikPresalesJapan (20) TECHTALK 20210427 Qlik Sense マッシュアップ開発 - チャートの埋め込みから高度な開発詳細まで4. 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からのログアウト方法
アジェンダ
9. Qlik Senseのマッシュアップ(Mashup)機能とは?
• マッシュアップでは、Qlik Senseアプリのビジュアライゼーションや、Qlik Engineと通信する機能
をWebサイトに組み込むことが可能
• Webサイトでは、WebページがQlikのJavaScriptライブラリ群を読み込み、Qlik Senseの
APIを利用して、既存アプリのチャートの埋め込みや、項目の選択、集計データ(HyperCube)
の生成・取得などが可能
• 個々のエクステンションを開発してQlik Senseサーバーにインストールすることなく、Qlik Sense
を活用した独自のWebページを実装可能
11. • 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)をロードして棒グラフをレンダリング
単純なマッシュアップから高度な実装まで(オンプレの場合)
14. • 例えば mashup という名前で追加して、ファイル(.html,.js)をアップロード(上書きアップロードも可)
アクセス用URL例: https://[server]/[virtual proxy]/content/mashup/xxxxx.html
• 必要に応じて、認証後の「アクセス権限用のセキュリティルール」を設定
マッシュアップ用にContent Libraryを追加・設定
27. 単純なマッシュアップから高度な実装まで(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)をロードして棒グラフをレンダリング
28. • 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で利用
29. • 必要に応じて、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のテナントを設定(続き)
30. • 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にリダイレクト
47. 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
Notes de l'éditeur 4, 6 Extend: Augmenting the current Qlik Sense capabilities with additions such as custom visualizations, widgets, and other snap-in technologies.
Embed: Taking created content from Qlik Sense and placing elsewhere in other systems (i.e. SFDC) or creating mashups and custom websites leveraging existing content.
Expand: Using the API’s to create new and custom content independent of the Qlik Sense client interface.