---
title: "バリアントを含むレンダリングを作成します"
slug: "build-a-rendering-that-includes-variants"
abstract: "バリアントを含む新しいレンダリングに必要なクラスについて学びましょう。"
---
# バリアントを含むレンダリングを作成します

バリアントを含む新しいレンダリングを作成するには、カスタムレンダリングを作成しますが、コントローラーやリポジトリには異なるベースクラスを使用します。

サイトのPresentationフォルダでは、エクスペリエンスエディターのツールボックスでどのレンダリングが見えるかを設定できます。新しいカスタムレンダリングとそのレンダリングバリアントを使うには、Available RenderingsとRenderingVariantsフォルダの両方で、まったく同じ名前でアイテムを作成する必要があります。

このトピックでは、コントローラ、リポジトリ、モデル、ビュークラスのバリアントを含むレンダリングのコード変更について説明します。

## コントローラー

SXAの基本構造で新しいレンダリングを作成した後、コントローラーを作成しなければなりません。バリアントを含むレンダリングの場合、StandardControllerクラスから継承するのではなく、コントローラーがVariantsControllerから継承しなければなりません。

例えば、PageTitleというカスタムレンダリングの場合、コントローラーは次のようになるかもしれません:

using PageTitle.Repositories;
using Sitecore.XA.Foundation.RenderingVariants.Controllers;
namespace PageTitle.Controllers
{
 public class PageTitleController : VariantsController
 {
 protected readonly IPageTitleRepository PageTitleRepository;
 public PageTitleController(IPageTitleRepository pageTitleRepository)
 {
 PageTitleRepository = pageTitleRepository;
 }
 protected override object GetModel()
 {
 return PageTitleRepository.GetModel();
 }
 }
## リポジトリ

VariantsControllerはVariantsRepository:

using PageTitle.Models;
using Sitecore.XA.Foundation.Mvc.Repositories.Base;
using Sitecore.XA.Foundation.RenderingVariants.Repositories;
namespace PageTitle.Repositories
{
 public class PageTitleRepository: VariantsRepository, IPageTitleRepository
 {
 public override IRenderingModelBase GetModel()
 {
 PageTitleModel model = new PageTitleModel();
 FillBaseProperties(model);
 model.CustomProperty = "This is just an example rendering";
 return model;
 }
 }
## モデル

新しいレンダリングのモデルクラスは VariantsRenderingModel:

using Sitecore.XA.Foundation.Variants.Abstractions.Models;
namespace PageTitle.Models
{
 public class PageTitleModel: VariantsRenderingModel
 {
 public string CustomProperty { get; set; }
 }
## 眺め

ビューレンダリング用のcshtmlファイルでHTMLマークアップを生成するには、モデルのアイテムプロパティを繰り返し確認してください。

例えば:

@using Sitecore.Extensions
@using Sitecore.XA.Foundation.MarkupDecorator.Extensions
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Fields
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields
@model PageTitle.Models.PageTitleModel
<div @Html.Sxa().Component("page-title", Model.Attributes)>
 <div class="component-content">
 <h1>@Model.CustomProperty</h1>
 @foreach (BaseVariantField variantField in Model.VariantFields)
 {
 @Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.RenderingWebEditingParams)
 }
 </div>
</div>