# 例 - 埋め込まれた HTML テンプレートを使用してメール レポートを作成する

この例では、HTML レポート テンプレートをメール メッセージに直接埋め込むことでレポートを作成して送信します。

この例で作成するメール レポート。

この例で作成するメール レポート。

この例で作成するメール レポート。 ![例の結果のメール レポート](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_html-example-result.png)

## 要件

* Qlik Cloud テナントに設定されたメール プロバイダー。参照: [レポートと通知用電子メールの構成](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Admin/mc-configure-email-support.htm)

* Private Analytics Content Creator セキュリティ ロール、または共有スペースでのレポート開発に十分なスペース ロール。参照: [権限](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Design/HTML/html-report-get-started.htm#Permissi)

## ステップ 1: サンプルソースのアップロード

アプリケーションのソースの例は、次を参照してください。[例 - アプリケーション内レポート](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/InAppGeneral/reporting-example-material.htm)。アプリケーションとデータ ファイルをスペースにアップロードしてから、アプリケーションをリロードします。例を完了する準備が整いました。

## ステップ 2: テンプレートの作成

### 新しいテンプレートの作成

次の手順を実行します。

1. アプリケーションで、ナビゲーション バーのドロップ ダウン メニューを使用し、 [レポート] を選択します。

2. [テンプレート] タブに切り替えます。

3. 右上の、 [新規作成] > [HTML テンプレート] をクリックします。

4. テンプレートの [名前] を入力します。

HTML デザイナーが開きます。

### 表形式データの追加

次に、表形式のデータをテンプレートに追加します。

次の手順を実行します。

1. オブジェクト パネルの the テーブル icon をクリックします。

2. [テーブルを追加] をクリックします。使用可能なシートのリストが表示されます。

3. Sales Tables シートを展開します。

4. Yearly Regional Sales チャートの横にある the プラス記号 icon アイコンをクリックします。

5. ドロップダウン メニューで、 [個別の列] を選択します。

6. [追加する列を選択] で、 [すべて] を選択します。[追加] をクリックします。

   チャートはテーブル構造としてテンプレートに追加されます。

7. 新しいテーブルを選択した状態で、オブジェクト パネルでテーブルの次のプロパティを変更します。

   * [テーブル設定] で、 [ソース形式を保持] をオフにします。

   * [ヘッダーの表示] を [非表示] に切り替えます。

8. テーブルで、既存の行定義の上に新しい行を追加します。`<tbody><tr>` を含む行の下に新しい行を追加します。次を貼り付けます。

   ```
   <th>Order year</th>
   <th>Region</th>
   <th>Sales</th>
   </tr>
   <tr>
   ```

### テーブルのスタイル指定

次に、HTML `head` にスタイル定義を追加し、`table` 構造自体にインライン スタイルを追加して、テーブル要素のスタイルを指定します。

次の手順を実行します。

1. テンプレートの `title` 定義の下に新しい行を追加します。

2. 次を貼り付けます。

   ```
   <style>html { font-family: sans-serif }
   table { border: 2px solid #000000 }
   tr, th, td { border: 1px solid #000000 }
   th { font-size: large }
   td { font-size: medium }</style>
   ```

3. `table` 構造内でデータを定義する行を見つけます。この出力ファイルは次のようになります:

   ```
   <td>%%OrderYear%%</td><td>%%Region%%</td><td>%%Sales%%</td>
   ```

4. 最初の `td` 要素の開始タグに `style="text-align: center"` を追加します。行全体は次のようになります。

   ```
   <td style="text-align: center">%%OrderYear%%</td><td>%%Region%%</td><td>%%Sales%%</td>
   ```

   これにより、最初の列のテキストが中央揃えになります。

### 動的なタイトルを追加する

次に、売上の年範囲の計算を保存する数式を作成します。その後、この数式をレポートのタイトルに組み込み、メールの件名として埋め込まれるようにします。

次の手順を実行します。

1. オブジェクト パネルの the 変数と数式 icon をクリックします。

2. [数式を追加] をクリックします。

3. [名前] 項目に YearRange と入力します。

4. [数式] 項目に次の数式を貼り付けます。

   ```
   = min(OrderYear)& ' - ' & max(OrderYear)
   ```

5. [作成] をクリックします。

6. デザイン領域上で title 要素を見つけます。行全体を次の内容に置き換えます。

   ```
   <title>Sales Report: </title>
   ```

7. 貼り付けた行の Sales Report: の後にカーソルを置きます

8. オブジェクト パネルで、 [数式タグを追加] をクリックします。

9. 行は次のようになります。

   ```
   <title>Sales Report: %YearRange%%</title>
   ```

### 書き出しと結びの文を追加する

次に、挨拶文と書き出しの文を追加し、最後に結びの言葉でレポートを締めくくります。

次の手順を実行します。

1. 冒頭の body タグの下に新しい行を追加します。

2. 次を貼り付けます。

   ```
       <p>Hello,</p>
       <p>The table below outlines regional sales details for the requested years.</p>
   ```

3. テーブルの終了タグを含む行の下に新しい行を追加します。

4. 次を貼り付けます。

   ```
       <p>Regards,</p>
       <p>- Management</p>
   ```

### 作業内容の保存と完了

[テンプレートを保存] をクリックして作業内容を保存します。完成したテンプレート コードは次のようになります。

```
<html><head>
  <title>Sales Report: %%YearRange%%</title>
<style>html { font-family: sans-serif }
table { border: 2px solid #000000 }
tr, th, td { border: 1px solid #000000 }
th { font-size: large }
td { font-size: medium }</style>
  </head>
  <body>
    <p>Hello,</p>
    <p>The table below outlines regional sales details for the requested years.</p>
    <table cellspacing="0" style="border-collapse: collapse">
    <tbody><tr>
      <th>Order year</th>
      <th>Region</th>
      <th>Sales</th>
      </tr>
      <tr>
      <td style="text-align: center">%%OrderYear%%</td><td>%%Region%%</td><td>%%Sales%%</td></tr>
    </tbody></table>
    <p>Regards,</p>
    <p>- Management</p>
</body></html>
```

## ステップ 3: 配布リストの追加

アプリケーションの [レポート] セクションの [受信者] または [グループ] タブで配布リスト ファイルを追加します。メールで受信者として追加され、配布リストにフィルターやグループが含まれていないことを確認してください。

配布リストの詳細については、「[レポートの配布リストの作成](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Generate/cloud-in-app-reports-distribution.htm)」を参照してください。

## ステップ 4: レポート タスクの作成

次の手順を実行します。

1. アプリケーションの [レポート] セクションの [レポート タスク] タブを開きます。

2. [レポート タスクを作成] をクリックします。レポート タスク ダイアログが開きます。

3. レポート タスクの [タイトル] を入力します。

4. 必要に応じて、 [説明] を追加します。

   [テンプレート] ダイアログ タブで、 [既存のテンプレートを追加] をクリックします。上記で作成したテンプレートを選択します。

5. [次へ] をクリックします。ダイアログが [出力] タブに移動します。

6. [出力] ダイアログ タブで、レポート出力の [ファイル名] を入力します。

7. [次へ] をクリックして [配布] ダイアログ タブに進みます。

8. レポート出力の受信者として自分自身を追加します。

9. [メール] で [HTMLレポート] を選択します。この操作により、レポートはファイルとして添付されるのではなく、メール メッセージに埋め込まれます。

10. [次へ] をクリックして [スケジュール] ダイアログ タブに進みます。

11. 既定のスケジュール設定を選択し、 [保存] をクリックします。

## ステップ 5: レポートの送信

次の手順を実行します。

1. アプリケーションの [レポート] セクションの [レポート タスク] タブを引き続き使用します。

2. 新しいレポート タスクの横にある the 他のアクション icon をクリックします。

3. [the 今すぐ送信 icon ] をクリックします。

メールが届いたら、開いて結果を確認します。

結果のメール レポート

結果のメール レポート

結果のメール レポート ![ユーザーに送信される結果のメール レポート。メール本文に埋め込まれた HTML テンプレートが表示されます。](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_html-example-result.png)