1. コンポーネント

チュートリアル: 単純なレンダリングの構築

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

メモ

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

レンダリングを作成する

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

  • component要素

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

  • 内容は次のとおりです。 div class="component-content"

手記

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

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

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

    Title component example.

コントローラーとアクションメソッドを作成する

すべてのSXAレンダリングにはコントローラーが必要です。SXAを使用すると、ベースのSXAコントローラーから継承できます。ビュー名を自動的に解決し、モデル(Rendering、PageContext)を提供するための便利なプロパティとロジックを提供します。これらの基本クラスは、新しいレンダリングを作成するとき、または既存のレンダリングを拡張するときに使用することをお勧めします。

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

  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つの方法で挿入できます。

  • 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.Current[Templates._Title.Fields.Title];
        }
    }

リポジトリをDIコンテナに登録することを忘れないでください。これは、設定ファイルを使用して行うことができます。

Simple component config file example.

そして、ビューは次のようになります。

@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、Controller Renderingの順にクリックします。たとえば、タイトルレンダリングのコントローラーレンダリングアイテムを追加するには、次のようにします。

    • Controller フィールド – 「Title」と入力します。

    • Controller Action フィールド – 「Index」と入力します。このアクションはStandardControllerから継承されます。

      Controller rendering example.

  3. Experience Acceleratorセクションでは、レンダリングの設定を追加できます。たとえば、特定のCSSクラスで、ページをデータソースとして使用できるかどうか、または動的プレースホルダを使用できるかどうかなどです。

    畑

    形容

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

    データソースのテンプレートを複数選択できます。たとえば、Promoレンダリングでは、Promoテンプレートだけでなく、テキストやイメージなどの他のデータ ソースも使用します。

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

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

    レンダリングcssクラス

    レンダリングのCSSクラスを入力します。例えば：

    Custom promo example

    レンダリング ビュー パス

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

    その他のプロパティ

    ここでは、他のプロパティを指定します。例えば：

    • IsRowSplitterRendering – 行を分割するレンダリング用。

    • IsColumnSplitterRendering – 列を分割するレンダリング用。

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

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

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

    • IsCompositeRendering – コンポジットレンダリング用。

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

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

依存関係の登録

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

リポジトリを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/Layout/Feature/Experience Acceleratorに移動し、新しいレンダリングをクリックします。

  2. Editors optionセクションのParameters Templateフィールドに、テンプレートへのパスを入力します。

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

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

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

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

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

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

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

  1. サイトで、Presentation/Available Renderings

    Available renderings

  2. DataセクションのRenderingsフィールドで、Editをクリックします。

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

    Select items dialog box.
この記事を改善するための提案がある場合は、 お知らせください!