攻略

SitecoreでJSONレンダリングを作成してください

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

1. コンテンツエディターで、/sitecore/templates/Project/MyProjectの下に「DataSourceExample」という新しいテンプレートを作成します。

2. 新しいテンプレートセクション(名前は重要ではありません)を作成し、以下のフィールドを追加してください:

   • Title
   • BodyText
   • FeaturedImage
   • PromoLink
   • ExampleDate

3. ビルダーオプションタブで**「Standard Values**」をクリックし、「Title」「BodyText」「PromoLink」「ExampleDate」の各欄にデフォルト値を入力します。

4. /sitecore/layout/Renderings/Project/MyProjectでDataSourceExampleというJSONレンダリングを作成します。以下の値を入力します。

   • データソースの所在地:./
   • データソーステンプレート
     sitecore/Templates/Project/My Project/DataSourceExample

5. DataSourceExampleレンダリングを/sitecore/layout/Placeholder Settings/Project/MyProject/MyProject-mainのプレースホルダーの許可コントロールに追加し、「保存」をクリックします。

6. Experience Editorで /sitecore/content/MyProject/Homeを開き、新しいレンダリングを追加し、データソース項目も作成してください。

   !注レンダリングホストのページはUnknown componentや類似のメッセージを出力します。なぜなら、まだレンダリングホストでこのJSONレンダリングにコンポーネントをマッピングしていないからです。

7. すべてのアイテム変更を公開する:

   • コンテンツエディターの 「公開 」リボンの上で、「 公開 」アイコンの横にある小さな黒い矢印をクリックし、「 公開サイト」をクリックしてください。
   • Publish Siteウィンドウで、MasterデータベースからWebデータベースへのアイテム公開にはSmart Publishラジオボタンを選択し、「Publish」をクリックします。

8. 新しいレンダリングの出力をテストできます:

   • レンダリングホストでサイトのホームページを開きます。

   • PowerShellターミナルに以下のコマンドを入力してレンダリングホストログを取得してください: docker-compose logs -f . のプレースホルダーをレンダリングサービス名に置き換えます。

     !ヒントDocker Compose V2以降を使う場合は、コマンドdocker compose logs -f を使えます。

     あるいは、コマンドdocker logs -f を使うこともできます。

     Dockerコマンドの詳細については、公式のDocker CLIドキュメントを参照してください。

   • レンダリングホストログで、Layout Serviceの応答を含むデバッグ出力、追加したコンポーネントを表示してください:

     { "uid": "8654d7f9-6df3-4d32-835a-92d4d65e6efc", "componentName": "DataSourceExample", "dataSource": "{3BC54537-E31D-4C9B-A230-088F92F3A0EF}", "params": {}, "fields": { "BodyText": { "value": "Default" }, "FeaturedImage": { "value": {} }, "Title": { "value": "Default" }, "PromoLink": { "value": { "href": "/en/", "text": "", "anchor": "", "linktype": "internal", "class": "", "title": "", "querystring": "", "id": "{453C1C1A-7E24-4F2F-8069-84165C6130A3}" } }, "ExampleDate": { "value": "2020-08-07T04:00

     " } } }

ビューのモデルを作成する

ビューのモデルを作成するには:

• レンダリングホストのModelsフォルダに、DataSourceExampleModel: という新しいクラスを作成します。

  using Sitecore.LayoutService.Client.Response.Model.Fields;

  namespace MyProject.Models { public class DataSourceExampleModel { public TextField Title { get; set; } public RichTextField BodyText { get; set; } public ImageField FeaturedImage { get; set; } public HyperLinkField PromoLink { get; set; } public DateField ExampleDate { get; set; } } }

  !注このクラスには、型が から継承されるため自動的にデータバウンドされる5つのプロパティが含まれていますIField。

ビューを作成する

ビューを作成するには:

• レンダリングホストプロジェクトでViews\Shared\Components\SitecoreComponentの下で新しいDataSourceExample.cshtml Razorビューを作成してください。

  !注これは組み込みのSitecoreビューコンポーネントを使ったモデルバウンドビューのデフォルトの検索パスです。レンダリングエンジンでのビュー登録を簡単にするために、ビュー名はレイアウトサービスコンポーネントの名前(JSONレンダリング)と同じにすることを推奨します。

  @model MyProject.Models.DataSourceExampleModel

  Simple Rendering Example

  My Link

モデルバウンドビューを登録してください

モデルバウンドビューを登録するには:

1. レンダリングホストプロジェクトのStartup.csクラスで、ConfigureServicesメソッドのAddSitecoreRenderingEngine呼び出しを見つけ、モデルバウンドビューを登録します:

   services.AddSitecoreRenderingEngine(options => { //Register your components here options .AddModelBoundView("ContentBlock") // Add our DataSourceExample model-bound view: .AddModelBoundView("DataSourceExample") .AddDefaultPartialView("_ComponentNotFound"); })

   !注ここでモデルバウンドビューを登録するために用いる拡張メソッドは、提供されたレイアウトサービスのコンポーネント名がRazorビューファイルの名前と一致することを前提としています。

2. Getting Startedテンプレートを使っている場合、dotnet watchプロセス が自動的に変更をコンパイルし、レンダリングホストサイトのホームページをリフレッシュしてコンポーネント出力を確認できます。コンポーネントヘッダーとデフォルトのコンテンツ値が表示されます。

   !重要コンパイルエラーがないかレンダリングホストのログを確認してください。

経験値エディターで値を入力してください

値を埋めるために:

1. エクスペリエンスエディターで /sitecore/content/MyProject/Home を開いてください。
2. すべての項目の値を埋めてください。
3. 「保存して公開」をクリックしてください。
4. ホームページをリフレッシュして、入力したヘッダーを確認してください。

!注このソリューションを使用する際は以下の点に注意してください:

• Platformプロジェクトの公開は、実行中のcmサービスを更新します。

• 実行中のレンダリングサービスはdotnet watchを使用し、変更を加えた際に自動的に再コンパイルされます。また、Visual Studioから直接renderingプロジェクトを実行することも可能です。