チュートリアル: コンテンツ リゾルバーをレンダリングするモデル バインド ビューの作成

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

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

コンポーネント データ ソースのシリアル化では実現できない複雑なデータを提供するために、Sitecore レイアウト サービスでコンテンツ リゾルバーを使用します。一般的なユース ケースとして、サイト ナビゲーションや検索結果があり、カスタム ビジネス ロジックの出力または状態を返すためにも使用されます。このチュートリアルでは、コンテンツ ツリーのモデルを返すコンテンツ リゾルバーを作成して、モデル バインド ビューでレンダリングする方法を説明します。

チュートリアルの完了後、Sitecore Helix のプラクティスを確認し、ビジネス ドメインを基にソリューションを整理し、複数のサービスの関連するコードに共通のクロージャを作成することを推奨します。これにより、関連するコンテンツ リゾルバーとレンダリング コードがソリューション内で共存できるようになります。参考として、Sitecore Helix Examplesリポジトリをご確認ください。

注記

コンテンツ リゾルバーを作成するには、次の手順を完了する必要があります。

コンテンツ リゾルバーをレンダリングするモデル バインド ビューを作成するには、次の手順を完了する必要があります。

Sitecore.LayoutService NuGet パッケージを追加する

Sitecore.LayoutService NuGet パッケージには、コンテンツ リゾルバー クラスの継承元となる Sitecore.LayoutService.ItemRendering.ContentsResolvers.RenderingContentsResolver クラスが含まれています。

Platform プロジェクトにSitecore.LayoutService NuGet パッケージ参照を追加するには:

  1. Visual Studio のソリューション エクスプローラーで、Platform/References を右クリックし、[NuGet パッケージの管理] をクリックします。

  2. ウィンドウの右上隅にある [パッケージ ソース] メニューで、 https://sitecore.myget.org/F/sc-packages/api/v3/index.json を指定するパッケージ ソースを選択します。

  3. ウィンドウの左上隅にある [参照] をクリックして、Sitecore.LayoutService NuGet パッケージを検索します。

  4. 検索結果一覧で、Sitecore.LayoutService をクリックします。

  5. ウィンドウの右側にある [インストール] をクリックし、Sitecore.LayoutService NuGet パッケージをダウンロードしてインストールします。

  6. 必要に応じて、Nuget パッケージ マネージャーがソリューションを変更できるようにします。

テンプレート クラスを追加する

Templates クラスはコンテンツ リゾルバー クラスの依存関係です。

