--- title: "ウォークスルー:モデルバウンドビューを作成し、内容リゾルバをレンダリングする方法" slug: "walkthrough--creating-a-model-bound-view-that-renders-a-contents-resolver" abstract: "Sitecoreモデルバウンドビューを作成し、内容解析器の出力をレンダリングする方法。" --- # ウォークスルー:モデルバウンドビューを作成し、内容リゾルバをレンダリングする方法 > !重要以前にアプリを統合していた場合、それは旧版のASP.NETコアレンダリングSDK(バージョン22以前)を使用しています。このSDKは更新を受け取っていないため、[最新のバージョンへのアップグレード](https://doc.sitecore.com/xmc/en/developers/asp-net/latest/asp-net-core-sdk/upgrade-from-v22.html) をお勧めします。 [Sitecore Layout Service](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-layout-service.html "Sitecore Layout Service")と共にコンテンツリゾルバーを使って、コンポーネントデータソースのシリアライズを超えたより複雑なデータを提供します。一般的なユースケースには、サイトナビゲーション、検索結果、カスタムビジネスロジックの出力や状態の返還などがあります。このウォークスルーでは、モデルバウンドビューでレンダリングするためのコンテンツツリーのモデルを返す内容リボルバの作成方法を学びます。 ウォークスルーを終えたら、ビジネスドメインごとにソリューションを整理し、複数のサービスからの関連コードの共通クロージャーを作成する[Sitecore Helix](https://helix.sitecore.net/)プラクティスに慣れておくことをお勧めします。これにより、関連するコンテンツリゾルバやレンダリングコードをソリューション内に共存できます。インスピレーションは[Sitecore Helix例](https://github.com/Sitecore/Helix.Examples)リポジトリをご覧ください。 > !注このドキュメントは [、Getting Startedテンプレートを使用している](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--using-the-getting-started-template.html "Walkthrough: Using the Getting Started template") か、Content ManagementとContent DeliveryインスタンスのPlatformプロジェクト、RenderingHostプロジェクトを含む動作するSitecoreソリューションを持っていることを前提としています。 > > [Getting Startedテンプレートのアイテムやプロジェクトの公開、実行、テスト](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/publish,-run,-and-test-the-getting-started-template-projects.html "Publish, run, and test the Getting Started template projects")方法をご覧ください。 contentsリゾルバを作成するには、以下の手順を踏み込む必要があります: - Sitecoreを追加してください。LayoutService NuGetパッケージ。 - テンプレートクラスを追加してください。 - contents リゾルバクラスを作成します。 - contents リゾルバ項目を作成します。 - JSONレンダリングアイテムを作成します。 - JSONレンダリングアイテムを標準的なモデルの値に AppRoute 追加します。 - 内容物リゾルバをテストしてください。 目次リゾルバをレンダリングするモデルバウンドビューを作成するには、以下の手順を踏む必要があります。 - モデルを作成しましょう。 - モデルバウンドビューを作成します。 - モデルバウンドビューを登録します。 - モデルバウンドビューをテストします。 ## Sitecoreを追加してください。LayoutService NuGetパッケージ Sitecore.LayoutService NuGetパッケージには、contentsリゾルバクラスが継承するSitecore.LayoutService.ItemRendering.ContentsResolvers.RenderingContentsResolverクラスが含まれています。 Sitecore.LayoutService NuGetパッケージをPlatformプロジェクトに追加するには: 1. Visual Studio、Solution Explorerで右クリック Platform/References から **「パッケージ管理」NuGet**クリックしてください。 2. ウィンドウ右上隅の **「パッケージソース** 」メニューで、 https://nuget.sitecore.com/resources/v3/index.jsonを指すパッケージソースを選択します。 3. ウィンドウの左上に「 **ブラウズ** 」をクリックして、Sitecore.LayoutService NuGetパッケージを検索してください。 4. 検索結果一覧でSitecore.LayoutServiceをクリックしてください。 5. ウィンドウの右側で **「インストール** 」をクリックしてSitecore.LayoutService NuGetパッケージをダウンロードしてインストールします。 6. 必要に応じてNugetパッケージマネージャーがソリューションを修正できるようにします。 ## テンプレートクラスを追加 Templatesクラスはcontentsリsolverクラスの依存関係です。 TemplatesクラスをPlatformプロジェクトに追加するには: 1. Visual Studio、Solution Explorerでは右クリックでPlatformを右クリックし、「 **追加**、**新しいアイテム**」をクリックします。 2. 「 **新しいアイテムを追加」** ダイアログで: - 左側のペインで Installed/Visual C#/ASP.NET Core/Codeをクリックします。 - 中央のパネルで「 **クラス**」をクリックします。 - 下部の **「Name** 」欄で「 Templates.cs 」を入力し、「 **追加**」をクリックします。 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. クラスファイルを保存してください。 ## contentsリゾルバクラスを作成します contentsリゾルバクラスはSitecore.LayoutService.ItemRendering.ContentsResolvers.RenderingContentsResolverクラスのResolveContentsメソッドを上書きし、コンテンツツリーオブジェクトを返します。 > !重要ResolveContentsメソッドは、レンダリングホストにJSONレンダリングとして返せるオブジェクトを返さ *なければなりません* 。 Platformプロジェクトで内容リゾルバクラスを作成するには: 1. Visual Studio、Solution Explorerでは右クリックでPlatformを右クリックし、「 **追加**、**新しいアイテム**」をクリックします。 2. **「新しいアイテムを追加**」ウィンドウで: - 左側のペインで Installed/Visual C#/ASP.NET Core/Codeをクリックします。 - 中央のパネルで「 **クラス**」をクリックします。 - 下部の **「Name** 」欄で「 NavigationContentsResolver.cs 」を入力し、「 **追加**」をクリックします。 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 GetNavigation(Item parent, int depth) { depth--; return parent.Children .Where(item => item.DescendsFrom(Templates.AppRoute.Id)) .Select(item => new { Title = itemTemplates.AppRoute.Fields.PageTitle, Url = \_linkManager.GetItemUrl(item), Children = depth >= 0 ? GetNavigation(item, depth) : new object0 }); } } } 4. クラスファイルを保存してください。 5. Platformプロジェクトを右クリックして「**公開**」をクリックします。 6. **プラットフォーム**ウィンドウで「**公開**」をクリックして、Sitecore Content ManagementとContent DeliveryインスタンスでPlatformプロジェクトを公開します。 > !ヒント > > - ナビゲーション内容リゾルバは、現在またはアクティブなナビゲーション項目(ナビゲーションメニューでアクティブなナビゲーション項目をハイライトするなど)にSitecore.Context.Itemや他のページ固有のコンテキストを使わないようにしなければなりません。これはクライアント側で扱う方が適しており、ページ間でナビゲーションデータをキャッシュできることを保証します。 > > - 可能な限り、Sitecoreクエリや他のリソースのかかるコンテンツツリーナビゲーションの代わりに、コンテンツSearch Sitecoreを活用しましょう。 > ## contentsリゾルバ項目を作成 contentsリゾルバの項目は、contentsリゾルバクラスをSitecoreにリンクします。 Sitecoreインスタンスでコンテンツリゾルバ項目を作成するには: 1. コンテンツエディターで右クリック /sitecore/System/Modules/Layout Service/Rendering Contents Resolversから **挿入**、**内容解析のレンダリング**をクリックします。 > !ヒントシリアライズを最適化するために、コンテンツリゾルバをフォルダに整理できます。 2. **メッセージ**ダイアログの**Name**欄でNavigation Resolverを入力し、**OK**をクリックします。 3. Navigation Resolver項目の**コンテンツ**タブの**データ**セクションの**タイプ**フィールドで、内容リゾルバの名前を入力してください: MyProject.LayoutService.NavigationContentsResolver, MyProject 4. コンテンツツリーモデルを構築する際に、コンテンツリゾルバが現在のアイテム(Sitecoreコンテキストページ/ルート)に対してコンテンツツリーをナビゲートさせるには **「コンテキストアイテム使用** 」を選択してください。このチェックボックスを選択しない場合、コンテンツリゾルバはデータソースアイテムを使用します。 5. contentsリゾルバの項目を保存してください。 ## JSONレンダリングアイテムを作成します JSONレンダリングアイテムは、コンテンツリゾルバクラス(コンテンツツリーオブジェクト)の出力をレンダリングホスト用のJSON形式データとしてレンダリングします。 SitecoreインスタンスでJSONレンダリングアイテムを作成するには: 1. コンテンツエディターで右クリック /sitecore/Layout/Renderings を選び、「 **挿入**、 **JSONレンダリング**」をクリックします。 2. **メッセージ**ダイアログの**Name**欄でNavigation Renderingを入力し、**OK**をクリックします。 3. Navigation Renderingアイテムの**コンテンツ**タブ、**レイアウトサービスの**セクション、**Rendering Contents Resolver**ドロップダウンリストで、**ナビゲーションリゾルバ**アイテムをクリックします。 4. JSONレンダリングアイテムを保存してください。 > !ヒント可能であれば、コンテンツリゾルバーを使用するレンダリングに対して出力キャッシュを設定しましょう。これは特にナビゲーションなど多くの項目にアクセスするレンダリングで重要です。 ## JSONレンダリングアイテムをAppRouteテンプレートの標準値に追加します AppRouteテンプレートの標準値にレンダリングアイテムJSONを追加することで、AppRouteテンプレートから継承するすべてのページにJSONレンダリングが含まれています。 JSONレンダリングアイテムをテンプレートの標準値に追加するには、AppRoute : 1. コンテンツエディターで /sitecore/Templates/Project/MyProject/AppRoute/\_\_Standard Valuesをクリックします。 2. **プレゼンテーション**タブで**詳細**をクリックしてください。 3. **レイアウト詳細**ダイアログの**デフォルト**セクションで**編集をクリックします。** 4. **デバイスエディター**のダイアログの**レイアウト**タブでLayouts/Project/MyProject/Mainを選択します。 5. **コントロール**タブで「**追加**」をクリックします。 6. 「 **レンダリングを選択する** 」ダイアログで Renderings/Navigation Renderingをクリックします。 7. **「プレイスホルダーに追加**」フィールドで「Main」をクリックし、「**選択**」をクリックします。 8. **デバイスエディター**のダイアログでOK**をクリックします。** 9. レイアウト**詳細**ダイアログでOK**をクリックします。** ## contentsリゾルバのテスト モデルバウンドビューを始める前に、Sitecoreレイアウトサービスがレンダリングホストへの出力にJSONレンダリングを含むかどうかをテストしてください。 [Getting Startedテンプレートのアイテムやプロジェクトの公開、実行、テスト](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/publish,-run,-and-test-the-getting-started-template-projects.md "Publish, run, and test the Getting Started template projects")方法をご覧ください。 レンダリングエンジンの設定によっては、レンダリングホストページが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、Solution Explorerでは右クリックでRenderingHost/Modelsを右クリックし、「 **追加**、**新しいアイテム**」をクリックします。 2. **「新しいアイテムを追加**」ウィンドウで: - 左側のペインで Installed/Visual C#/ASP.NET Core/Codeをクリックします。 - 中央のパネルで「 **クラス**」をクリックします。 - 名前 **欄の** 下部で NavigationModel.csを入力してください。 - **追加**をクリックします。 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 Children { get; set; } } } > !注Sitecoreフィールドに直接バインディングしないため、モデル内でstringのような単純な型を使うことはできますが、それらを明示的にSitecoreComponentFieldで帰属させる必要があります。 4. クラスファイルを保存してください。 ## モデルバウンドビューを作成する [モデルバウンドビュー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/model-bound-views.html "Model-bound views")はモデルデータをHTMLとしてレンダリングします。 RenderingHostプロジェクトでモデルバウンドビューを作成するには: 1. Visual Studio、Solution Explorerでは右クリックでRenderingHost/Views/Shared/Components/SitecoreComponentを右クリックし、「 **追加**、**新しいアイテム**」をクリックします。 2. **「新しいアイテムを追加**」ウィンドウで: - 左側のペインでInstalled/Visual C#/ASP.NET Core/Webをクリックします。 - 中央のペインで「 **Razor View**」をクリックします。 - 名前 **欄の** 下部でNavigation Rendering.cshtmlを入力してください。 > !重要モデルバウンドビューファイルの名前がJSONレンダリングの名前と一致しない場合、Unknown Componentエラーが発生します。 - **追加**をクリックします。 3. モデルバウンドビューファイルに、以下の内容を追加します: @model NavigationModel 4. モデルバウンドビューファイルを保存してください。 ## モデルバウンドビューを登録してください モデルバウンドビューを[Sitecoreレンダリングエンジン](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/asp-net-core-rendering-engine.html)内のレイアウトサービスコンポーネント名(両方ともNavigation Renderingと呼ばれます)にマッピングする必要があります。 モデルバウンドビューをStartupクラスに登録するには: 1. Visual Studio、Solution ExplorerではStartup.csファイルをダブルクリックします。 2. Startup.csファイルのservices.AddSitecoreRenderingEngine呼び出しで、モデルバウンドビューとモデルをレンダリングエンジンコンポーネントとしてAddModelBoundView()(https://doc.sitecore.com/resources/sitecore-asp-dot-net-rendering-sdk/api/Sitecore.AspNet.RenderingEngine.Extensions.RenderingEngineOptionsExtensions.html#Sitecore\_AspNet\_RenderingEngine\_Extensions\_RenderingEngineOptionsExtensions\_AddModelBoundView\_\_1\_Sitecore\_AspNet\_RenderingEngine\_Configuration\_RenderingEngineOptions\_System\_String\_)メソッドで登録します。 services.AddSitecoreRenderingEngine(options => { //Register your components here options .AddModelBoundView("ContentBlock") .AddModelBoundView("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ファイルを保存してください。 ## モデルバウンドビューの検証 [Getting Startedテンプレートのアイテムやプロジェクトの公開、実行、テスト](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/publish,-run,-and-test-the-getting-started-template-projects.md "Publish, run, and test the Getting Started template projects")方法をご覧ください。 > !ヒントプロジェクト内のREADMEファイルと解決策を確認し、追加情報を確認してください。