---
title: "コンポーネントの埋め込みコードを入手してください"
slug: "get-the-embedding-code-of-a-component"
abstract: "ローコードコンポーネントの埋め込みコードを入手すれば、Sitecore外のウェブページ作成にも使えます。"
---
# コンポーネントの埋め込みコードを入手してください

コンポーネントビルダーで組み込まれたコンポーネントを他のページビルダーで使うことが可能です。これはコンポーネントのコードをコピーして、好きな場所に貼り付けることで行います。

コンポーネントの埋め込みコードを取得するには:

1.  コンポーネントとその全バージョンを埋め込むには、「 **埋め込みコードを取得**」をクリックしてください。このボタンはさまざまな場所で見つけることができます:
    -   コンポーネントビルダーで、埋め込みコードを取得したいバージョンの右側にある :mdiDotsHorizontal: をクリックしてください。
    -   コンポーネントビルダーで、UIのコンポーネントキャンバス外のどこかをクリックすると **概要** ペインを開きます。
2.  **埋め込みコード**ダイアログのドロップダウンメニューでは、埋め込みコードを入手できるすべてのバージョンやバンドルを見ることができます。以下のいずれかをクリックしてください:
    -   **特定バージョン** - スタンドアロンの特定バージョンのコードを表示するために。
    -   **Bundle** - コンポーネントのすべてのバージョンのコードを異なるブレークポイントで表示します。
3.  埋め込みたいコードを選択するには、以下のいずれかをクリックしてください。
    -   **公開済み** - これは現在Sitecore Edgeに保存されているコンポーネントです。
    -   **ステージ** - これは現在Pagesで利用可能なコンポーネントのコードです。
4.  コードの使い方を選ぶには、 **React**、 **React Server**、 **Web Component**、 **またはDOM API**のいずれかをクリックしてください。
5.  データソースを使用するコンポーネントについては、データの使い方を決めることができます:
    -   サンプル **データ** をクリックすると、コード内でデータソースからのデータをパッケージ化できます。つまり、データはもはや自己更新しません。
    -   「 **Fetch** 」をクリックすると、サーバーやネットワークの場所からデータを取得するコードを生成できます。
    -   「 **データなし** 」をクリックすると、データなしで埋め込みコードを取得できます。
6.  typescriptを埋め込みコードから削除するには、 **Typescript** スイッチオフをクリックしてください。typescriptコードを削除するということは、typescriptポストプロセッサがない場所(例えばウェブページやコンテンツ管理システムに直接)にコンポーネントコードを貼り付けることを意味します。
7.  リソース取得(スタイルシートおよび/またはJavaScript)は、挿入されたページの読み込み中に行われます。これにより、コンポーネントのレンダリングがより速くなり、動的なクライアント側のみのレンダリングが可能になります。ただし、JSSを使う場合は、リソースフェッチを無効にするために **Preload** のリソーススイッチをオフにできます。JSSのすべてはサーバー上でレンダリングされ、スタイルシートはページの一部として読み込まれます。
8.  オプションとして、[Codepen](https://codepen.io/)でコンポーネントを**プレビュー**することもできます。
9.  「 **コードをコピー**」をクリックします。

![Screenshot of the Embedding code dialog](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/2023-12-06_14-54-08.png)

コンポーネントの埋め込みコードを任意のページビルダーコードに貼り付けることができます。