自分の部品を持ってきてください
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンテンツ制作者やデザイナーは、Componentsビルダー を使ってSitecoreAIユーザーインターフェース内のコンポーネントを作成、整合、デザイン、スタイリングします。開発者は自Reactやウェブコンポーネントを追加することで、SitecoreAIウェブサイト全体でレンダリングや利用可能にし、シンプルな「自分でコードを持ち込む(BYOC)」ワークフローでこのサービスを充実させることができます。Reactコードやweb componentを作成した後、登録またはスキャフォールディングによってそれをSitecoreAIに持ち込みます。
BYOCにはいくつかの利点があります:
-
BYOCコンポーネントはネイティブコンポーネントのようにインターフェースに表示されますが、Sitecoreはソースや定義にアクセスできず、コンポーネントコードは非公開のままです。Componentsビルダーでテーマを適用し、ドラッグ&ドロップのPagesインターフェースでページに追加できます。これは他のコンポーネントと同じようにです。
-
ローカル開発時にブラウザでホットリロードコードを出し、ページ上で変更点を即座に確認でき、Pagesや最終的なウェブサイトでコンポーネントのレンダリングも含まれます。
-
自分のツールや依存関係、技術を使ってコンポーネントを柔軟に作成できる柔軟性。
-
SitecoreAIサイト間でコンポーネントを再利用できます。
-
設定ユーザーインターフェースは 、あなたが渡したJSONスキーマに基づいて自動的に生成されるため、コンテンツ作成者はPagesのWYSIWYGエディタ内でコンポーネントを設定できます。
BYOCコンポーネントの追加 SitecoreAI
BYOCコンポーネントをSitecoreAIに追加するには、以下の2つの方法のいずれかがあります。
レンダリングモード
BYOCは、お客様のニーズに合わせたさまざまな開発および構成オプションをサポートしています。
クライアントサイド
クライアント側で登録されたコンポーネントをレンダリングすることも可能です。例えば、スマート入力フィールドの追加、動的なコンテンツの表示、その他のインタラクティブな機能などです。クライアントコンポーネントをJSSアプリのbyoc/index.client.tsファイルに追加します。 この例に従うことができます。
ハイブリッド
可能な限りこれが推奨される方法です。このアプローチでは、サーバー側にクライアント側のコンポーネントをプリレンダリングし、初期レンダリング時間とページの検索エンジン最適化を向上させます。ハイブリッド方式はコンポーネントのサーバー側インデックスをサポートし、アプリが完全に初期化される前でも静的デザインを読み込めます。ハイブリッドコンポーネントを使う場合は、この例のようにindex.hybrid.ts内でインポートすることを必ず確認してください。
REST API
REST APIを使ってSitecore Component機能をソリューションに統合したい場合は、Swaggerのドキュメントに従うことができます。