メイン コンテンツをスキップする

HTML レポートの作成

HTML レポートには、HTML ファイルと画像ファイルが含まれています。これらのファイルは .zip ファイルとしてユーザーに配信されます。

このチュートリアルでは以下の方法を説明します:

  • HTML の作成
  • HTML レポートへの画像の埋め込み
  • レベルの追加
  • ラベルとしてのレベル変数タグの追加

最終レポートでは、3 年ごとにフレームに適切なタイトルと画像が挿入されます。HTML レポートは大部分の Qlik Sense オブジェクトに対応しています。参照先: Qlik オブジェクトの操作

テスト

サンプル ファイルを使用してレポートを作成できます。これらのファイルをダウンロードするには、次を参照してください: 「サンプル ファイル」を参照してください。

新規 HTML レポートの作成

以下を実行します。

  1. Qlik NPrinting メイン メニューで [レポート] を選択してから、[レポートの作成] をクリックします。
  2. レポートに [タイトル] を入力します。
  3. [タイプ] ドロップダウン リストから [HTML] を選択します。
  4. [アプリ] ドロップダウン リストからアプリを選択します。
  5. 利用可能なオプションから [テンプレート] を選択します。

  6. [作成] をクリックしてレポートを作成します。

接続とオブジェクトの選択

以下を実行します。

  1. [テンプレートの編集] をクリックして [テンプレート エディター] を開きます。
  2. [画像] ノードを右クリックし、[オブジェクトの追加] を選択します。
  3. 画像として追加するオブジェクトを選択します。
  4. [OK] をクリックします。
  5. <body> タグと </body> タグの間の行に画像オブジェクトをドラッグ アンド ドロップします。
  6. [プレビュー] をクリックします。
  7. レポートをチェックして閉じ、必要に応じてテンプレートを再度編集します。
  8. [保存して閉じる] をクリックしてテンプレートを保存し、[テンプレート エディター] を閉じます。

生成されるレポート

 <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 レポートを作成できます。

以下を実行します。

  1. [レベル] ノードを右クリックし、[レベルの追加] をクリックします。
  2. レベル リストから Year を選択します。
  3. [OK] をクリックします。
  4. [レベル] ノードを展開します。
  5. Year_Level ノード トークンを <body> タグと </body> タグの間の行にドラッグアンドドロップします。

    必要に応じて行を追加します。

  6. 結果は、%%Year_Level%%%%/Year_Level%%、およびこれらの行の間の空白行の、3 つの新しい行です。

  7. レベル サイクルに含めたい要素の前に %%Year_Level%% 行を移動し、レベル サイクルに含めたい要素の後に %%Year_Level%% 行を移動します。
  8. Year_Level ノードを展開します。
  9. Year ノード トークンを %%Year_Level%% 行と %%Year_Level%% 行の間の行にドラッグ アンド ドロップします。

  10. インライン スタイル要素を追加します。下のコード例をご覧ください。

生成されるレポート

たとえば、次の 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>