---
title: "ウェブコンポーネントをSitecoreコンポーネントにラップする"
slug: "wrap-a-web-component-in-a-sitecore-component"
abstract: "使い捨てウェブコンポーネントと再利用可能なウェブコンポーネントの違いを説明し、それらをSitecoreコンポーネントにラップする方法を示しています。"
---
# ウェブコンポーネントをSitecoreコンポーネントにラップする

ウェブコンポーネントをSitecoreコンポーネントにラップする方法は2つあります:

-   使い捨てのウェブコンポーネントは、公開ホストされたJavaScriptファイルをロードして直接ビルダーに設定し、そのコンポーネントを起動することで直接作成できます。
    
    使い捨てのウェブコンポーネントはコンポーネントビルダープレビューで自動的にレンダリングされます。また、同じキャンバス上の複数のウェブコンポーネントが同じソースを使う場合、ソースは一度だけ読み込みます。
    
-   再利用可能なウェブコンポーネントは、コード内のregisterComponent[関数呼び出し](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/the-registercomponent-method.html)を使ってレンダリングホスト内で定義できます。
    
    この方法の利点は、ウェブコンポーネントがページビルダーとコンポーネントの両方で独自のサムネイルを持つ他のコンポーネントとして利用可能であることです。フロー registerComponent一環として、コンポーネントのコード内でプロパティスキーマを定義し、ページビルダーの右側のペインで設定設定として利用できるようになります。これにより、コンテンツ作成者やマーケター UIは、ウェブページに挿入されたコンポーネントを簡単に設定できます。
    

## 使い捨てウェブコンポーネントの追加

ウェブコンポーネントを作成するには:

1.  コンポーネントビルダーで、ウェブコンポーネントを追加したいコンポーネントを開きます。
    
2.  使い捨てウェブコンポーネントを追加したい要素をクリックします。
    
3.  右側のペインの一番下で「 **ウェブコンポーネントを作成**」をクリックします。
    
4.  **Webコンポーネント**ダイアログで、このコンポーネントの名前を入力します。
    
5.  **JavaScriptソースURL**欄にJavaScriptソースのURLを入力します。
    
    > !注ファイルは公開されている必要があり、ビルダーに読み込めるようにします。
    > 
    > このファイルにはウェブコンポーネントを動かすために必要なコードのみを含めることをお勧めします。
    > 
    > このコードには、HTML5標準の[customElements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)を使ってウェブコンポーネントを定義する呼び出しを含める必要があります。例えば: customElements.define("my-custom-element", MyCustomElement);。この場合、コンポーネント名はmy-custom-elementなので、コンポーネント名フィールドにこれを入力する必要があります。
    
6.  **「作成**」をクリックします。
    

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

## 再利用可能なウェブコンポーネントを追加してください

[外部ウェブコンポーネントを登録](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/walkthrough--registering-an-external-react-component.html)した後、他のコンポーネントを追加する時と同様に、それをコンポーネントビルダーキャンバスに追加できます。

Sitecoreコンポーネント内に再利用可能なウェブコンポーネントを追加するには:

1.  コンポーネントビルダーでコンポーネントを開くか、新しいコンポーネントを作成します。
2.  コンポーネント内にウェブコンポーネントを追加する方法は2つあります。
    -   ウェブコンポーネントをセクション全体に追加する場合は、コンポーネントエリアのどこかをクリックするとコンテキストツールバーが表示されます。その後、「 **要素を追加**」をクリックします。
    -   特定のコンテナを描きたい場合は、クリックしてドラッグしてコンテナを作成し、その後コンテナをクリックしてください。コンテキストツールバーで「 **要素を追加**」をクリックします。
3.  コンポーネント **要素をクリックし** 、コンテキストツールバーで要素 **内の「追加** 」をクリックします。
4.  右側で、以前登録したウェブコンポーネントをクリックします。コード内で group パラメータで定義されたコレクションで見つけることができます。もしウェブコンポーネントのコレクションをまだ定義していなければ、 **デフォルトコレクション**で見つけることができます。
5.  オプションとして、右側のペインの **「属性** 」をクリックして、ウェブコンポーネントのインスタンスの属性をJSON形式で設定できます。
6.  キャンバスのコンポーネントやPagesではコンポーネントのビジュアルプレビューを見ることはできません。ただし、「 **外部コンポーネントのプレビュー**」をクリックすると、コンポーネントの全要素とレイアウトを含むプレビューを別のブラウザタブで開くことができます。