ウェブコンポーネントをSitecoreコンポーネントにラップする
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ウェブコンポーネントをSitecoreコンポーネントにラップする方法は2つあります:
-
使い捨てのウェブコンポーネントは、公開ホストされたJavaScriptファイルをロードして直接ビルダーに設定し、そのコンポーネントを起動することで直接作成できます。
使い捨てのウェブコンポーネントはコンポーネントビルダープレビューで自動的にレンダリングされます。また、同じキャンバス上の複数のウェブコンポーネントが同じソースを使う場合、ソースは一度だけ読み込みます。
-
再利用可能なウェブコンポーネントは、コード内のregisterComponent関数呼び出しを使ってレンダリングホスト内で定義できます。
この方法の利点は、ウェブコンポーネントがページビルダーとコンポーネントの両方で独自のサムネイルを持つ他のコンポーネントとして利用可能であることです。フロー registerComponent一環として、コンポーネントのコード内でプロパティスキーマを定義し、ページビルダーの右側のペインで設定設定として利用できるようになります。これにより、コンテンツ作成者やマーケター UIは、ウェブページに挿入されたコンポーネントを簡単に設定できます。
使い捨てウェブコンポーネントの追加
ウェブコンポーネントを作成するには:
-
コンポーネントビルダーで、ウェブコンポーネントを追加したいコンポーネントを開きます。
-
使い捨てウェブコンポーネントを追加したい要素をクリックします。
-
右側のペインの一番下で「 ウェブコンポーネントを作成」をクリックします。
-
Webコンポーネントダイアログで、このコンポーネントの名前を入力します。
-
JavaScriptソースURL欄にJavaScriptソースのURLを入力します。
!注ファイルは公開されている必要があり、ビルダーに読み込めるようにします。
このファイルにはウェブコンポーネントを動かすために必要なコードのみを含めることをお勧めします。
このコードには、HTML5標準のcustomElementsを使ってウェブコンポーネントを定義する呼び出しを含める必要があります。例えば: customElements.define("my-custom-element", MyCustomElement);。この場合、コンポーネント名はmy-custom-elementなので、コンポーネント名フィールドにこれを入力する必要があります。
-
「作成」をクリックします。
ウェブコンポーネントはビルダー内で初期化され表示されます。コンポーネントによって生成されたコンテンツは、直接編集や操作にはアクセスできません。もしコンポーネントがシャドウDOM(CSSスタイルを特定のDOMサブツリーにスコープし、そのサブツリーを文書の他の部分から分離するドキュメントオブジェクトモデル)を使用しない場合、ウェブコンポーネントのコンテンツはスタイルガイドが提供するスタイルを引き継ぎます。
再利用可能なウェブコンポーネントを追加してください
外部ウェブコンポーネントを登録した後、他のコンポーネントを追加する時と同様に、それをコンポーネントビルダーキャンバスに追加できます。
Sitecoreコンポーネント内に再利用可能なウェブコンポーネントを追加するには:
- コンポーネントビルダーでコンポーネントを開くか、新しいコンポーネントを作成します。
- コンポーネント内にウェブコンポーネントを追加する方法は2つあります。
- ウェブコンポーネントをセクション全体に追加する場合は、コンポーネントエリアのどこかをクリックするとコンテキストツールバーが表示されます。その後、「 要素を追加」をクリックします。
- 特定のコンテナを描きたい場合は、クリックしてドラッグしてコンテナを作成し、その後コンテナをクリックしてください。コンテキストツールバーで「 要素を追加」をクリックします。
- コンポーネント 要素をクリックし 、コンテキストツールバーで要素 内の「追加 」をクリックします。
- 右側で、以前登録したウェブコンポーネントをクリックします。コード内で group パラメータで定義されたコレクションで見つけることができます。もしウェブコンポーネントのコレクションをまだ定義していなければ、 デフォルトコレクションで見つけることができます。
- オプションとして、右側のペインの 「属性 」をクリックして、ウェブコンポーネントのインスタンスの属性をJSON形式で設定できます。
- キャンバスのコンポーネントやPagesではコンポーネントのビジュアルプレビューを見ることはできません。ただし、「 外部コンポーネントのプレビュー」をクリックすると、コンポーネントの全要素とレイアウトを含むプレビューを別のブラウザタブで開くことができます。