# Engage StudioへのHTMLテンプレートのインポート
Engage Studioのビジュアルメールエディター（Beefree SDK搭載）に加えて、Treasure Dataはカスタムコードメールを扱うための強力なワークフローを提供しています。事前承認されたHTMLテンプレートをEngage Studioに直接インポートし、専用のHTMLエディター（GrapesJS搭載）を使用して編集できます。
このエディターは、デザインエージェンシーから事前承認されたカスタムHTMLテンプレートを持ち、コードの完全な制御を維持する必要があるマーケターに最適です。
## はじめに
HTMLエディターを使用して新しいテンプレートを作成するには、以下の手順に従います：
1. Email Templates > Create Newに移動します。
2. Template Nameを入力します。
3. Email Typeで「HTML Email」を選択し、「Create」を選択します。
4. HTMLエディターが開きます。エディターの上部で、Template Subject行を設定できます。
## HTMLのインポート
カスタムコードをインポートするには、Import HTML画面に移動します。
1. 左側のツールバーで、Importアイコン（下向き矢印）を選択します。
1. ポップアップウィンドウで、HTMLコードを左側のテキストボックスに貼り付けます。
2. **プレビューの生成（推奨）：** **「Generate Preview」**を選択して、エディターがコードを右側でどのようにレンダリングするかを確認します。このプレビューは、配信可能性と互換性を確保するためにコードを変更する可能性のあるサニタイズ処理の後に生成されます。
1. プレビューに満足したら、**「Import」**を選択します。
## メールの編集
HTMLエディターは、インポートしたテンプレートを確認および変更するためのツールスイートを提供します。
### HTMLエディターツール
| 機能 | 説明 |
| --- | --- |
| **Undo/Redo** | インポートの取り消しを含め、編集の完全な履歴制御が可能です。 |
| **Clear Canvas** | エディターからすべてのコンテンツを削除し、クリーンで空のHTMLドキュメントにします。 |
| **Preview Mode** | 現在のメールコンテンツのフルスクリーンプレビューを切り替えます。 |
| **Code Editor** | HTMLとCSSを並べて表示し、テンプレートのコードを直接制御できます。 |
| **Plain Text Editor** | プレーンテキストビューに切り替えます。これは最適な配信可能性のためにHTMLと一緒に自動的に保存されます。 |
| **Viewports** | ビューポートを切り替えて、異なるデバイス間でのメールのレスポンシブ性を確認します。 |
### 利用可能なブロック
HTMLをインポートした後、左側のメニューから以下のコンテンツブロックをドラッグアンドドロップしてメールをさらにカスタマイズできます：
- **Text**
- **Image**
- **Link**
- **1 Column**
- **2 Columns**
- **Unsubscribe Link / Unsubscribe Email**（コンプライアンスに必要な特別なリンク）
重要
テンプレートを保存すると、エディターの履歴がリセットされます。これは、Undo/Redo履歴がバックエンドのHTMLの新しい保存状態を反映するようにするためです。