チュートリアル : データソースを使用した単純なレンダリングの作成

Version:

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

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

大事な

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

このチュートリアルでは、レンダリングエンジンSDKを使用するSitecore開発者の最も一般的なタスクである、厳密に型指定されたモデルオブジェクトにバインドされたデータソースアイテムからコンテンツをレンダリングするビューを作成する方法を示します。

このプロセスは、モデルバインドビュータイプを使用して行われます。

メモ

このチュートリアルでは、Getting StartedテンプレートをMyProjectというプロジェクトで使用していることを前提としています。

この例では、レンダリングホストは、テキスト、リッチテキスト、リンク、日付、画像など、いくつかのフィールドタイプを表示します。

このチュートリアルでは、次の方法について説明します。

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

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

コンテンツエディターで、/sitecore/templates/Project/MyProjectの下にDataSourceExampleという名前の新しいテンプレートを作成します。
新しいテンプレートセクション (名前は重要ではありません) を作成し、次のフィールドを追加します。
- Title: 1行テキスト
- BodyText: リッチテキスト
- FeaturedImage：画像
- PromoLink:一般リンク
- ExampleDate：日付
「ビルダー・オプション」タブで「標準値」をクリックし、「Title」、「BodyText」、「PromoLink」、および「ExampleDate」フィールドにデフォルト値を入力します。
/sitecore/layout/Renderings/Project/MyProjectでDataSourceExampleというJSONレンダリングを作成します。次の値を入力します。
- Datasource Location: ./
- Datasource Template：選ぶ sitecore/Templates/Project/My Project/DataSourceExample
DataSourceExampleレンダリングを/sitecore/layout/Placeholder Settings/Project/MyProject/MyProject-mainプレースホルダーのAllowed Controlsに追加し、「Save」をクリックします。
エクスペリエンスエディターで /sitecore/content/MyProject/Homeを開き、新しいレンダリング (データソースアイテムの作成など) を追加します。

手記

レンダリングホストページでは、レンダリングホストでこのJSONレンダリングにコンポーネントがまだマップされていないため、Unknown componentまたは同様のメッセージが出力されます。
すべてのアイテムの変更を公開します。
- コンテンツエディターのPublishリボンで、Publishアイコンの横にある小さな黒い矢印をクリックし、Publish siteをクリックします。
- Publish Siteウィンドウで、アイテムをMasterデータベースからWebデータベースにパブリッシュするには、Smart publishラジオボタンを選択し、Publishをクリックします。

これで、新しいレンダリングの出力をテストできます。

レンダリングホストで、サイトのホームページを開きます。
PowerShellターミナルに次のコマンドを入力して、レンダリングホストログを取得します。 docker-compose logs -f <rendering-service-name>。 <rendering-app-service-name> プレースホルダーをレンダリングサービスの名前に置き換えます。

先端

Docker Compose V2以降を使用している場合は、コマンドdocker compose logs -f <rendering-app-service-name>を使用できます。

または、コマンドdocker logs -f <container-name>を使用することもできます。

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

レンダリングホストログで、レイアウトサービスの応答 (追加したコンポーネントを含む) を含むデバッグ出力を表示します。

{
    "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:00Z"
        }
    }
}

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

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

レンダリングホストの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; }
    }
}

手記

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

ビューを作成する

ビューを作成するには:

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

手記

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

@model MyProject.Models.DataSourceExampleModel

<h2>Simple Rendering Example</h2>
<h3 asp-for="Title"></h3>
<sc-text asp-for="BodyText"></sc-text>
<div>
    <sc-img asp-for="FeaturedImage"/>
</div>
<p>
    <a asp-for="PromoLink">My Link</a>
</p>
<p asp-for="ExampleDate" date-format="D"></p>

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

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

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

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

手記

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

作業の開始テンプレートを使用している場合は、dotnetウォッチプロセスによって変更が自動的にコンパイルされ、レンダリングホストサイトのホームページを更新してコンポーネントの出力を確認できます。コンポーネントヘッダーとデフォルトのコンテンツ値が表示されます。

大事な

レンダリングホストログでコンパイルエラーを確認する必要があります。

エクスペリエンスエディターで値を入力します

値を入力するには:

エクスペリエンスエディターで、/sitecore/content/MyProject/Homeを開きます。
すべてのフィールドに値を入力します。
「 Save 」をクリックしてPublish。
ホームページを更新し、入力したヘッダーを確認します。

手記

ソリューションを使用するときは、次の点に注意してください。

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

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

チュートリアル : データ ソースを使用した単純なレンダリングの作成

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

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

ビューを作成する

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

エクスペリエンス エディターで値を入力します

チュートリアル : データソースを使用した単純なレンダリングの作成

エクスペリエンスエディターで値を入力します