---
title: "攻略:データソースを用いた簡単なレンダリング作成"
slug: "walkthrough--creating-a-simple-rendering-with-a-data-source"
abstract: "ヘッドレス開発とASP.NETコアレンダリングSDKを使ってデータソースで簡単なレンダリングを作成する方法。"
---
# 攻略:データソースを用いた簡単なレンダリング作成

> !重要以前にアプリを統合していた場合、それは旧版のASP.NETコアレンダリングSDK(バージョン22以前)を使用しています。このSDKは更新を受け取っていないため、[最新のバージョンへのアップグレード](https://doc.sitecore.com/xmc/en/developers/asp-net/latest/asp-net-core-sdk/upgrade-from-v22.html) をお勧めします。

このウォークスルーでは、Rendering Engine SDKを使うSitecore開発者の最も一般的な作業、すなわち強型モデルオブジェクトにバインドされたデータソースアイテムからコンテンツをレンダリングするビューを作成することを示しています。

このプロセスは [モデルバウンドビュー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/model-bound-views.html "Model-bound views") タイプを用いて行われます。

> !注このウォークスルーは、MyProjectというプロジェクトで[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")テンプレートを使用していることを前提としています。

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

このウォークスルーでは、以下の方法を説明します:

-   [SitecoreでJSONレンダリングを作成してください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-simple-rendering-with-a-data-source.html#UUID-880841bc-63f8-49d2-820f-4feec576fca2_section-idm231953374698334 "Create the JSON rendering in Sitecore")
-   [ビューのモデルを作成する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-simple-rendering-with-a-data-source.html#UUID-880841bc-63f8-49d2-820f-4feec576fca2_section-idm231953375222828 "Create a model for the view")
-   [ビューを作成する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-simple-rendering-with-a-data-source.html#UUID-880841bc-63f8-49d2-820f-4feec576fca2_section-idm231953375506701 "Create the view")
-   [モデルバウンドビューを登録してください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-simple-rendering-with-a-data-source.html#UUID-880841bc-63f8-49d2-820f-4feec576fca2_section-idm231953375956612 "Register the model-bound view")
-   [経験値エディターで値を入力してください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-simple-rendering-with-a-data-source.html#UUID-880841bc-63f8-49d2-820f-4feec576fca2_section-idm231953376439836 "Fill in values in the Experience Editor")

## 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 <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ドキュメント](https://docs.docker.com/engine/reference/commandline/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: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; }
     }
    }
    
    > !注このクラスには、型が から継承されるため自動的にデータバウンドされる5つのプロパティが含まれていますIField。
    

## ビューを作成する

ビューを作成するには:

-   レンダリングホストプロジェクトでViews\\Shared\\Components\\SitecoreComponentの下で新しいDataSourceExample.cshtml Razorビューを作成してください。
    
    > !注これは組み込みのSitecoreビューコンポーネントを使ったモデルバウンドビューのデフォルトの検索パスです。レンダリングエンジンでのビュー登録を簡単にするために、ビュー名はレイアウトサービスコンポーネントの名前(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>
    

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

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

1.  レンダリングホストプロジェクトのStartup.csクラスで、ConfigureServicesメソッドのAddSitecoreRenderingEngine呼び出しを見つけ、モデルバウンドビューを登録します:
    
    services.AddSitecoreRenderingEngine(options =>
     {
     //Register your components here
     options
     .AddModelBoundView<ContentBlockModel>("ContentBlock")
     // Add our DataSourceExample model-bound view:
     .AddModelBoundView<DataSourceExampleModel>("DataSourceExample")
     .AddDefaultPartialView("\_ComponentNotFound");
     })
    
    > !注ここでモデルバウンドビューを登録するために用いる拡張メソッドは、提供されたレイアウトサービスのコンポーネント名がRazorビューファイルの名前と一致することを前提としています。
    
2.  Getting Startedテンプレートを使っている場合、[dotnet watchプロセス](https://docs.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-3.1) が自動的に変更をコンパイルし、レンダリングホストサイトのホームページをリフレッシュしてコンポーネント出力を確認できます。コンポーネントヘッダーとデフォルトのコンテンツ値が表示されます。
    
    > !重要コンパイルエラーがないかレンダリングホストのログを確認してください。
    

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

値を埋めるために:

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

> !注このソリューションを使用する際は以下の点に注意してください:
> 
> -   Platformプロジェクトの公開は、実行中のcmサービスを更新します。
>     
> -   実行中のレンダリングサービスはdotnet watchを使用し、変更を加えた際に自動的に再コンパイルされます。また、Visual Studioから直接renderingプロジェクトを実行することも可能です。
>