HTML レポートの作成
HTML レポートには、HTML ファイルと画像ファイルが含まれています。これらのファイルは .zip ファイルとしてユーザーに配信されます。
このチュートリアルでは以下の方法を説明します:
- HTML の作成
- HTML レポートへの画像の埋め込み
- レベルの追加
- ラベルとしてのレベル変数タグの追加
最終レポートでは、3 年ごとにフレームに適切なタイトルと画像が挿入されます。HTML レポートは大部分の Qlik Sense オブジェクトに対応しています。参照先: Qlik オブジェクトの操作
テスト
サンプル ファイルを使用してレポートを作成できます。これらのファイルをダウンロードするには、次を参照してください: 「サンプル ファイル」を参照してください。
新規 HTML レポートの作成
以下を実行します。
- Qlik NPrinting メイン メニューで [レポート] を選択してから、[レポートの作成] をクリックします。
- レポートに [タイトル] を入力します。
- [タイプ] ドロップダウン リストから [HTML] を選択します。
- [アプリ] ドロップダウン リストからアプリを選択します。
-
利用可能なオプションから [テンプレート] を選択します。
- テンプレートを使用 - 空のテンプレートを使用する
-
既定テンプレート - 既定テンプレートを使用する ([レポート設定] で既定テンプレートが設定されている場合にのみ使用可能)。
- カスタム - テンプレートとして使用するファイルを選択する。
- [作成] をクリックしてレポートを作成します。
接続とオブジェクトの選択
以下を実行します。
- [テンプレートの編集] をクリックして [テンプレート エディター] を開きます。
- [画像] ノードを右クリックし、[オブジェクトの追加] を選択します。
- 画像として追加するオブジェクトを選択します。
- [OK] をクリックします。
- <body> タグと </body> タグの間の行に画像オブジェクトをドラッグ アンド ドロップします。
- [プレビュー] をクリックします。
- レポートをチェックして閉じ、必要に応じてテンプレートを再度編集します。
- [保存して閉じる] をクリックしてテンプレートを保存し、[テンプレート エディター] を閉じます。
生成されるレポート
<html>
<body Style="text-align: center;">
<h3 Style="text-align: center; font: 21px verdana;"> Top 10 countries </h3> <img src="%%CH320%%" alt="CH320"> <h3 Style="text-align: center; font: 21px verdana;"> Top 10 products </h3> <img src="%%CH184%%" alt="CH184"> </body>
</html> [レベルの選択] ウィンドウを開く
各年をサイクルするレベルで HTML レポートを作成できます。
以下を実行します。
- [レベル] ノードを右クリックし、[レベルの追加] をクリックします。
- レベル リストから Year を選択します。
- [OK] をクリックします。
- [レベル] ノードを展開します。
-
Year_Level ノード トークンを <body> タグと </body> タグの間の行にドラッグアンドドロップします。
必要に応じて行を追加します。
- レベル サイクルに含めたい要素の前に %%Year_Level%% 行を移動し、レベル サイクルに含めたい要素の後に %%Year_Level%% 行を移動します。
- Year_Level ノードを展開します。
-
Year ノード トークンを %%Year_Level%% 行と %%Year_Level%% 行の間の行にドラッグ アンド ドロップします。
- インライン スタイル要素を追加します。下のコード例をご覧ください。
結果は、%%Year_Level%%、%%/Year_Level%%、およびこれらの行の間の空白行の、3 つの新しい行です。
生成されるレポート
たとえば、次の HTML コードは対応する HTML レポートを作成します。レポートにはそれぞれの年に対応する 3 つのタイトル付きセクションが作成されます。
<html>
<body Style="text-align: center;">%%Year_Level%% <h2 Style="font: 24px verdana;font-weight: bold;">%%Year%%</h2>
<h3 Style="text-align: center; font: 21px verdana;">Top 10 countries</h3> <img src="%%CH320%%" alt="CH320"> <h3 Style="text-align: center; font: 21px verdana;">Top 10 Products</h3> <img src="%%CH184%%" alt="CH184"> %%/Year_Level%% </body>
</html>