ウォークスルー:外部Reactコンポーネントの登録方法

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

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

SitecoreAIは強力なコンポーネントビルダーインターフェースを含み、デザイナーがコンポーネントの設定、配置、スタイル化に利用できます。コンテンツ作成者はページビルダーを使ってサイトページにコンポーネントを追加できます。コンポーネントビルダーは、一度作成して再利用しながら一貫したテーマを適用することで、サイトのコンテンツを単一ソース化できます。

SitecoreAIでは、コンポーネントにコードを含めたり、JSSでコンポーネントを構築するための他の選択肢もあります。このトピックでは、外部ReactコンポーネントやReactコンポーネントライブラリ全体を参照する方法について説明します。

Component builderは、主にコンテンツ作成者やデザイナーがウェブサイトの再利用可能な要素を作成するために使うローコード/ノーコードのソリューションです。開発者は外部コードベースを参照してコンポーネントを含み、Component builderやPagesインターフェースで使用できるように、自分のコード(BYOC)を持参できます。開発者が登録フローを完了した後、Reactコンポーネントをビルダーに追加できます。その結果：

登録済みコンポーネントはコンポーネントライブラリの一部( プロジェクトプロジェクトにスコープ指定)であり、ページビルダー内で使用・再利用が可能です。
登録済みコンポーネントはComponentビルダーやPage builderでプレビューできます。
コンテンツ作成者はPagesのコンポーネントを使って、定義された入力パラメータの値を入力できます。

スターターファンデーションを使うと、フロントエンドを管理するためのJSSアプリが付属しています。Reactコンポーネントを作成した後、JSSアプリでBYOCのReactコンポーネントを登録します。

外部コンポーネントを参照する前に、コードベースがアクセス可能なレンダリングホストのURL上でホストされていることを確認してください。ローカルで作業し、テスト目的でローカルレンダリングホストを参照することも可能です。

ヒント

このトピックをもっと簡単に理解するために、ComponentsアプリのSettingsタブで「 Rendering host 」をクリックして、そこからコマンドとコードをコピーしてください。

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

コードにregisterComponentメソッドを追加してください。
コンポーネントをインポートします。
レンダリングホストを登録します(オプション)。
外部Reactコンポーネントの登録に関するトラブルシューティング。

コードにregisterComponentメソッドを追加してください

コンポーネントを登録しプロパティを指定するには:

registerComponentメソッドを使ってください。この呼び出しはビルダーがコンポーネントをレンダリングしようとする前に実行されなければなりません。

コンポーネントをインポートします

登録を完了しレンダリング用にするために、BYOCコンポーネントをアプリにインポートする必要があります。JSSバージョン21.6以降は、新しいスターター基盤によって自動的に処理されるようになりました。

JSSバージョン21.5以前を使っている場合は、ツリーシェイク中にコンポーネントが削除されないようにインポートし、副効果のために構文でインポートしてください。 Layout.tsxの上部に置いてください:

import './ExampleHybridComponent

BYOCはJSS以外のアプリでも使えます。この手法を実装したNext.jsの例例はこちらでご覧いただけます。

JSSを使用する場合、BYOCコンポーネントをインポートするためのあらかじめ定義された構造を使うこともでき、適切な文脈でコンポーネントが利用可能であることを保証できます:

クライアント専用コンポーネントの場合は、インポートファイルをsrc/byoc-imports/index.client.tsファイルに追加してください。
ハイブリッドコンポーネントの場合は、インポート文をsrc/byoc-imports/index.hybrid.tsファイルに追加してください。

レンダリングホストを登録する(任意)

ローカル開発や自社編集ホストを使う場合は、Componentビルダー内でレンダリングホストを登録できます。これにより、アプリをSitecoreAIにプッシュすることなくBYOCコンポーネントの開発やデバッグが可能になります。これは任意のステップです。

レンダリングホストを登録するには:

ComponentsのSettingsタブでRendering hostをクリックします。
Set your rendering host欄で、公開されているURLを入力してSaveをクリックします。これによりReactのコードを取得し、Componentsアプリに登録されます。

少し待つと、登録された部品数の更新表示が表示されます。

外部Reactコンポーネントの登録トラブルシューティング

外部Reactコンポーネントを登録すると、サーバー側のCould not find registered BYOC componentエラーとクライアント側(ブラウザ側)のハイドレーションエラーが同時に発生することがあります。

フロントエンド・アズ・ア・サービス(FEAAS)SDKはCommonJSおよびESモジュールをサポートし、JSSはCommonJSを使用します。このエラーは、Next.jsアプリケーションにFEAASとJSSが同じモジュールフォーマットシステムを使用するWebpackプラグインが不足していることを示しています。

誤差を解消するために:

アプリケーションのsrc/lib/next-config/pluginsフォルダ内のプラグインファイルをダウンロードしてください。
アプリケーションを再デプロイしてください。

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