Templates クラスを Platform プロジェクトに追加するには:

  1. Visual Studio のソリューション エクスプローラーで、Platform を右クリックし、[追加]、[新しい項目] の順にクリックします。

  2. [新しいアイテムの追加] ウィンドウで、次の操作を行います。

    • 左側のパネルで、[Installed/Visual C#/ASP.NET Core/Code] をクリックします。

    • 中央のパネルで、[クラス] をクリックします。

    • 下部にある [名前] フィールドに「Templates.cs」と入力し、[追加] をクリックします。

  3. クラス ファイル内に、次のコンテンツを追加します。

    RequestResponse
    using Sitecore.Data;
    
    namespace MyProject
    {
      public static class Templates
      {
        public static class SiteRoot
        {
          public static readonly ID Id = ID.Parse("{061CBA15-5474-4B91-8A06-17903B102B82}");
        }
            
        public static class AppRoute
        {
          public static readonly ID Id = ID.Parse("{89829df8-93ee-56be-b57a-8f9efa6ba0a6}");
    
          public static class Fields
          {
            public static readonly ID PageTitle = ID.Parse("{09265946-b966-5034-bad7-94e0d935147a}");
          }
        }
      }
    }
  4. クラス ファイルを保存します。

コンテンツ リゾルバー クラスを作成する

コンテンツ リゾルバー クラスは、Sitecore.LayoutService.ItemRendering.ContentsResolvers.RenderingContentsResolver クラスの ResolveContents メソッドをオーバーライドし、コンテンツ ツリー オブジェクトを返します。

重要

ResolveContents メソッドは、JSON レンダリングとして、レンダリング ホストに返せるオブジェクトを返す必要があります

Platform プロジェクトでコンテンツ リゾルバー クラスを作成するには:

  1. Visual Studio のソリューション エクスプローラーで、Platform を右クリックし、[追加]、[新しい項目] の順にクリックします。

  2. [新しいアイテムの追加] ウィンドウで、次の操作を行います。

    • 左側のパネルで、[Installed/Visual C#/ASP.NET Core/Code] をクリックします。

    • 中央のパネルで、[クラス] をクリックします。

    • 下部にある "名前" フィールドに「NavigationContentsResolver.cs」と入力し、[追加] をクリックします。

  3. クラス ファイル内に、次の内容を入力します。

    RequestResponse
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Sitecore.Abstractions;
    using Sitecore.Data.Items;
    using Sitecore.LayoutService.Configuration;
    using Sitecore.LayoutService.ItemRendering.ContentsResolvers;
    using Sitecore.Mvc.Presentation;
    
    namespace MyProject.LayoutService
    {
      public class NavigationContentsResolver : RenderingContentsResolver
      {
        private const int NavigationDepth = 2;
    
        private readonly BaseLinkManager _linkManager;
    
        public NavigationContentsResolver(BaseLinkManager linkManager)
        {
          _linkManager = linkManager;
        }
    
        public override object ResolveContents(Rendering rendering, IRenderingConfiguration renderingConfig)
        {
          var contextItem = GetContextItem(rendering, renderingConfig);
          var siteRoot = contextItem?.Axes.GetAncestors().FirstOrDefault(item => item.DescendsFrom(Templates.SiteRoot.Id));
          if (siteRoot == null)
          {
            return null;
          }
    
          // First page under our site root should be Home
          return GetNavigation(siteRoot, NavigationDepth).FirstOrDefault();
        }
    
        private IEnumerable<object> GetNavigation(Item parent, int depth)
        {
          depth--;
          return parent.Children
            .Where(item => item.DescendsFrom(Templates.AppRoute.Id))
            .Select(item => new
            {
              Title = item[Templates.AppRoute.Fields.PageTitle],
              Url = _linkManager.GetItemUrl(item),
              Children = depth >= 0 ? GetNavigation(item, depth) : new object[0]
            });
        }
      }
    }
  4. クラス ファイルを保存します。

  5. Platform プロジェクトを右クリックし、[パブリッシュ] をクリックします。

  6. プラットフォーム ウィンドウで [パブリッシュ] をクリックし、Sitecore Content Management インスタンスと Content Delivery インスタンス向けの Platform プロジェクトをパブリッシュします。

ヒント
  • ナビゲーション コンテンツ リゾルバーでは、現在の/アクティブなナビゲーション アイテムに関するデータを出力する (ナビゲーション メニューでアクティブなナビゲーション アイテムを強調表示するなど) ために Sitecore.Context.Item やその他ページ固有のコンテキストを使用することを避ける必要があります。これはクライアント側で行う方が適切に処理され、ページ間のナビゲーション データを確実にキャッシュできるようになります。

  • 可能な限り、Sitecore クエリなどのリソース消費が多い方法の代わりに、Sitecore コンテンツ検索を使用してコンテンツ ツリーのナビゲーションを行ってください。

コンテンツ リゾルバー アイテムを作成する

コンテンツ リゾルバー アイテムは、コンテンツ リゾルバー クラスを Sitecore にリンクします。

Sitecore インスタンスでコンテンツ リゾルバー アイテムを作成するには:

  1. コンテンツ エディターで /sitecore/System/Modules/Layout Service/Rendering Contents Resolvers を右クリックし、[挿入]、[レンダリング コンテンツ リゾルバー] の順にクリックします。

    ヒント

    コンテンツ リゾルバーをフォルダーに整理すると、シリアル化を最適化できます。

  2. [メッセージ] ウィンドウの [名前] フィールドに「Navigation Resolver」と入力し、[OK] をクリックします。

  3. Navigation Resolver アイテムの [コンテンツ] タブで、[データ] セクションの [タイプ] フィールドにコンテンツ リゾルバーの名前を入力します。

    RequestResponse
    MyProject.LayoutService.NavigationContentsResolver, MyProject
  4. [コンテキスト アイテムを使用] を選択します。これにより、コンテンツ ツリー モデルを構築するときに、コンテンツ リゾルバーが現在のアイテム (Sitecore コンテキスト ページ/ルート) を基準にしてコンテンツ ツリーをナビゲートするようになります。選択されていない場合、コンテンツ リゾルバーはそのデータソース アイテムを使用します。

  5. コンテンツ リゾルバー アイテムを保存します。

JSON レンダリング アイテムを作成する

JSON レンダリング アイテムは、コンテンツ リゾルバー クラス (コンテンツ ツリー オブジェクト) の出力をレンダリング ホストの JSON 形式のデータとしてレンダリングします。

Sitecore インスタンスで JSON レンダリング アイテムを作成するには:

  1. コンテンツ エディターで、/sitecore/Layout/Renderings を右クリックし、[挿入]、[Json レンダリング] の順にクリックします。

  2. [メッセージ] ウィンドウの [名前] フィールドに「Navigation Rendering」と入力し、[OK] をクリックします。

  3. Navigation Rendering アイテムの [コンテンツ] タブにある [レイアウト サービス] セクションの [レンダリング コンテンツ リゾルバー] フィールドで、[ナビゲーション リゾルバー] アイテムを選択します。

  4. JSON レンダリング アイテムを保存します。

ヒント

可能であれば、コンテンツ リゾルバーを使用するレンダリングの出力キャッシュを設定します。これは、ナビゲーションの例のように、多くのアイテムにアクセスする必要があるレンダリングで特に重要です。

JSON レンダリング アイテムをページ テンプレートの標準値に追加する

JSON レンダリング アイテムをページ テンプレートの標準値に追加することで、ページ テンプレートから継承するすべてのページに JSON レンダリングが含まれます。

JSON レンダリング アイテムを Page テンプレートの標準値に追加するには:

  1. コンテンツ エディターで、/sitecore/Templates/Project/MyProject/Page/__Standard Values をクリックします。

  2. [プレゼンテーション] タブで、[詳細] をクリックします。

  3. [レイアウト詳細] ウィンドウの [既定] セクションで、[編集] をクリックします。

  4. [デバイス エディター] ウィンドウの [レイアウト] タブで、Layouts/Project/MyProject/Main を選択します。

  5. [コントロール] タブで、[追加] をクリックします。

  6. [レンダリングを選択してください。] ウィンドウで、Renderings/Navigation Rendering をクリックします。

  7. [プレースホルダーに追加] フィールドで、「MyProject-main」と入力し、[選択] をクリックします。

  8. [デバイス エディター] ウィンドウで、[OK] をクリックします。

  9. [レイアウト詳細] ウィンドウで、[OK] をクリックします。

コンテンツ リゾルバーをテストする

モデル バインド ビューを開始する前に、Sitecore レイアウト サービスでコンテンツ リゾルバー JSON レンダリングがレンダリング ホストへの出力に含まれていることをテストします。

レンダリング エンジンの構成によっては、レンダリング ホスト ページが「Unknown component」や同様のメッセージを表示することがありますが、これは正常です。

このサンプル JSON レンダリングでは、ナビゲーション モデルを設定するためにコンテンツ ツリーにいくつかのアイテムを追加しました。

RequestResponse
{
  "uid":"19ea6f2e-3ab9-4e9d-b3a6-9a0e5a6e9d0a",
  "componentName":"Navigation Rendering",
  "dataSource":"",
  "params":{},
  "fields":{
    "title":"Welcome to Sitecore",
    "url":"/en/",
    "children":[
      {
        "title":"Main Nav 1",
        "url":"/en/MainNav1",
        "children":[
          {
            "title":"Child Nav 1",
            "url":"/en/MainNav1/ChildNav1",
            "children":[]
          },
          {
            "title":"Child Nav 2",
            "url":"/en/MainNav1/ChildNav2",
            "children":[]
          }
        ]
      },
      {
        "title":"Main Nav 2",
        "url":"/en/MainNav2",
        "children":[
          {
            "title":"More Child Nav",
            "url":"/en/MainNav2/MoreChildNav",
            "children":[]
          }
        ]
      },
      {
        "title":"Main Nav 3",
        "url":"/en/MainNav3",
        "children":[]
      }
    ]
  }
}

モデルを作成する

モデルは、Sitecore レイアウト サービスによって返されるコンテンツ リゾルバー JSON レンダリングのデータにマップする、厳密に型指定されたクラスを提供します。

RenderingHost プロジェクトでモデルを作成するには:

  1. Visual Studio のソリューション エクスプローラーで、RenderingHost/Models を右クリックし、[追加]、[新しいアイテム] の順にクリックします。

  2. [新しいアイテムの追加] ウィンドウで、次の操作を行います。

    • 左側のパネルで、[Installed/Visual C#/ASP.NET Core/Code] をクリックします。

    • 中央のパネルで、[クラス] をクリックします。

    • 一番下の [名前] フィールドに、「NavigationModel.cs」と入力します。

    • [追加] をクリックします。

  3. クラス ファイルで、JSON レンダリングをモデルにバインドするには、次の内容を追加します。

    RequestResponse
    using System.Collections.Generic;
    using Sitecore.AspNet.RenderingEngine.Binding.Attributes;
    
    namespace MyProject.Models
    {
      public class NavigationModel
      {
        [SitecoreComponentField]
        public string Title { get; set; }
    
        [SitecoreComponentField]
        public string Url { get; set; }
    
        [SitecoreComponentField]
        public IEnumerable<NavigationModel> Children { get; set; }
      }
    }
    注記

    Sitecore フィールドに直接バインドしていないため、このモデルでは string のような単純な型を使用できますが、[SitecoreComponentField] で明示的に属性を付ける必要があります。

  4. クラス ファイルを保存します。

モデル バインド ビューを作成する

モデル バインド ビューは、モデル データを HTML としてレンダリングします。

RenderingHost プロジェクトでモデル バインド ビューを作成するには:

  1. Visual Studio のソリューション エクスプローラーで、RenderingHost/Views/Shared/Components/SitecoreComponent を右クリックし、[追加]、[新しい項目] の順にクリックします。

  2. [新しいアイテムの追加] ウィンドウで、次の操作を行います。

    • 左側のパネルで、[Installed/Visual C#/ASP.NET Core/Web] をクリックします。

    • 中央のペインで、[Razor ビュー] をクリックします。

    • 一番下の [名前] フィールドに、「Navigation Rendering.cshtml」と入力します。

      重要

      JSON レンダリングの名前とモデル バインド ビュー ファイルの名前が一致しない場合、Unknown Compontent エラーが表示されます。

    • [追加] をクリックします。

  3. モデル バインド ビュー ファイルで、次の内容を追加します。

    RequestResponse
    @model NavigationModel
    
    <ul>
      <li><a href="@Model.Url">Home</a></li>
      @foreach (var navigation in Model.Children)
      {
        <li>
        <a href="@navigation.Url">@navigation.Title</a>
        @if (@navigation.Children != null)
        {
          <ul>
          @foreach (var childNav in navigation.Children)
          {
            <li><a href="@childNav.Url">@childNav.Title</a></li>
          }
          </ul>
        }
        </li>
      }
    </ul>
  4. モデル バインド ビュー ファイルを保存します。

モデル バインド ビューを登録する

Sitecore レンダリング エンジンで、モデル バインド ビューをレイアウト サービス コンポーネント名にマップする必要があります (どちらも Navigation Rendering と呼ばれます)。

Startup クラスでモデル バインド ビューを登録するには:

  1. Visual Studio の ソリューション エクスプローラーで、 プロジェクト内の Startup.cs ファイルをダブルクリックします。

  2. Startup.cs ファイルの services.AddSitecoreRenderingEngine の呼び出しで、モデル バインド ビューとモデルをレンダリング エンジン コンポーネントとして AddModelBoundView() メソッドで登録します。

    RequestResponse
    services.AddSitecoreRenderingEngine(options =>
      {
        //Register your components here
        options
          .AddModelBoundView<ContentBlockModel>("ContentBlock")
          .AddModelBoundView<NavigationModel>("Navigation Rendering")
          .AddDefaultPartialView("_ComponentNotFound");
      })
      // Includes forwarding of Scheme as X-Forwarded-Proto to the Layout Service so that
      // Sitecore Media and other links have the correct scheme.
      .ForwardHeaders()
      // Enable forwarding relevant headers and client IP for Sitecore Tracking and Personalization.
      .WithTracking()
      // Enable support for the Experience Editor.
      .WithExperienceEditor(options =>
      {
        // Experience Editor integration needs to know the external URL of your rendering host,
        // if behind HTTPS termination or another proxy (like Traefik).
        if (Configuration.RenderingHostUri != null)
        {
          options.ApplicationUrl = Configuration.RenderingHostUri;
        }
      });
    重要

    JSON レンダリングの名前とモデル バインド ビュー ファイルの名前が一致しない場合、Unknown Component エラーが表示されます。

  3. Startup.cs ファイルを保存します。

モデル バインド ビューをテストする

ヒント

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、