1. 開発者向けのドキュメント

最初のコンポーネントを組み立てましょう

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

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

Timing 20分

これは 入門ウォークスルーシリーズの第4部です。ここでの手順を完了する前に、プロジェクトと環境を作成し、サイトとページを作成し、ローカル開発環境を整えていることを確認してください。

この例では、タイトルとテキストを含むコードコンポーネントを追加します。コンポーネントを作成するには、SitecoreAIに付属している既存のコンポーネントのうち1つをクローンします。既存のコンポーネントをクローンすることで、必要なボイラープレートアイテムや設定を作成することで開発時間を節約でき、必要なベーステンプレートがページビルダーのコンテンツ作成機能をサポートするように設定されていることを確認できます。

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

  1. 新しいコンポーネントを作成してデプロイする

  2. レンダリング定義を作成する

  3. そのコンポーネントをあなたのサイトページに追加してください

新しいコンポーネントを作成してデプロイする

最初のステップでは、ローカルプロジェクトでコンポーネント構造を作成します。

Content SDK (Next.js)

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

  • rendering – はコンポーネントの表示(レンダリング)に関する情報を含む。

  • params – Sitecoreからコンポーネントに渡されたパラメータを含むオブジェクト。

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

パラメータ

概要

Styles

コンテナ用のCSSクラス。

GridParameters

グリッドシステム用のCSSクラス(例:Bootstrap)。

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<string>;
  Text: Field<string>;
}

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 (
    <div className={`container-default component ${styles}`}>
      <div data-class-change className={containerStyles}>
        This container must be refreshed without reloading the page.
      </div>
      <h1 className="component-content title row">
        <Text field={props.fields.Title} />
      </h1>
      <div className="component-content text row">
        <Text field={props.fields.Text} />
      </div>
    </div>
  );
};

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

    大事な

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

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

ASP.NETコアSDK

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

パラメータ

概要

Styles

コンテナ用のCSSクラス。

GridParameters

グリッドシステム用のCSSクラス(例:Bootstrap)。

RenderingIdentifier

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

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

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

  1. 先ほどサイトを作成していたSitesダッシュボードに戻ってください。 Options メニューをクリックし、Edit in Page builderをクリックしてPagesを開きます。最初はエラーが表示されます。なぜなら、Pagesをローカルの開発者インスタンスに接続する必要があるからです。

  2. Default editing hostメニューをクリックしてLocal hostを選択してください。

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

    Pages connected to your local host to get started with ASP.NET

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

  5. キャンバスには最初のページタイトルが表示されます。右側のContentタブでOpen Page contentをクリックしてフィールド値を編集します。

  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

<div class="container-default">
	<h1 class="component title row">
		<sc-text asp-for="@Model.Title" />
	</h1>
	<div class="component text row">
		<sc-text asp-for="@Model.Text" />
	</div>
</div>

  11. /headapps/aspnet-core-starter/Extensions/ServiceCollectionExtensions.csファイルをOpenし、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<Title>("Title")
			.AddModelBoundView<Container>("Container")
			.AddModelBoundView<ColumnSplitter>("ColumnSplitter")
			.AddModelBoundView<RowSplitter>("RowSplitter")
			.AddModelBoundView<PageContent>("PageContent")
			.AddModelBoundView<RichText>("RichText")
			.AddModelBoundView<Promo>("Promo")
			.AddModelBoundView<LinkList>("LinkList")
			.AddModelBoundView<Image>("Image")
			.AddModelBoundView<PartialDesignDynamicPlaceholder>("PartialDesignDynamicPlaceholder")
			.AddModelBoundView<Navigation>("Navigation")
			.AddModelBoundView<TitleAndText>("TitleAndText");

		return renderingEngineOptions;
	}
}

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

レンダリング定義を作成する

これでコンポーネントのレンダリング定義を作成できます。レンダリング定義は、コンポーネントの.tsxファイルがプロジェクト内でどこにあるか、そして正しくレンダリングするために必要なデータをSitecoreAIに伝えるために使われます。既存のレンダリングをクローンすることで、手動で処理する代わりに必要なアイテムを自動的に生成できます。その後、サイトコレクション作成時に作成したヘッドレスモジュールにレンダリングを追加します。モジュールは/sitecore/system/Settings/Projectで見つけることができます。

