1. 開発ウォークスルー

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

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

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

大事な

前に アプリを統合した場合は、従来の ASP.NET Core Rendering SDKバージョン22以前を使用しています。このSDKは更新を受け取っていないため、新しい の最新バージョンにアップグレードすることをお勧めします。

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

チュートリアルを完了したら、Sitecore Helixのプラクティスに慣れて、ビジネス ドメインに従ってソリューションを整理し、複数のサービスからの関連コードに共通のクロージャを作成することをお勧めします。これにより、関連するコンテンツ リゾルバーとレンダリング コードをソリューション内に併置できます。インスピレーションを得るには、Sitecore Helix Examplesリポジトリを参照してください。

メモ

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

  • Sitecore.LayoutService NuGetパッケージを追加します。

  • Templatesクラスを追加します。

  • コンテンツ・リゾルバ・クラスを作成します。

  • コンテンツ リゾルバー項目を作成します。

  • JSONレンダリング アイテムを作成します。

  • JSONレンダリング項目をAppRouteテンプレートの標準値に追加します。

  • コンテンツ リゾルバをテストします。

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

  • モデルを作成します。

  • モデル境界ビューを作成します。

  • モデル バインド ビューを登録します。

  • モデルバインド ビューをテストします。

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

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

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

  1. Visual Studioのソリューション エクスプローラーで、Platform/Referencesを右クリックし、Manage NuGet Packagesをクリックします。

  2. ウィンドウの右上隅にあるPackage sourceメニューで、https://nuget.sitecore.com/resources/v3/index.jsonを指すパッケージ ソースを選択します。

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

  4. 検索結果のリストで、Sitecore.LayoutServiceをクリックします。

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

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

Templatesクラスを追加する

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

TemplatesクラスをPlatformプロジェクトに追加するには、次のようにします。

  1. Visual Studioのソリューション エクスプローラーで、Platformを右クリックし、AddNew Itemの順にクリックします。

  2. Add New Itemダイアログで、次の操作を行います。

    • 左側のウィンドウで、Installed/Visual C#/ASP.NET Core/Codeをクリックします。

    • 中央のウィンドウで、Classをクリックします。

    • 下部のNameフィールドに「 Templates.cs 」と入力し、Addをクリックします。

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

    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メソッドはmustJSONレンダリングとしてレンダリングホストに返すことができるオブジェクトを返すことができます。

Platformプロジェクトでコンテンツ リゾルバ クラスを作成するには、次のようにします。

  1. Visual Studioのソリューション エクスプローラーで、Platformを右クリックし、AddNew Itemの順にクリックします。

  2. Add New Itemウィンドウで、次の操作を行います。

    • 左側のウィンドウで、Installed/Visual C#/ASP.NET Core/Codeをクリックします。

    • 中央のウィンドウで、Classをクリックします。

    • 下部のNameフィールドに「 NavigationContentsResolver.cs 」と入力し、Addをクリックします。

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

    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プロジェクトを右クリックし、Publishをクリックします。

  6. PlatformウィンドウでPublishをクリックして、Sitecore Content ManagementインスタンスとContent DeliveryインスタンスでPlatformプロジェクトを公開します。

先端
  • ナビゲーション コンテンツ リゾルバーは、Sitecore.Context.Itemまたは別のページ固有のコンテキストを使用して、現在またはアクティブなナビゲーション項目のデータを出力しないようにする必要があります (ナビゲーション メニューでアクティブなナビゲーション項目を強調表示するなど)。これはクライアント側でより適切に処理され、ページ間でナビゲーションデータをキャッシュできるようになります。

  • Sitecoreクエリや、可能な場合はコンテンツ ツリーをナビゲートする他のリソースを大量に消費する方法の代わりに、Sitecoreコンテンツ検索を使用します。

コンテンツ リゾルバー項目を作成する

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

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

  1. コンテンツ エディタで、/sitecore/System/Modules/Layout Service/Rendering Contents Resolversを右クリックし、InsertRendering Contents Resolverの順にクリックします。

    先端

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

  2. MessageダイアログのNameフィールドにNavigation Resolverと入力し、OKをクリックします。

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

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

  5. コンテンツリゾルバー項目を保存します。

JSONレンダリング項目を作成する

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

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

  1. コンテンツ エディタで、/sitecore/Layout/Renderingsを右クリックし、InsertJson Renderingの順にクリックします。

  2. MessageダイアログのNameフィールドにNavigation Renderingと入力し、OKをクリックします。

  3. Navigation Rendering項目のContentタブのLayout ServiceセクションのRendering Contents Resolverドロップダウン リストで、Navigation Resolver項目をクリックします。

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

先端

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

JSONレンダリング項目をAppRouteテンプレートの標準値に追加します

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

JSONレンダリング アイテムをAppRouteテンプレートの標準値に追加するには、次のようにします。

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

  2. Presentationタブで、「Details」をクリックします。

  3. Layout DetailsダイアログのDefaultセクションで、「Edit」をクリックします。

  4. Device Editorダイアログの「Layout」タブで、「Layouts/Project/MyProject/Main」を選択します。

  5. Controlsタブで、「Add」をクリックします。

  6. Select a Renderingダイアログで、「Renderings/Navigation Rendering」をクリックします。

  7. Add to PlaceholderフィールドでMainをクリックし、Selectをクリックします。

  8. Device Editorダイアログで、「OK」をクリックします。

  9. Layout Detailsダイアログで、「OK」をクリックします。

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

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

レンダリング エンジンの設定によっては、レンダリング ホスト ページにUnknown componentまたは同様のメッセージが出力される場合があります。これは完全に正常です。

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

{
  "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を右クリックし、AddNew Itemの順にクリックします。

  2. Add New Itemウィンドウで、次の操作を行います。

    • 左側のウィンドウで、Installed/Visual C#/ASP.NET Core/Codeをクリックします。

    • 中央のウィンドウで、Classをクリックします。

    • 下部のNameフィールドに「 NavigationModel.cs」と入力します。

    • Add」をクリックします。

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

    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を右クリックし、AddNew Itemの順にクリックします。

  2. Add New Itemウィンドウで、次の操作を行います。

    • 左側のウィンドウで、Installed/Visual C#/ASP.NET Core/Webをクリックします。

    • 中央のウィンドウで、Razor Viewをクリックします。

    • 下部のNameフィールドに「 Navigation Rendering.cshtml」と入力します。

      大事な

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

    • Add」をクリックします。

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

    @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() メソッドに登録します。

    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ファイルを保存します。

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

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