チュートリアル: シンプルなレンダリングを作成する

SXA ツールボックスには、シンプル テキスト、画像、ビデオ、ソーシャル メディア プラグインなどのためのデフォルトのレンダリングが含まれています。新しいレンダリングを作成することもできます。

注記

フローチャートを確認して、カスタム コンポーネントを作成する必要があるかを判断します。

SXA レンダリングは Sitecore コントローラー レンダリングで、SXA ではすべてのレンダリングに同じ基本構造が使用されています。ラッパーはすべてのレンダリングで同じであり、常に次のものが含まれます。

  • component 要素

  • Html.Sxa().Component()ヘルパー

  • コンテンツ: div class="component-content"

注記

SXA で Creative Exchange 機能を使用できるようにするには、Html.Sxa().Component() を使用する必要があります。このヘルパーは、Creative Exchange エクスポートのデータ属性を挿入します。

レンダリングを作成するには:

  • レンダリング定義アイテムで、コンポーネントをレンダリングするために Sitecore が実行するアクションを指定します。たとえば、タイトルのレンダリングの場合は以下のようになります。

    タイトル コンポーネントの例。

すべての SXA レンダリングにはコントローラーが必要です。SXA を使用すると、ベース SXA コントローラーから継承することにより、ビュー名を自動的に解決し、モデル (RenderingPageContext) を使用できるようになります。新しいレンダリングを作成するとき、または既存のレンダリングを拡張するときは、これらのベース クラスを使用することをお勧めします。

コントローラーおよびアクション メソッドを作成するには:

  1. Visual Studio の ASP.NET MVC Web アプリケーション プロジェクトで、新しいコントローラーを作成します。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 つの方法でリポジトリを挿入できます。

  • コンストラクション インジェクション - このインジェクションを使用することをお勧めします。以下に例を示します。

    public class SimpleComponentController : StandardController
    {
        private readonly ISimpleComponentRepository _repository;
    
        public SimpleComponentController(ISimpleComponentRepository repository)
        {
            _repository = repository;
        }
    	
    	...
    }
  • ServiceLocation インジェクション - このインジェクションは、プロセッサーまたはコマンドで使用され、場合によってはコントローラーで使用されます。以下に例を示します。

    public class SimpleComponentController
    {
        private readonly ISimpleComponentRepository _repository;
    
        public SimpleComponentController()
        {
            _repository = ServiceLocator.ServiceProvider.GetServiceISimpleComponentRepository()
        }
    	
    	...
    }    