コンポーネントをクローンするには:

  1. Cloud Portalで、先ほど作成した環境のタイルをクリックしてください。例えばGetting Started。

  2. 右側のペインで「 Open app」をクリックします。

  3. 上部メニューバーでContentをクリックし、Content Editorをクリックします。

  4. Content Editorでは、/sitecore/layout/Renderings/Feature/Headless Experience Accelerator/Page Content/Rich Textへナビゲーションします。 ContentタブでCustomize Pageセクションまでスクロールし、コンポーネントがPagesで見えるようにするために、Editableチェックボックスが選択されていることを確認してください。

    Rich Text component window showing checked editable check box

  5. Rich Textと名付けられたレンダリングを右クリックして、Scripts > Clone Renderingをクリックします。

  6. Create derivative renderingウィンドウで、以下を指定します:

    • Generalタブで名前を入力してくださいTitleAndText。

    • GeneralタブのAdd to module欄でRenderings/Project/Getting Started/Getting Started Contentを選択します。

    • ParametersタブでMake a copy of original rendering parametersを選択します。これによりレンダリングが元のコンポーネントから切り離され、依存関係が減ります。

    • DatasourceタブのDatasource欄でMake a copy of original datasourceを選択します。

    The Create derivative rendering window used when cloning the Rich Text rendering in the Content Editor

  7. Proceedをクリックし、処理が終わったらウィンドウを閉じます。

  8. /sitecore/templates/Project/Getting Started/Getting Started Content/Textに移動し、Builderタブで作成したフィールドの値を変更してください:

    • Title - 選択Single-Line Text。

    • Text - 選択Multi-Line Text。

    Defining the fields in the new title and text component in the Content Editor

  9. 両方のフィールドでSource列が空であることを確認しましょう。

  10. 左上隅でSaveをクリックします。

    Save icon in Content Editor

  11. /sitecore/content/Getting Started/Getting Started/Presentation/Available Renderingsへナビゲート。

  12. Available Renderingsアイテムを右クリックしてInsert > Available Renderingsをクリックします。

  13. 新しいアイテムの名前をGetting Started Contentし、OKをクリックします。新しいアイテムは自動的に開きます。

  14. Renderings欄でEditをクリックします。

  15. 左側の木で、以前作成したレンダリングアイテムを見つけて選択 /Layout/Renderings/Project/Getting Started/Getting Started Content/TitleAndText。矢印をクリックして右側のリストに移動し、その後OKをクリックします。

    Edit the rendering to include the new title and text component

  16. 左上隅でSaveをクリックします。

  17. メインのSitecoreAIダッシュボードに戻るには、Launchpad をクリックしてください。

そのコンポーネントをあなたのサイトページに追加してください

この段階で、新しいコンポーネントの必要な設定が完了しており、サイトで使用可能になります。このステップでPagesに戻り、以前作成したページにコンポーネントを追加すれば、ローカル開発インスタンスで確認できるようになります。

サイトページにコンポーネントを追加するには:

  1. メインChannelsダッシュボードで新しいサイトタイルにカーソルを合わせ、Page builderをクリックします。あるいは、新しいブラウザタブでhttps://pages.sitecorecloud.io/を開きます。

  2. ComponentsタブのGetting Started Contentセクションで、TitleAndTextコンポーネントが見えます。ページのプラスアイコンのいずれかにドラッグします。これでページ上にコンポーネントがレンダリングされ、タイトルフィールドとテキストフィールドのインジケートがNo text in field表示されるはずです。

  3. タイトル欄とテキスト欄にテキストを入力してください。

  4. ブラウザでローカルホストに移動し、入力したテキストで新しいコンポーネントがレンダリングされるのを確認してください(Content SDKはhttp://localhost:3000/ 、.NETの場合はhttp://localhost/5001/)。

ウォークスルーシリーズをクリアしましたね!これで新しいコンポーネントの作成を続け、ローカルで変更をテストし、ソース管理プロバイダーにプッシュできます。これによりSitecoreAIでのデプロイが始まり、新しいコンポーネントがPage Builderで利用可能になります。

ヘッドアプリケーション内の単一のコンポーネントに関する情報を格納するための構成項目です。サイトページは複数のレンダリングで構成されています。 renderingという用語は、レンダリングがコンポーネント定義の一部であるにもかかわらず、componentとしばしば同義で使われます。レンダリングはContent Editor、/sitecore/layout/Renderings/Featureで定義されます。

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