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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連トピック