---
title: "ウォークスルー:シンプルなレンダリングの構築"
slug: "walkthrough--building-a-simple-rendering"
abstract: ""
---
# ウォークスルー:シンプルなレンダリングの構築
SXAツールボックスには、シンプルなテキスト、画像、動画、ソーシャルメディアプラグインなどのデフォルトレンダリングが含まれています。新しいレンダリングを作成することも可能です。
> !注カスタムコンポーネントを作成するかどうか判断するために [フローチャート](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/flowchart-to-determine-whether-to-create-a-custom-rendering.html "Flowchart to determine whether to create a custom rendering") を確認してください。
## レンダリングを作成する
SXAレンダリングはSitecoreコントローラーレンダリングであり、SXAはすべてのレンダリングで同じ基本構造を使用しています。ラッパーはすべてのレンダリングで同じで、常に以下が含まれます:
- component要素
- Html.Sxa().Component()ヘルパー
- 内容: div class="component-content"
> !注SXAでCreative Exchange機能を使用するには、Html.Sxa().Component()を使う必要があります。このヘルパーはCreative Exchangeのエクスポートに必要なデータ属性を注入します。
レンダリングを作成するには:
- レンダリング定義項目で、Sitecoreがそのコンポーネントをレンダリングするためにどのような操作を取るかを指定します。例えば、タイトルのレンダリングについて:
## コントローラーとアクションメソッドを作成する
すべてのSXAレンダリングにはコントローラーが必要です。SXAはベースSXAコントローラーから継承することを可能にします。ビュー名を自動的に解決し、モデル(Rendering、PageContext)を提供する便利なプロパティやロジックを提供します。新しいレンダリングを作成したり既存のレンダリングを拡張したりする際には、これらのベースクラスを使うのがベストプラクティスです。
コントローラーとアクションメソッドを作成するには:
1. Visual StudioのASP.NET MVCウェブアプリケーションプロジェクトでは、新しいコントローラーを作成します。SXAではコントローラーは比較的シンプルに保たれ、ほとんどのロジックはリポジトリ内で実装されています。コントローラーにリポジトリを使わせるには、コンストラクションインジェクションでコントローラーレンダリングを作成する必要があります。
2. StandardControllerベースクラスを使って、レンダリングアイテム名に基づいて自動的にビュー名を解決する標準のIndex() アクションメソッドを実装してください。例えば:
public class SimpleComponentController: StandardController
{
private readonly ISimpleComponentRepository \_repository;
public SimpleComponentController(ISimpleComponentRepository repository)
{
\_repository = repository;
}
protected override object GetModel()
{
return \_repository.GetModel();
}
}
## コントローラにリポジトリを注入する
SXAはリポジトリを使ってMVCビューのモデルを提供します。したがって、コントローラーを完成させたら、リポジトリをコントローラーに注入しなければなりません。リポジトリの注入方法は2通りあります:
- Construction injection - この注射の使用を推奨します。例えば:
public class SimpleComponentController : StandardController
{
private readonly ISimpleComponentRepository \_repository;
public SimpleComponentController(ISimpleComponentRepository repository)
{
\_repository = repository;
}
...
}
- ServiceLocation injection - この注入はプロセッサやコマンド、時にはコントローラで使用されます。例えば:
public class SimpleComponentController
{
private readonly ISimpleComponentRepository \_repository;
public SimpleComponentController()
{
\_repository = ServiceLocator.ServiceProvider.GetServiceISimpleComponentRepository()
}
...
}
SXAベースリポジトリを提供します。例えば、VariantsRepositoryとListRepositoryは有用なプロパティを提供し、自分のリポジトリの実装を大幅に容易にします。もう一つの例は、ModelRepositoryベースクラスで、以下のような有用なプロパティを提供します:
- PageContext - 特定のデバイスに対する個別のリクエストに対応するために必要な情報を表し、構築中のHTTP応答に関する情報を含む。 PageContext は、要求されたアイテム、デバイス、およびそのリクエストのために作成された PageDefinition オブジェクトを公開するプロパティを含む。
- IsEdit - 編集モードがオンかどうかを確認します。
- IsControlEditable - レンダリングが編集可能であるかどうかを指定します。
- Attributes – レンダリングに適用される属性の辞書。
リポジトリが空でベースインターフェースメソッドのみを使用している場合でも、すべてのリポジトリは独自のインターフェースを持つ必要があります。これは、後に依存性注入コンテナを登録する際に使われるためです。
public interface ISimpleComponentRepository: IModelRepository
{
}
そして、こちらがシンプルなリポジトリの例です:
public class SimpleComponentRepository : ModelRepository, ISimpleComponentRepository
{
public override IRenderingModelBase GetModel()
{
SimpleComponentModel model = new SimpleComponentModel();
FillBaseProperties(model);
model.Title = GetTitle();
return model;
}
private string GetTitle()
{
return PageContext.CurrentTemplates.\_Title.Fields.Title;
}
}
リポジトリをDIコンテナに登録することを忘れないでください。設定ファイルを使ってそれが可能です:
そして、その景色はこんな感じになるかもしれません。
@model Sitecore.SXA.Startup.Feature.SimpleComponent.Models.SimpleComponentModel
div @Html.Sxa().Component("simple-component", Model.Attributes)
div class="component-content"
h1>You are on @Model.Title page/h1
/div
/div
> !注ほとんどのSXAレンダリングは再利用性を重視し、データソースの項目からデータを引き出します。つまり、表示されるコンテンツは表示されるページに縛られず、データソースの項目に保存されます。レンダリングにデータソースのロジックを追加するには、以下を使うことができます:
>
> if (DataSourceItem == null) { ... }
## Sitecoreでコントローラーレンダリングを作成する
ツールボックスからユーザーがアクセスできるレンダリングを作成するには、Sitecoreでアイテムを作成し、コントローラー名とアクション名を使ってコードとリンクする必要があります。
Sitecoreでコントローラーレンダリングを作成するには:
1. コンテンツエディターで*sitecore/Layout/Renderings/Feature/Experience Accelerator*に移動し、レンダリングを追加したいセクションを右クリックします。
> !注*Layouts/Renderings/Feature/Experience Accelerator*のセクション名は、ツールボックス内で実際に使われている名前です。
2. 「 **Insert**」をクリックしてコントローラー **レンダリング**を行ってください。例えば、タイトルレンダリング用のコントローラーレンダリングアイテムを以下に追加する場合:
- コントローラーフィールド – タイトルを入力してください
- コントローラアクションフィールド – インデックスを入力してください。このアクションはStandardControllerから継承されます。
3. **Experience Accelerator**セクションでは、レンダリングに追加の設定を追加できます。例えば、特定のCSSクラスがページをデータソースとして使えるか、動的なプレースホルダーを使えるかの有無です:
フィールド
概要
追加の互換性テンプレート
複数のテンプレートをデータソースとして選択できます。例えば、プロモーションレンダリングではプロモーションテンプレートだけでなく、テキストや画像など他のデータソースも使います。
データソースとしてページを選択できます
現在のページのコンテンツを使用できるレンダリングには、そのページをデータソースとして選択するオプションがあります。「データソースとしてページを選択できる」ボックスを選択すると、ページをデータソースとして使用できます。このオプションは、ページコンテンツ、ページリスト、JSONコンテンツ、JSONリストなど、現在のページからコンテンツを取り出すレンダリングに適用されます。
レンダリングCSSクラス
レンダリングのためにCSSクラスを入力してください。例えば:
レンダリングのビューパス
デフォルトでは、SXAのビュー名はレンダリング定義アイテム名として解決されます。カスタムパスを提供するには、ビューの位置をここに入力してください。
その他の性質
その他のプロパティもここで指定してください。例えば:IsRowSplitterRendering – 行を分割するレンダリング。IsColumnSplitterRendering – 列を分割するレンダリング。IsRenderingsWithDynamicPlaceholders – 動的プレースホルダーを使用するレンダリング。IsPaginationEnabledRendering – ページ化をサポートするレンダリング。IsNeverLocalRendering – 継承されたレンダリングの編集を無効にするためのもの。IsCompositeRendering – 合成レンダリングのため。IsAutoDatasourceRendering – そのレンダリングをページに追加した後に自動的にデータソースが作成されるレンダリングのためのレンダリング。
4. アイテムを保存して公開してください。
## レジスタ依存関係
依存注入(DI)は、オブジェクトとそのコラボレータ、または依存関係を緩やかに結合させるための技術であり、Sitecore依存注入を利用できます。依存注入がなければ、クラスは直接共同者をインスタンス化するか、静的参照を使用しなければなりません。依存注入では、クラスが必要とするオブジェクトが提供されます。多くの場合、クラスはコンストラクタを通じて依存関係を宣言します。Sitecoreこのアプローチのみをサポートし、コンストラクタ注入として知られています。DIのSitecore実装はASP.NET CoreのMicrosoft.Extensions.DependencyInjection抽象化に基づいています。
リポジトリをDIコンテナに登録することを忘れないでください。設定ファイルを使ってそれが可能です:
SXAレンダリングの場合、SitecoreベースクラスIServicesConfiguratorを使ってコードからサービスを構成することもできます。
using Microsoft.Extensions.DependencyInjection;
using PageTitle.Controllers;
using PageTitle.Repositories;
using Sitecore.DependencyInjection;
namespace PageTitle
{
public class RegisterDependencies : IServicesConfigurator
{
public void Configure(IServiceCollection serviceCollection)
{
serviceCollection.AddTransient();
serviceCollection.AddTransient();
}
}
次に、そのクラスを指す構成ノードで設定を追加する必要がありますRegisterDependencies 。
例えば:
## グリッドとスタイリングのサポートを追加
デフォルトのSXAレンダリングにはグリッドとスタイルのサポートが付属しています。カスタムレンダリングをSXAのグリッドとスタイリングに準拠させたい場合は、パラメータテンプレートを提供し、いくつかの基本のSXAテンプレートを割り当てる必要があります。
レンダリング用のグリッドとスタイリングのサポートを追加する:
1. まず、レンダリングにパラメータテンプレートを追加します。 *sitecore/Layout/Feature/Experience Accelerator* に移動して新しいレンダリングをクリックします。
2. **エディターオプション**セクションの**パラメータテンプレート**フィールドで、テンプレートへのパスを入力します。
3. 今では、例えば以下のような基本SXAテンプレートをレンダリングパラメータテンプレートに割り当てることができます:
- IStyling – スタイルズサポートのために。このテンプレートは、そのレンダリングのコントロールプロパティに新しいフィールドを追加し、レンダリングの編集フレームに追加ボタンを追加します。
- IComponentVariant – バリアントのレンダリングサポートのために。このテンプレートはコントロールプロパティにレンダリングバリアントのドロップダウンを追加し、編集フレームのバリアントセレクターのドロップダウンを設けます。
- Grid Parameters – グリッドサポートのためのもの。このテンプレートはコントロールプロパティにグリッドフィールドを追加し、レンダリングの編集フレームに追加ボタンを追加します。
## ツールボックスにレンダリングを追加する
サイトのプレゼンテーションフォルダでは、エクスペリエンスエディターのツールボックスでどのレンダリングが見えるかを設定できます。ツールボックスの構造を変更することもできます。
SXAツールボックスにレンダリングを追加するには:
1. あなたのサイトで、以下へ移動します *Presentation/Available Renderings*
2. **データ**セクションの**レンダリング**フィールドで**「編集**」をクリックします。
3. 左側の **「All** 」セクションでレンダリングをクリックし、右矢印をクリックして選択したレンダリングのリストに移動します。SXAツールボックスにすべてのレンダリングを追加したら、**OK**をクリックします。
