Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to スクリプト実行可能なサーバーサイド拡張(SSE)の実装例とその応用 - Node.js編
Similar to スクリプト実行可能なサーバーサイド拡張(SSE)の実装例とその応用 - Node.js編 (20)
More from QlikPresalesJapan
More from QlikPresalesJapan (20)
スクリプト実行可能なサーバーサイド拡張(SSE)の実装例とその応用 - Node.js編
- 2. 1. おさらい Qlikエンジンのサーバーサイド拡張(SSE)について Qlik Senseのエクステンション開発について 2. Qlik Senseアプリで実現したい課題の例 考え得る実装方式/パターンと考察 3. スクリプト実行可能なSSEの実装例と、汎用エクステ ンション 実装内容の解説 アジェンダ
- 4. 4 Webブラウザで値を選択 (ロードスクリプトも可) Qlikエンジンがデータの処理 (SSEの数式処理も行う) 軸・数式などのデータを Qlikエンジンから受信し計算 1 2 3 Webブラウザに結果を表示 SSEの結果を受信 (結果のキャッシュも可能) 計算実行後の結果を返信 6 5 4 サーバーサイド拡張(Server Side Extension,SSE) gRPC over HTTP/2(TLS) C++ Java C# Python Node.js Ruby Go など Qlikエンジン (gRPCクライアント) SSEサービス (gRPCサーバー)
- 5. サーバーサイド拡張(SSE)開発の参考資料 [Qlikエンジンのサーバーサイド拡張(SSE)の基礎から実装まで] https://www.slideshare.net/QlikPresalesJapan/qlik-techfest-c5-qliksse [各種プログラミング言語によるgRPCサーバー&クライアントおよびサーバーサイド拡張(SSE)の実装例] gRPCサーバー&クライアント, QlikエンジンSSEの実装例 - Node.js • https://github.com/ttcodegear/gRPC_Nodejs_QS_SSE gRPCサーバー&クライアント, QlikエンジンSSEの実装例 - C#(.NET Core 3.1/5.0) • https://github.com/ttcodegear/gRPC_dotNETCore_QS_SSE gRPCサーバー&クライアント, QlikエンジンSSEの実装例 - Java(JDK8 or later) • https://github.com/ttcodegear/gRPC_Java_QS_SSE gRPCサーバー&クライアント, QlikエンジンSSEの実装例 - Go • https://github.com/ttcodegear/gRPC_Go_QS_SSE gRPCサーバー&クライアント, QlikエンジンSSEの実装例 - Ruby • https://github.com/ttcodegear/gRPC_Ruby_QS_SSE gRPCサーバー&クライアント, QlikエンジンSSEの実装例 - Python • https://github.com/ttcodegear/gRPC_Python_QS_SSE
- 6. gRPCのストリーミングの特徴 gRPCで送受信するデータの最大サイズはデフォルトで4MB サービス(関数)の呼び出し時に、4MBを越える巨大な引数や戻り値を処理できない(エラーが発生) 引数や戻り値を小分けに分割して、配列のように(配列ではない)少しづつ送受信できる Qlikエンジンのサーバーサイド拡張(SSE)では、ストリーミング形式でデータを送受信する • ServerSideExtension.proto
- 7. サーバーサイド拡張のデータ送受信の特徴 ストリーミング形式でデータを送受信 引数や戻り値は、数値型(64bit倍精度浮動小数点数)または文字列型で、「複数列x複数行」の表形式(BundledRows x N個) データ以外の様々な情報を、gRPCのメタデータ(ヘッダー領域)で送受信 QlikエンジンがSSEの処理結果をキャッシュとして保持するか否か、関数名や、データの型など サービス定義のprotoファイルはGitHubから取得 https://github.com/qlik-oss/server-side-extension/raw/master/proto/ServerSideExtension.proto Qlikエンジン SSEサービス call GetCapabilities() return Capabilities GetCapabilities(Qlikエンジンから一度だけ呼び出される) SSEサービスの機能(数式の関数定義や、EvaluateScriptサポートの有無)を返す ExecuteFunction SSEサービスが各関数ごとにデータを受信し、処理して結果を返す EvaluateScript(オプショナル) SSEサービスが任意の文字列とデータを受信し、処理して結果を返す ● ● ● BundledRows BundledRows BundledRows BundledRows
- 8. Qlik Sense Desktopで動作を確認 1. Qlik Sense Desktopをインストール サーバーサイド拡張(SSEサービス)の開発時は、証明書によるセキュア(TLS)なgRPCサーバーが 必須ではない「Qlik Sense Desktop」が便利 「Qlik Sense Enterprise for Windows」は証明書(後述)が必須 2. SSEサービスを起動 node SSE_Example.js 3. SSEサービスへの接続設定(例として、SSEエンジン名はColumn) C:Users[user]DocumentsQlikSenseSettings.ini を編集 4. Qlik Sense Desktopを起動 function getCapabilities(call, callback){...} が呼び出されるのをログ出力で確認
- 9. Extension(エクステンション,拡張)とは? • JavaScriptで動作するWeb部品で、Qlik Senseの標準チャート類と同様に動作 • 既存のサードパーティ製可視化ライブラリを活 用しつつ、設計・開発される • 他のシステムやプロセスに接続したり、統合す るためも利用可能(チャートに限らない) • 利用するには、Qlik Senseへのインス トールが必要 • Qlik Senseの連想エンジンと対話するた めの各種アプリケーションプログラミングイン ターフェース(API)を利用
- 10. Qlik Sense Extension開発の参考資料 [Qlik Sense Extension開発 - Extensionの概要から実際の開発詳細まで] https://www.slideshare.net/QlikPresalesJapan/qlik-sense-extension-extension [Qlik Sense Extension開発 第2弾 - プログラミング可能な汎用エクステンションのご紹介] https://www.slideshare.net/QlikPresalesJapan/qlik-sense-extension-2 [汎用エクステンションの実装例] https://github.com/ttcodegear/QS_JavaScriptButton_Extension
- 14. 実装方式/パターンと考察 1. Qlik Senseサーバーと画像ファイル配信サーバーを別々に用意 アプリと画像は異なるドメインのURLで提供? リバースプロキシを置き、２つのサーバーをまとめてアクセスさせる? ✘ 画像ファイルのURLアクセス時に、Qlik Senseサーバーと同じ認証を強制するのが難しい 2. Qlik Senseサーバー内に静的コンテンツとして画像ファイルを登録 ✘ QMCで、すべてのファイルを個々に管理しなくてはならず、かなり面倒 3. アプリの.qvfファイル内に、Base64形式で画像データを取り込んでおく ✘ 画像ファイルデータをBase64に変換してリロードして同期する必要があり、アプリも巨大化 ✘ <img src=“data:image/png;base64,xxxxx...” /> で表示するエクステンションが必要 4. サーバーサイド拡張(SSE)から画像データを返信し、エクステンションで表示する SSEを利用して、QlikエンジンのバックエンドからWebブラウザに画像データを返信可能!! 汎用的なサーバーサイド拡張の開発が必要になる 今回のポイント!!
- 16. 16 サーバーサイド拡張(SSE)から画像データを返信し、 エクステンションで表示する C++ Java C# Python Node.js Ruby Go など Qlikエンジン (gRPCクライアント) SSEサービス (gRPCサーバー) SSE.ScriptAggrStr(...)の実行 ファイル システム エクステンション (Qlik Engineクライアント) SSE.ScriptAggrStr(...)の評価 Qlik Engine APIの呼び出し SSEサービスの呼び出し 画像データ文字列 (Base64形式) 画像データ文字列 (Base64形式) 画像ファイル (.jpg,.png) .qvf GetCapabilities(Qlikエンジンから一度だけ呼び出される) SSEサービスの機能(数式の関数定義や、EvaluateScriptサポートの有無)を返す ExecuteFunction SSEサービスが各関数ごとにデータを受信し、処理して結果を返す EvaluateScript(オプショナル) SSEサービスが任意の文字列とデータを受信し、処理して結果を返す SSE.ScriptEval SSE.ScriptEvalStr SSE.ScriptAggr SSE.ScriptAggrStr SSE.ScriptEvalEx SSE.ScriptEvalExStr SSE.ScriptAggrEx SSE.ScriptAggrExStr
- 17. 汎用的なサーバーサイド拡張の例(Node.js版) SSE.ScriptEval SSE.ScriptEvalStr SSE.ScriptAggr SSE.ScriptAggrStr SSE.ScriptEvalEx SSE.ScriptEvalExStr SSE.ScriptAggrEx SSE.ScriptAggrExStr
- 19. 汎用的なサーバーサイド拡張の例(Node.js版) – 続き 起動方法(Linux,macOSまたはWindows) [ScriptEval(Ex),ScriptAggr(Ex)StrのSSE実装例 : gRPC_Nodejs_sse_eval_imageloader.zip] $>wget https://github.com/ttcodegear/gRPC_Nodejs_QS_SSE/raw/main/gRPC_Nodejs_sse_eval_imag eloader.zip $>unzip gRPC_Nodejs_sse_eval_imageloader.zip $>cd gRPC/sse_eval_imageloader $>node --version v14.18.0 $>npm install -g grpc-tools $>npm list -g +-- grpc-tools@1.11.2 $>grpc_tools_node_protoc --js_out=import_style=commonjs,binary:./ -- grpc_out=grpc_js:./ ./ServerSideExtension.proto $>npm install @grpc/proto-loader google-protobuf @grpc/grpc-js undercore $>node SSE_Example.js
Editor's Notes
- 4, 6