--- title: "ウォークスルー:カスタムメッセージテンプレートの作成" slug: "walkthrough--building-a-custom-message-template" abstract: "メールキャンペーン用のカスタムメッセージテンプレートを作成するためにEXMを使う方法。" --- # ウォークスルー:カスタムメッセージテンプレートの作成 コンテンツエディターでは、Email Experience Manager(EXM)でメールキャンペーン用のカスタムメッセージテンプレートを作成できます。これらのメッセージテンプレートはSitecoreの通常のアイテムテンプレートとは異なります。カスタムメッセージテンプレートを作成するには、ブランチテンプレート、メッセージテンプレート、レイアウト、ビューを作成し、それらを結合してEXMで利用可能にします。 > !注このウォークスルーではHTMLの例を示します。メッセージテンプレート作成を始める前に、最終的なカスタムテンプレートのレイアウトに使うHTMLコードを必ず用意してください。カスタムテンプレートに何を含めるかの参考には、標準的なEXMメールメッセージテンプレートを参照してください。 このウォークスルーでは、以下の方法を説明します: - [分岐テンプレートを作成する](https://doc.sitecore.com/xp/ja/developers/exm/103/email-experience-manager/walkthrough--building-a-custom-message-template.html#UUID-75ebb9de-4d88-6821-0d86-94647136e249_N1529485804937 "Create a branch template") - [メッセージテンプレートを作成する](https://doc.sitecore.com/xp/ja/developers/exm/103/email-experience-manager/walkthrough--building-a-custom-message-template.html#UUID-75ebb9de-4d88-6821-0d86-94647136e249_N1529485820703 "Create a message data template") - [レイアウトとビューを作成する](https://doc.sitecore.com/xp/ja/developers/exm/103/email-experience-manager/walkthrough--building-a-custom-message-template.html#UUID-75ebb9de-4d88-6821-0d86-94647136e249_N1529485834960 "Create the layout and view") - [レイアウトとメッセージテンプレートをバインドします](https://doc.sitecore.com/xp/ja/developers/exm/103/email-experience-manager/walkthrough--building-a-custom-message-template.html#UUID-75ebb9de-4d88-6821-0d86-94647136e249_N1529485846452 "Bind the layout and the message template") - [テンプレートをEXMで利用可能にしてください](https://doc.sitecore.com/xp/ja/developers/exm/103/email-experience-manager/walkthrough--building-a-custom-message-template.html#UUID-75ebb9de-4d88-6821-0d86-94647136e249_N1529485860273 "Make your template available in EXM") - [条件フィルターにカスタムテンプレートを含める](https://doc.sitecore.com/xp/ja/developers/exm/103/email-experience-manager/walkthrough--building-a-custom-message-template.html#UUID-75ebb9de-4d88-6821-0d86-94647136e249_N1529485860273 "Make your template available in EXM") ## 分岐テンプレートを作成する カスタムメッセージテンプレートを作成するには、ブランチテンプレートが必要です。既存のEXMメッセージテンプレートを基にこれらのいずれかを基にできます。カスタムメッセージテンプレートは、ブランチテンプレートの定義アイテムと*$name*アイテムからなる*Branch data*テンプレートに基づいています。 既存のEXMメッセージテンプレートから分岐テンプレートを作成するには: 1. コンテンツエディターを開き、*/sitecore/templates/Branches/System/Email/Messages*に移動します。 **オプション** ウィンドウで **「新しい分岐**」をクリックします。 ![Folder tab showing the New Branch button to create a new branch.]() 2. メールキャンペーンがABテスト可能であることを確かめるには、「 **新しい支店を作成** 」ダイアログボックスが開き、*System/Email/Messages*に移動して「 **ABテスト可能なメッセージ**」をクリックし、「 **作成**」をクリックしてください。 ![The Create a new branch dialog box showing where to select the AB Testable Message.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/exm/103/email-experience-manager/images/ab_testable_branch.png) 3. **ブランチの名前を変更してください。変更するには、右クリックして「Rename***」を選択するか、F2を押してください。以下の例では、その名前を「Simple Email」と呼んでいます。* 4. あなたの支店の **コンテンツ** タブで、**外観** タブに移動し、180x249ピクセルのサイズの新しいサムネイルをアップロードしてください。サムネイルは、ユーザーがEXMで新しいメールキャンペーンを作成する際にメッセージテンプレートとして使われます。また、**コンテンツ** タブでは **ヘルプ** セクションにスクロールし、**Long Description**を追加してください。長い説明とは、ユーザーがテンプレートを使って新しいメッセージを作成する際にサムネイルの下に表示されるテキストです。 > !注コンテンツタブでサムネイルと説明のオプションが見当たらない場合は、上部ナビゲーションバーの「ビュー」タブで「標準フィールド」チェックボックスを選択してください。 5. メッセージテンプレートをコンテンツレイアウトにバインドするには、$name項目の下にメッセージルートを挿入する必要があります。 $name項目を右クリックし、「 **Insert**, **Insert from template**」をクリックします。 6. テンプレート**から挿入**ダイアログボックスで、*/Templates/System/Email/Messages/ Inner Content/Message Root*に移動し、**アイテム名**フィールドで名前を入力してください。例えば*Message root*、**をクリック。** 7. メッセージのルートと $name アイテムをつなげるには、$nameアイテムをクリックし、**メッセージ** セクションの**Body**欄でドロップダウン矢印をクリックしてメッセージルートへ移動してください。 新しい分岐テンプレートは次のようになります: ![Content Editor Templates node showing your branch template, including a $name, message root, and content file.]() ## メッセージデータテンプレートを作成する 新しいテンプレートを作成して、デフォルトメッセージ内容として使いたい標準値を指定します。例えばヘッダーやフッターのテキストなどです。 メッセージデータテンプレートを作成するには: 1. コンテンツエディターで*sitecore/Templates/System/Email/Messages/Inner Content*に移動します。 2. **フォルダタブ**の**オプション**の「**新しいテンプレート**」をクリックします。開く「**名前選択**」ウィンドウでテンプレートに名前を付け、「**次へ**」をクリックします。 ![The Select name dialog box where you can enter a name for your template.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/exm/103/email-experience-manager/images/Select_name.png) 3. 新しいテンプレートの場合、**Builder**タブの「 **新しいセクションを追加** 」フィールドで、ヘッダーテキストやフッターテキストなどの関連データテンプレートフィールドを追加してください。 ![The builder tab showing where to add the relevant template fields.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/exm/103/email-experience-manager/images/Builder.png) 4. 変更を保存してください。 5. ツリーナビゲーションで、カスタムテンプレートの **メッセージルート** に移動し、子*Content*項目を作成します。これにより、メールメッセージにコンテンツを追加できるようになります。 ## レイアウトとビューを作成する レイアウトについては、Sitecore ASP.NET MVCフレームワークを使用しています。詳細については、[MVCおよびレンダリング](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-manager/en/mvc-and-renderings.html)を参照してください。 MVCを使ってメッセージテンプレートのレイアウトを作成するには: 1. パソコンで \\sitecore modules\\Web\\EXM\\layoutsに移動し、以下の内容を含む .cshtmlファイルを作成します。 @using Sitecore.Mvc  @using Sitecore.Mvc.Presentation        @Html.Sitecore().Placeholder("msg-html-title")      @Html.Sitecore().Placeholder("msg-html-body")    2. Sitecoreのコンテンツエディターで*/sitecore/Layout/Layouts/System/Email/*に移動します。**フォルダ**タブの**オプション**、**レイアウト**の下で、レイアウトの新しい名前を入力します。例えば*Simple Email Layout*、OK**をクリックします。** ![The Folder tab showing where to enter a name for your layout.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/exm/103/email-experience-manager/images/insert_simple_email_layout.png) 3. コンテンツツリーで新しいレイアウトを選択し、**コンテンツ** タブの **データ** セクションで **パスフィールドをクリックし** 、レイアウトファイルが保存されている場所に移動します。例えば /sitecore modules/Web/EXM/Layouts/SimpleEmailLayout.cshtml。 4. パソコンで \\Viewsに移動し、次の内容の別の .cshtmlファイルを作成します。 @using Sitecore.Mvc.Presentation @using Sitecore.Mvc @model RenderingModel

