Engage Studioのビジュアルメールエディター（Beefree SDK搭載）に加えて、Treasure Dataはカスタムコードメールを扱うための強力なワークフローを提供しています。事前承認されたHTMLテンプレートをEngage Studioに直接インポートし、専用のHTMLエディター（GrapesJS搭載）を使用して編集できます。
このエディターは、デザインエージェンシーから事前承認されたカスタムHTMLテンプレートを持ち、コードの完全な制御を維持する必要があるマーケターに最適です。
HTMLエディターを使用して新しいテンプレートを作成するには、以下の手順に従います：
Email Templates > Create Newに移動します。
Template Nameを入力します。
Email Typeで「HTML Email」を選択し、「Create」を選択します。
HTMLエディターが開きます。エディターの上部で、Template Subject行を設定できます。
カスタムコードをインポートするには、Import HTML画面に移動します。
- 左側のツールバーで、Importアイコン（下向き矢印）を選択します。
ポップアップウィンドウで、HTMLコードを左側のテキストボックスに貼り付けます。
プレビューの生成（推奨）： **「Generate Preview」**を選択して、エディターがコードを右側でどのようにレンダリングするかを確認します。このプレビューは、配信可能性と互換性を確保するためにコードを変更する可能性のあるサニタイズ処理の後に生成されます。
- プレビューに満足したら、**「Import」**を選択します。
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の新しい保存状態を反映するようにするためです。
セキュリティとメール配信性を確保するため、HTMLエディターはプレビュー生成またはテンプレート保存時にコードを自動的にサニタイズします。
自動的に削除される要素：
| 要素 | 例 |
|---|---|
<script> タグおよびJavaScript | <script>alert('x')</script> |
<iframe> タグ | <iframe src="..."> |
<style> タグ | 各要素にインラインスタイルとして変換され、<style> ブロック自体は削除されます |
| イベントハンドラー属性 | onclick、onmouseover など |
javascript: プロトコルリンク | <a href="javascript:..."> |
| HTMLコメント | <!-- comment --> |
| 非標準 / カスタムタグ | <custom>、<mycomponent> |
サポートされるリンクプロトコル： https:、http:、mailto: がサポートされています。javascript: を含むその他のプロトコルは削除されます。
実際にメールを送信する前に、テスト送信でコンテンツの表示をご確認されることをお勧めします。