Content SDK (Next.js)

Content SDKを使っている場合は、Reactコンポーネントを作成します。このコンポーネントは以下の性質を受け入れます:

• rendering – はコンポーネントの表示(レンダリング)に関する情報を含む。
• params – Sitecoreからコンポーネントに渡されたパラメータを含むオブジェクト。

このコンポーネントは以下のSitecoreパラメータを使用します:

パラメータ

概要

Styles

コンテナ用のCSSクラス。

GridParameters

グリッドシステム用のCSSクラス(例

RenderingIdentifier

分析に使われるコンポーネントの一意識別子です。

さらに、Pagesの右側で設定可能なスタイルを含むコンポーネントを作成した場合、該当するHTML要素のdata-class-change属性を利用できます。Pagesでは、コンテンツ作成者がスタイリングメニューでスタイルを変更すると、その変更はプレビューキャンバスに反映されます。

新しいコンポーネントを作成するには:

1. コードエディタでクローンリポジトリを開いていることを確認してください。

2. /examples/kit-nextjs-skate-park/src/componentsフォルダで新しいファイルを作成し、名前をTitleAndText.tsxにします。

3. 新しいファイルに以下のコードを貼り付けてください:

   import React from 'react'; import { Field, Text } from '@sitecore-content-sdk/nextjs';

   interface Fields { Title: Field; Text: Field; }

   type TitleAndTextProps = { params: { key: string: string }; fields: Fields; };

   export const Default = (props: TitleAndTextProps): React.ReactElement => { const containerStyles = props.params && props.params.styles ? props.params.styles : ''; const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();

   return (

   This container must be refreshed without reloading the page.

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

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

   !注上記のコード例のように、コンポーネントのルート要素にコンポーネントクラスが含まれていることを確認してください(container-default component ${styles})。これにより、ページエディターはキャンバス内のコンポーネントを特定し、リアルタイムでスタイリングの変更を適用できます。このクラスがなければ、右側パネルからのスタイル更新はページリフレッシュ後にのみ効果が発揮されます。

4. ファイルを保存してください。

   !重要ファイルが新しい行で終わるようにしなければ、コンパイルされません。

5. 変更をコミットに追加し、その変更をリポジトリにプッシュします。これにより自動的にSitecoreAIへの展開が開始されます。 Deployアプリで進捗を追跡できます。展開完了後に次のステップに進みましょう。

ASP.NETコアSDK

ASP.NET Core SDKを使っている場合は、C#コンポーネントを作成します。このコンポーネントは以下のSitecoreパラメータを使用します:

パラメータ

概要

Styles

コンテナ用のCSSクラス。

GridParameters

グリッドシステム用のCSSクラス(例

RenderingIdentifier

分析に使われるコンポーネントの一意識別子です。

さらに、Pagesの右側で設定可能なスタイルを含むコンポーネントを作成した場合、該当するHTML要素のdata-class-change属性を利用できます。ページビルダーでは、コンテンツ作成者がスタイリングメニューでスタイルを変更すると、その変更がプレビューキャンバスに反映されます。

新しいコンポーネントを作成するには:

1. 先ほどサイトを作成していたサイトのダッシュボードに戻ります。オプション**メニュー**をクリックし、ページビルダーで編集をクリックしてページを開いてください。最初にエラーが出るのは、Page Builderをローカルの開発者インスタンスに接続する必要があるからです。

2. 「 デフォルトホスト編集 メニュー」をクリックして「 ローカルホスト」を選択してください。

3. ローカルインスタンスに接続する値を入力し、https://localhost:5001、セーブします。ページビルダーはローカルの開発環境と接続され、3つの空のプレースホルダーが表示されます。

   

4. 左側のペインで「コンポーネント」をクリックし、タイトルコンポーネントを見つけてページの中央のプラス記号にドラッグします。

5. キャンバスには最初のページタイトルが表示されます。右側の 「コンテンツ 」タブで「 ページを開くコンテンツ 」をクリックしてフィールド値を編集します。

6. コードエディタでクローンリポジトリを開いていることを確認してください。

7. /headapps/aspnet-core-starter/modelsフォルダ内にTitleAndText.csという新しいファイルを作成します。

8. 新しいファイルに以下のコードを貼り付けてください:

   using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields; using Sitecore.AspNetCore.SDK.RenderingEngine.Binding.Attributes;

   namespace Sitecore.AspNetCore.Starter.Models; public class TitleAndText { SitecoreComponentField public TextField? Title { get; set; }

   SitecoreComponentField public TextField? Text { get; set; } }

9. /headapps/aspnet-core-starter/Views/Shared/Components/SitecoreComponentフォルダ内にTitleAndText.cshtmlという新しいファイルを作成します。

10. 新しいファイルに以下のコードを貼り付けてください:

    @model TitleAndText

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

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

11. /headapps/aspnet-core-starter/Extensions/ServiceCollectionExtensions.csファイルを開き、AddModelBoundViewメソッドに新しいコンポーネントとそのモデルを登録するための呼び出しを追加してください。クラスは次のようになります(追加したTitleAndTextコンポーネントを登録する追加の行に注目してください):

    using Sitecore.AspNetCore.SDK.RenderingEngine.Configuration; using Sitecore.AspNetCore.Starter.Models.LinkList; using Sitecore.AspNetCore.Starter.Models.Navigation; using Sitecore.AspNetCore.Starter.Models.Title;

    namespace Sitecore.AspNetCore.Starter.Extensions;

    public static class ServiceCollectionExtensions { public static RenderingEngineOptions AddStarterKitViews(this RenderingEngineOptions renderingEngineOptions) { renderingEngineOptions.AddModelBoundView

    return renderingEngineOptions; } }

12. 変更をコミットに追加し、その変更をリポジトリにプッシュします。これにより自動的にSitecoreAIへの展開が開始されます。 Deployアプリで進捗を追跡できます。展開完了後に次のステップに進みましょう。