@Html.Sitecore().Field("Header", Model.Item)

@Html.Sitecore().Field("Body", Model.Item) 5. コンテンツエディターのSitecoreで */sitecore/layout/Renderings/System/Email*に移動します。 **フォルダ** タブの **オプション**の下、「 **レンダリング表示」** をクリックしてテンプレートの新しい表示を作成してください。 **パス** を *~/Views/.cshtml*に設定してください。 ## レイアウトとメッセージテンプレートをバインドします レイアウトとビューをメッセージテンプレートにバインドするには: 1. 例えば、作成したブランチテンプレートのメッセージルートに移動してください。 */sitecore/Templates/Branches/System/Email/Messages//Name/Message root*。 2. **プレゼンテーション**タブの**レイアウト**グループで**「詳細**」をクリックします。 3. レイアウト**詳細**ダイアログの**デフォルトデバイスで****編集をクリックします。** ![The Layout Details dialog box showing where to edit the settings for Default device.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/exm/103/email-experience-manager/images/LayoutDetails.png) 4. **デバイスエディター**のダイアログボックスの**レイアウト**タブで、ドロップダウンメニューをクリックして作成したレイアウトに移動します。この例では、*Simple Email Layout*を作成しました。 ![The Device Editor showing where to select the layout you created in the drop-down menu on the Layout tab.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/exm/103/email-experience-manager/images/SimpleLayout_Device_Editor.png) 5. **コントロールズ**の「**追加**」をクリックし、「**レンダリング**」「**システム**」「**メール**」へ移動します。カスタムテンプレートのメニューを展開します。MVCコードのスニペットからプレースホルダーにコンテンツをマッピングする必要があります。最低限、以下のコントロールを追加・マッピングしてください: - **ページタイトルを設定し** てください - **「プレイスホルダーに追加」の「プレイスホルダーに追加**」で、これを msg-html-titleにマッピングします。 - **コンテンツ** - **「プレイスホルダーに追加**」で、これを msg-html-bodyにマッピングします。 **データソース**の下に、カスタムテンプレートのメッセージルートのパスを書きます: */sitecore/Templates/Branches/System/Email/Messages//Name/Message root/*。 ![The Device Editor dialog box showing how to map the controls to your MVC code.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/exm/103/email-experience-manager/images/device_editor__map_controls.png) 6. キャッシュ**セクションの****「コントロールプロパティ**」で、以下のチェックボックスを選択してください: - **キャッシュ可能** - **データによって変わる** - **パラメータによって変化する** - **クエリ文字列によって変化** 7. **OK**をクリックします。 ## テンプレートをEXMで利用可能にしてください テンプレートをEXMで利用可能にするには: 1. コンテンツエディターで *sitecore/Content/Email/Message Types*に移動します。 2. 新しいメッセージテンプレートを追加したいメッセージタイプを展開し、「 **デフォルト** アイテム」をクリックします。 3. **「構成**」タブの「**オプション挿入**」グループで「**割り当て**」をクリックします。 4. オプション **を挿入** するダイアログボックスで、メッセージテンプレートに移動し、例えば */templates/Branches/System/Email/Messages/Simple Email*、カスタムテンプレートを見つけて **「選択済み** 」ペインに追加します。 5. **OK**をクリックして変更を保存してください。 EXMでは、ユーザーは新しいメッセージを作成する際にテンプレートリストからメッセージテンプレートを選択できます。ブランチテンプレートを作成する際にサムネイルをアップロードし、長い説明を追加した場合、それらはテンプレートとともに表示されます。以下の例では、*Simple Email*テンプレートを作成しました。 ![A visual example of the templates, including your new custom template.]()