Visualforce ページでのコンポーネントの使用

Lightning Web コンポーネントを Visualforce ページに追加することで、Visualforce に対して行ってきた投資を活用できます。Lightning Web コンポーネントを使用して新機能を実装し、それを既存の Visualforce ページで使用できます。

Visualforce の Lightning コンポーネントは、Lightning Out (Aura および Lightning Web コンポーネントをほぼすべての Web ページに埋め込むことができる強力かつ柔軟な機能) に基づいています。Visualforce と共に使用すると、いくつのかの細かな要素が簡略化されます。たとえば、認証を処理したり、接続アプリケーションを設定したりする必要がなくなります。

その他の点では、Visualforce の Lightning コンポーネントは Lightning Out と同じように使用できます。詳細は、「Lightning Out」を参照してください。

Important

次の 3 ステップで Lightning Web コンポーネントを Visualforce ページに追加します。

ステップ 1: Visualforce の Lightning コンポーネントを JavaScript ライブラリに追加する

Visualforce ページの先頭に <apex:includeLightning/> を追加します。このコンポーネントは Visualforce の Lightning コンポーネントで使用される JavaScript ファイルを読み込みます。

ステップ 2: スタンドアロン Aura 連動関係アプリケーションを作成して参照する

スタンドアロン Aura 連動関係アプリケーションを作成します。アプリケーションをグローバルにアクセス可能にし、ltng:outApp を拡張します。使用するすべての Lightning 定義 (コンポーネントなど) の連動関係を宣言します。

次の例の Aura 連動関係アプリケーションは <aura:dependency> Aura タグを使用して、標準 Lightning コンポーネントの lightning:button を使用することを示します。

1<!--lwcvf.app-->
2<aura:application access="GLOBAL" extends="ltng:outApp">
3  <aura:dependency resource="lightning:button" />
4</aura:application>

使用するすべての Lightning Web コンポーネントに <aura:dependency> タグを追加します。<namespace:camelCaseComponentName> 命名規則を使用して、カスタム Lightning Web コンポーネントを参照します。

ltng:outApp から拡張すると、SLDS リソースがページに追加されて、Salesforce Lightning Design System (SLDS) でコンポーネントのスタイルを設定できるようになります。SLDS リソースをページに追加しない場合、代わりに ltng:outAppUnstyled から拡張します。

Note

このアプリケーションを Visualforce ページで参照するには、次の JavaScript コードを使用します。theNamespace はアプリケーションの名前空間プレフィックスです。つまり、組織の名前空間か、アプリケーションを提供する管理パッケージの名前空間のいずれかになります。

1$Lightning.use("theNamespace:lwcvf", function () {});

アプリケーションが組織で定義されている場合 (管理パッケージに含まれていない場合)、次の例に示すように、代わりにデフォルトの c 名前空間を使用します。組織で名前空間が定義されていない場合は、デフォルトの名前空間を_使用する必要があります_。

Lightning 連動関係アプリケーションの作成についての詳細は、「Lightning Out の連動関係」を参照してください。

ステップ 3: Visualforce ページ上にコンポーネントを作成する

最後に、$Lightning.createComponent(String type, Object attributes, String domLocator, function callback) を使用して、最上位コンポーネントをページに追加します。

前の例の lwcvf.app を使用して lightning:button を作成するサンプル Visualforce ページを見てみましょう。

1<apex:page>
2    <apex:includeLightning />
3
4    <div id="lightningvf" />
5
6    <script>
7        $Lightning.use("c:lwcvf", function() {
8          $Lightning.createComponent("lightning:button",
9              { label : "Press Me!" },
10              "lightningvf",
11              function(cmp) {
12                console.log("button was created");
13                // do some stuff
14              }
15          );
16        });
17    </script>
18</apex:page>

$Lightning.createComponent() コールにより「Press Me!」というラベルの付いたボタンが作成されます。このボタンは、lightningvf という ID を持つ DOM 要素に挿入されます。ボタンが追加されてページでアクティブになると、コールバック関数が呼び出されて console.log() ステートメントを実行します。コールバックは、作成されたコンポーネントを唯一の引数として受信します。このシンプルな例では、ボタンには何も機能が割り当てられていません。

ページ上で $Lightning.use() を複数回コールできますが、すべてのコールで同じスタンドアロン Aura 連動関係アプリケーションを参照する必要があります。

Important

$Lightning.use() および $Lightning.createComponent() の使用についての詳細は、「Lightning Out のマークアップ」を参照してください。

ブラウザのサードパーティ Cookie

Lightning コンポーネントは、ユーザのブラウザに Cookie を設定します。Lightning コンポーネントと Visualforce は異なるドメインから提供されるため、これらの Cookie は「サードパーティ」 Cookie となります。ユーザは、ブラウザ設定でサードパーティの Cookie を許可する必要があります。Safari の [サイト越えトラッキングを防ぐ] 設定を無効にする要件を含む詳細は、「Lightning Out の要件」を参照してください。

関連トピック

Lightning Out による Salesforce 外でのコンポーネントの使用 (ベータ)

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。