---
schema_version: "1"
id: 3702b514e7f0a3e909074f6f9b921b0d81693ba86c9b4789cf68c35fbab79be1
title: 外部サイトでの Lightning Out
collection: architect
version: next
locale: ja-jp
portal_url: https://docs.salesforce.com/architect/next/ja-jp/reference-diagrams/guides/lightning-out-on-external-sites.md
canonical_url: https://staging.architect.salesforce.com/docs/architect/ja-jp/reference-diagrams/guide/lightning-out-on-external-sites.html
source_site: staging.architect.salesforce.com
content_type: documentation
content_hash: 0ac1050451018a2534256e6e8f506e9472a17cf7fb1f676aa6f58d9892e17e7f
products:
  - 参照図
  - Architect Site Content Repo
---
# 外部サイトでの Lightning Out

<img style="border:1px solid #e5e5e5;margin:2rem 0rem" src="https://architect.salesforce.com/ns-assets/reference-architectures/lightning-out-on-external-sites.webp" alt="外部サイトでの Lightning Out - これは、『 Building Forms Decision Guide 』のソリューション アーキテクチャの例で、Lightning Out を使用して LWC コンポーネントを外部 Web サイト内に埋め込む方法を示しています。Lightning Out アプリケーションを設定するには、Lightning Out JavaScript ライブラリを元のサーバのページに含めます。次に、Lightning Out アプリケーションとそのコンポーネントを読み込むマークアップを追加します。Lightning Out アプリケーションは安全な接続を介して初期化され、ページの DOM に挿入されます。">

## 説明

これは、『Building Forms Decision Guide (建物形態決定ガイド)』のソリューションアーキテクチャの例であり、Lightning Out を使用して LWC コンポーネントを外部 Web サイト内に埋め込む方法を示しています。Lightning Out アプリケーションを設定するには、元のサーバのページに Lightning Out JavaScript ライブラリを含めます。次に、Lightning Out アプリケーションとそのコンポーネントを読み込むマークアップを追加します。Lightning Out アプリケーションが安全な接続を介して初期化され、ページの DOM に挿入されます。

## ダウンロード可能なリンク:

- [Lucid](https://lucid.app/lucidchart/editNew/ecd1a401-ee27-4f75-86f5-d5a1cabb1a4d)
- [画像](https://architect.salesforce.com/ns-assets/legacy/location.png)