チュートリアル: コンテンツ リゾルバーをレンダリングするモデル バインド ビューの作成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンポーネント データ ソースのシリアル化では実現できない複雑なデータを提供するために、Sitecore レイアウト サービスでコンテンツ リゾルバーを使用します。一般的なユース ケースとして、サイト ナビゲーションや検索結果があり、カスタム ビジネス ロジックの出力または状態を返すためにも使用されます。このチュートリアルでは、コンテンツ ツリーのモデルを返すコンテンツ リゾルバーを作成して、モデル バインド ビューでレンダリングする方法を説明します。
チュートリアルの完了後、Sitecore Helix のプラクティスを確認し、ビジネス ドメインを基にソリューションを整理し、複数のサービスの関連するコードに共通のクロージャを作成することを推奨します。これにより、関連するコンテンツ リゾルバーとレンダリング コードがソリューション内で共存できるようになります。参考として、Sitecore Helix Examplesリポジトリをご確認ください。
コンテンツ リゾルバーを作成するには、次の手順を完了する必要があります。
コンテンツ リゾルバーをレンダリングするモデル バインド ビューを作成するには、次の手順を完了する必要があります。
Sitecore.LayoutService NuGet パッケージを追加する
Sitecore.LayoutService
NuGet パッケージには、コンテンツ リゾルバー クラスの継承元となる Sitecore.LayoutService.ItemRendering.ContentsResolvers.RenderingContentsResolver
クラスが含まれています。
Platform
プロジェクトにSitecore.LayoutService
NuGet パッケージ参照を追加するには:
-
Visual Studio のソリューション エクスプローラーで、
Platform/References
を右クリックし、[NuGet パッケージの管理] をクリックします。 -
ウィンドウの右上隅にある [パッケージ ソース] メニューで、
https://sitecore.myget.org/F/sc-packages/api/v3/index.json
を指定するパッケージ ソースを選択します。 -
ウィンドウの左上隅にある [参照] をクリックして、
Sitecore.LayoutService
NuGet パッケージを検索します。 -
検索結果一覧で、
Sitecore.LayoutService
をクリックします。 -
ウィンドウの右側にある [インストール] をクリックし、
Sitecore.LayoutService
NuGet パッケージをダウンロードしてインストールします。 -
必要に応じて、Nuget パッケージ マネージャーがソリューションを変更できるようにします。
テンプレート クラスを追加する
Templates
クラスはコンテンツ リゾルバー クラスの依存関係です。
Templates
クラスを Platform
プロジェクトに追加するには:
-
Visual Studio のソリューション エクスプローラーで、
Platform
を右クリックし、[追加]、[新しい項目] の順にクリックします。 -
[新しいアイテムの追加] ウィンドウで、次の操作を行います。
-
左側のパネルで、[
Installed/Visual C#/ASP.NET Core/Code
] をクリックします。 -
中央のパネルで、[クラス] をクリックします。
-
下部にある [名前] フィールドに「
Templates.cs
」と入力し、[追加] をクリックします。
-
-
クラス ファイル内に、次のコンテンツを追加します。
RequestResponseusing 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}"); } } } }
-
クラス ファイルを保存します。
コンテンツ リゾルバー クラスを作成する
コンテンツ リゾルバー クラスは、Sitecore.LayoutService.ItemRendering.ContentsResolvers.RenderingContentsResolver
クラスの ResolveContents
メソッドをオーバーライドし、コンテンツ ツリー オブジェクトを返します。
ResolveContents
メソッドは、JSON レンダリングとして、レンダリング ホストに返せるオブジェクトを返す必要があります。
Platform
プロジェクトでコンテンツ リゾルバー クラスを作成するには:
-
Visual Studio のソリューション エクスプローラーで、
Platform
を右クリックし、[追加]、[新しい項目] の順にクリックします。 -
[新しいアイテムの追加] ウィンドウで、次の操作を行います。
-
左側のパネルで、[
Installed/Visual C#/ASP.NET Core/Code
] をクリックします。 -
中央のパネルで、[クラス] をクリックします。
-
下部にある "名前" フィールドに「
NavigationContentsResolver.cs
」と入力し、[追加] をクリックします。
-
-
クラス ファイル内に、次の内容を入力します。
RequestResponseusing 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] }); } } }
-
クラス ファイルを保存します。
-
Platform
プロジェクトを右クリックし、[パブリッシュ] をクリックします。 -
プラットフォーム ウィンドウで [パブリッシュ] をクリックし、Sitecore Content Management インスタンスと Content Delivery インスタンス向けの
Platform
プロジェクトをパブリッシュします。
-
ナビゲーション コンテンツ リゾルバーでは、現在の/アクティブなナビゲーション アイテムに関するデータを出力する (ナビゲーション メニューでアクティブなナビゲーション アイテムを強調表示するなど) ために
Sitecore.Context.Item
やその他ページ固有のコンテキストを使用することを避ける必要があります。これはクライアント側で行う方が適切に処理され、ページ間のナビゲーション データを確実にキャッシュできるようになります。 -
可能な限り、Sitecore クエリなどのリソース消費が多い方法の代わりに、Sitecore コンテンツ検索を使用してコンテンツ ツリーのナビゲーションを行ってください。
コンテンツ リゾルバー アイテムを作成する
コンテンツ リゾルバー アイテムは、コンテンツ リゾルバー クラスを Sitecore にリンクします。
Sitecore インスタンスでコンテンツ リゾルバー アイテムを作成するには:
-
コンテンツ エディターで
/sitecore/System/Modules/Layout Service/Rendering Contents Resolvers
を右クリックし、[挿入]、[レンダリング コンテンツ リゾルバー] の順にクリックします。ヒントコンテンツ リゾルバーをフォルダーに整理すると、シリアル化を最適化できます。
-
[メッセージ] ウィンドウの [名前] フィールドに「
Navigation Resolver
」と入力し、[OK] をクリックします。 -
Navigation Resolver
アイテムの [コンテンツ] タブで、[データ] セクションの [タイプ] フィールドにコンテンツ リゾルバーの名前を入力します。RequestResponseMyProject.LayoutService.NavigationContentsResolver, MyProject
-
[コンテキスト アイテムを使用] を選択します。これにより、コンテンツ ツリー モデルを構築するときに、コンテンツ リゾルバーが現在のアイテム (Sitecore コンテキスト ページ/ルート) を基準にしてコンテンツ ツリーをナビゲートするようになります。選択されていない場合、コンテンツ リゾルバーはそのデータソース アイテムを使用します。
-
コンテンツ リゾルバー アイテムを保存します。
JSON レンダリング アイテムを作成する
JSON レンダリング アイテムは、コンテンツ リゾルバー クラス (コンテンツ ツリー オブジェクト) の出力をレンダリング ホストの JSON 形式のデータとしてレンダリングします。
Sitecore インスタンスで JSON レンダリング アイテムを作成するには:
-
コンテンツ エディターで、
/sitecore/Layout/Renderings
を右クリックし、[挿入]、[Json レンダリング] の順にクリックします。 -
[メッセージ] ウィンドウの [名前] フィールドに「
Navigation Rendering
」と入力し、[OK] をクリックします。 -
Navigation Rendering
アイテムの [コンテンツ] タブにある [レイアウト サービス] セクションの [レンダリング コンテンツ リゾルバー] フィールドで、[ナビゲーション リゾルバー] アイテムを選択します。 -
JSON レンダリング アイテムを保存します。
可能であれば、コンテンツ リゾルバーを使用するレンダリングの出力キャッシュを設定します。これは、ナビゲーションの例のように、多くのアイテムにアクセスする必要があるレンダリングで特に重要です。
JSON レンダリング アイテムをページ テンプレートの標準値に追加する
JSON レンダリング アイテムをページ テンプレートの標準値に追加することで、ページ テンプレートから継承するすべてのページに JSON レンダリングが含まれます。
JSON レンダリング アイテムを Page
テンプレートの標準値に追加するには:
-
コンテンツ エディターで、
/sitecore/Templates/Project/MyProject/Page/__Standard Values
をクリックします。 -
[プレゼンテーション] タブで、[詳細] をクリックします。
-
[レイアウト詳細] ウィンドウの [既定] セクションで、[編集] をクリックします。
-
[デバイス エディター] ウィンドウの [レイアウト] タブで、
Layouts/Project/MyProject/Main
を選択します。 -
[コントロール] タブで、[追加] をクリックします。
-
[レンダリングを選択してください。] ウィンドウで、
Renderings/Navigation Rendering
をクリックします。 -
[プレースホルダーに追加] フィールドで、「
MyProject-main
」と入力し、[選択] をクリックします。 -
[デバイス エディター] ウィンドウで、[OK] をクリックします。
-
[レイアウト詳細] ウィンドウで、[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
プロジェクトでモデルを作成するには:
-
Visual Studio のソリューション エクスプローラーで、
RenderingHost/Models
を右クリックし、[追加]、[新しいアイテム] の順にクリックします。 -
[新しいアイテムの追加] ウィンドウで、次の操作を行います。
-
左側のパネルで、[
Installed/Visual C#/ASP.NET Core/Code
] をクリックします。 -
中央のパネルで、[クラス] をクリックします。
-
一番下の [名前] フィールドに、「
NavigationModel.cs
」と入力します。 -
[追加] をクリックします。
-
-
クラス ファイルで、JSON レンダリングをモデルにバインドするには、次の内容を追加します。
RequestResponseusing 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]
で明示的に属性を付ける必要があります。 -
クラス ファイルを保存します。
モデル バインド ビューを作成する
モデル バインド ビューは、モデル データを HTML としてレンダリングします。
RenderingHost
プロジェクトでモデル バインド ビューを作成するには:
-
Visual Studio のソリューション エクスプローラーで、
RenderingHost/Views/Shared/Components/SitecoreComponent
を右クリックし、[追加]、[新しい項目] の順にクリックします。 -
[新しいアイテムの追加] ウィンドウで、次の操作を行います。
-
左側のパネルで、[
Installed/Visual C#/ASP.NET Core/Web
] をクリックします。 -
中央のペインで、[Razor ビュー] をクリックします。
-
一番下の [名前] フィールドに、「
Navigation Rendering.cshtml
」と入力します。重要JSON レンダリングの名前とモデル バインド ビュー ファイルの名前が一致しない場合、
Unknown Compontent
エラーが表示されます。 -
[追加] をクリックします。
-
-
モデル バインド ビュー ファイルで、次の内容を追加します。
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>
-
モデル バインド ビュー ファイルを保存します。
モデル バインド ビューを登録する
Sitecore レンダリング エンジンで、モデル バインド ビューをレイアウト サービス コンポーネント名にマップする必要があります (どちらも Navigation Rendering
と呼ばれます)。
Startup
クラスでモデル バインド ビューを登録するには:
-
Visual Studio の ソリューション エクスプローラーで、 プロジェクト内の
Startup.cs
ファイルをダブルクリックします。 -
Startup.cs
ファイルのservices.AddSitecoreRenderingEngine
の呼び出しで、モデル バインド ビューとモデルをレンダリング エンジン コンポーネントとしてAddModelBoundView()
メソッドで登録します。RequestResponseservices.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
エラーが表示されます。 -
Startup.cs
ファイルを保存します。