web componentをSitecore componentにラップする

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

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

web componentをSitecore componentにラップする方法は2つあります:

  • 一度きりのweb componentは、公開ホストされたJavaScriptファイルを直接ビルダーに読み込み、その定義と電源を直接ビルダーに入力することで、web componentを直接作成できます。

    使い捨てのウェブコンポーネントは、Componentビルダープレビューで自動的にレンダリングされます。また、同じキャンバス上の複数のウェブコンポーネントが同じソースを使う場合、ソースは一度だけ読み込みます。

  • 再利用可能なウェブコンポーネントは、コード内のregisterComponent関数呼び出しを使ってレンダリングホスト内で定義できます。

    この方法の利点は、web componentがページビルダーとComponentsの両方で、他のコンポーネントと同様に独自のサムネイルを持つように利用可能になることです。 registerComponentフローの一部として、コンポーネントのコード内でプロパティスキーマを定義し、ページビルダーの右側のペインで設定設定として利用できるようになります。これにより、コンテンツ作成者やマーケターは、ウェブページに挿入されたコンポーネントを設定するための使いやすいUIを提供します。

使い捨てのweb componentを追加してください

web componentを作成するには:

  1. Component builderで、web componentを追加したいコンポーネントを開きます。

  2. 使い捨てweb componentを追加したい要素をクリックします。

  3. 右側のペインの一番下で、Create web componentをクリックします。

  4. Web componentダイアログで、このコンポーネントの名前を入力します。

  5. JavaScript source URLフィールドでJavaScriptソースのURLを入力してください。

    注記

    ファイルは公開されている必要があり、ビルダーに読み込めるようにします。

    このファイルにはweb componentを動かすために必要なコードのみを含めることを推奨します。

    このコードには、HTML5標準のcustomElementsを使ってweb componentを定義する呼び出しを含める必要があります。例えば: customElements.define("my-custom-element", MyCustomElement);。この場合、コンポーネント名はmy-custom-elementなので、コンポーネント名フィールドに入力する必要があります。

  6. クリックCreate。

web componentはビルダー内で初期化され表示されます。コンポーネントによって生成されたコンテンツは、直接編集や操作にはアクセスできません。もしコンポーネントがシャドウDOM(CSSスタイルを特定のDOMサブツリーにスコープし、そのサブツリーを文書の他の部分から分離するドキュメントオブジェクトモデル)を使用していない場合、web componentのコンテンツはスタイルガイドが提供するスタイルを引き継ぎます。

再利用可能なweb componentを追加してください

外部web componentを登録した後、他のコンポーネントを追加する時と同様にComponent builderのキャンバスに追加できます。

Sitecore component内に再利用可能なweb componentを追加するには:

  1. Componentビルダーでコンポーネントを開くか、新しいコンポーネントを作成します。

  2. コンポーネント内にweb componentを追加する方法は2つあります:

    • web componentをセクション全体に追加する場合は、コンポーネントエリア内のどこかをクリックするとコンテキストツールバーが表示されます。次に、Add elementをクリックします。

    • 特定のコンテナを描きたい場合は、クリック&ドラッグでコンテナを作成し、その後コンテナをクリックします。コンテキストツールバーでAdd elementをクリックします。

  3. Component要素をクリックし、コンテキストツールバーでその要素Append insideをクリックします。

  4. 右側で、以前登録したweb componentをクリックします。コード内でgroupパラメータで定義されたコレクションで見つけることができます。もしweb componentのコレクションをまだ定義していなければ、Default collectionで見つけることができます。

  5. オプションで、右側のペインのAttributesをクリックして、web componentインスタンスの属性をJSON形式で設定できます。

  6. キャンバスコンポーネントやPagesではコンポーネントのビジュアルプレビューを見ることはできませんが、別のブラウザタブでコンポーネントの全要素とレイアウトを含むプレビューを開くことはPreview external componentsをクリックします。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、