SXA はベース リポジトリを提供します。たとえば、VariantsRepository および ListRepository は便利なプロパティを提供し、独自のリポジトリの実装が簡単になります。もう 1 つの例は、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.Current[Templates._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 でコントローラー レンダリングを作成するには:

  1. コンテンツ エディターで、sitecore/レイアウト/レンダリング/機能/エクスペリエンス アクセラレーターに移動し、レンダリングを追加するセクションを右クリックします。

    注記

    レイアウト/レンダリング/機能/エクスペリエンス アクセラレーターにあるセクション名が、実際にツールボックスで使用される名前です。

  2. [挿入]、[コントローラーのレンダリング] をクリックします。たとえば、タイトル レンダリングのコントローラー レンダリング アイテムを次のように追加します。

    • コントローラー フィールド – タイトルを入力

    • [コントローラー アクション] フィールド – インデックスを入力します。このアクションは、StandardController から継承されます。

      コントローラーのレンダリング例。
  3. [エクスペリエンス アクセラレーター] セクションでは、特定の CSS クラス、ページをデータソースとして使用できるかどうか、またはダイナミック プレースホルダーを使用できるかなどの、レンダリングの追加設定を追加できます。

    フィールド

    説明

    追加の互換性のあるテンプレート

    データソースに複数のテンプレートを選択できるようにします。たとえば、プロモ レンダリングにはプロモ テンプレートを使用しますが、テキストや画像などの他のデータソースも使用します。

    データソースとしてページを選択できます

    現在のページからのコンテンツを使用できるレンダリングの場合、データソースとしてページを選択するオプションがあります。[ページをデータソースとして選択可能]ボックスが選択されている場合は、データソースとしてページを使用できます。このオプションは、ページ コンテンツ、ページ リスト、JSON コンテンツ、JSON リストなど、現在のページからのコンテンツを使用できるレンダリングの場合に表示されます。

    css クラスのレンダリング

    レンダリングの CSS クラスを入力します。以下に例を示します。

    カスタム プロモーションの例
    SXA_Renderings_additional_settings_2.png

    レンダリング ビューへのパス

    デフォルトでは、SXA のビュー名はレンダリング定義アイテム名として解決されます。カスタム パスを提供するには、ここにビューの場所を入力します。

    その他のプロパティ

    ここにその他のプロパティを指定します。以下に例を示します。

    • IsRowSplitterRendering – 行を分割するレンダリングの場合。

    • IsColumnSplitterRendering – 列を分割するレンダリングの場合。

    • IsRenderingsWithDynamicPlaceholders – ダイナミック プレースホルダーを使用するレンダリングの場合。

    • IsPaginationEnabledRendering – ページ付けをサポートするレンダリングの場合。

    • IsNeverLocalRendering - 継承されたレンダリングの編集を無効にする場合。

    • IsCompositeRendering – 複合レンダリングの場合。

    • IsAutoDatasourceRendering - レンダリングをページに追加した後、データソースが自動的に作成されるレンダリングの場合。

  4. アイテムを保存して公開します。

依存関係挿入 (DI) は、オブジェクトとそのコラボレーター、または Sitecore 依存関係挿入を使用できる依存関係の間で疎結合を実現するための手法です。依存関係挿入を行わない場合、クラスはコラボレーターを直接インスタンス化するか、静的参照を使用する必要があります。依存関係挿入では、クラスが必要とするオブジェクトが提供されます。ほとんどの場合、クラスはコンストラクターを介して依存関係を宣言します。Sitecore は、コンストラクター インジェクションと呼ばれるこのアプローチのみをサポートします。Sitecoreによる DI の実装には、Microsoft.Extensions.DependencyInjection ASP.NET Core からの抽象化が使用されます。

設定ファイルを使用して、リポジトリを DI コンテナーに登録してください。

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
    <sitecore>
        <services>
            <register serviceType="YOUR_NAMESPACE.ISimpleComponentRepository, YOUR_ASSEMBLY_NAME" 
                      implementationType="YOUR_NAMESPACE.SimpleComponentRepository, YOUR_ASSEMBLY_NAME" 
                      lifetime="Singleton"/>
        </services>
    </sitecore>
</configuration> 

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<ISimpleComponentRepository, SimpleComponentRepository>();
            serviceCollection.AddTransient<SimpleComponentController>();
        }
    }

次に、その RegisterDependencies クラスを指す設定ノードを使用して設定を追加する必要があります。

次に例を示します。

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>    
    <services>
      <configurator type="SimpleComponent.RegisterDependencies, SimpleComponent" />
    </services>
  </sitecore>
</configuration>

デフォルトの SXA レンダリングには、グリッドとスタイルのサポートが付属しています。カスタム レンダリングを SXA グリッドおよびスタイリングに準拠させる場合は、パラメーター テンプレートを提供し、いくつかの基本 SXA テンプレートを割り当てる必要があります。

レンダリングにグリッドとスタイルのサポートを追加するには:

  1. まず、パラメーター テンプレートをレンダリングに追加します。sitecore/レイアウト/機能/エクスペリエンス アクセラレーターに移動し、新しいレンダリングをクリックします。

  2. [エディターのオプション] セクションの、[パラメーター テンプレート] フィールドに、テンプレートへのパスを入力します。

  3. これで、次のようないくつかの基本 SXA テンプレートをレンダリング パラメーター テンプレートに割り当てることができます。

    • IStyling – スタイルのサポート用。このテンプレートは、そのレンダリングのコントロール プロパティに新しいフィールドを追加し、レンダリングの編集フレームにボタンを追加します。

    • IComponentVariant – レンダリング バリアントをサポートする場合。このテンプレートは、コントロール プロパティにレンダリング バリアント ドロップダウンを追加し、編集フレームにバリアント セレクター ドロップダウンを追加します。

    • Grid Parameters – グリッドのサポート用。このテンプレートは、コントロール プロパティにグリッド フィールドを追加し、レンダリングの編集フレームにボタンを追加します。

サイトのプレゼンテーション フォルダーで、エクスペリエンス エディターのツールボックスに表示するレンダリングを設定できます。ツールボックスを再構築することもできます。

SXA ツールボックスにレンダリングを追加するには:

  1. 自分のサイトのプレゼンテーション/Available Renderings に移動します

    有効なレンダリング
  2. [データ] セクションの [レンダリング] フィールドで、[編集] をクリックします。

  3. 左側の [すべて] セクションでレンダリングをクリックし、右矢印をクリックして、選択済みレンダリングのリストに移動します。SXA ツールボックスに必要なレンダリングをすべて追加したら、[OK] をクリックします。

    [アイテムを選択] ダイアログ ボックス。