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

Visualforce の Lightning コンポーネントの JavaScript ライブラリの追加

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

Lightning 連動関係アプリケーションの作成および参照

Visualforce の Lightning コンポーネントを使用するには、Lightning 連動関係アプリケーションを参照してコンポーネントの連動関係を定義します。このアプリケーションはグローバルにアクセス可能で、ltng:outApp を拡張します。アプリケーションによって、使用するすべての Lightning 定義 (コンポーネントなど) の連動関係が宣言されます。

1<aura:application access="GLOBAL" extends="ltng:outApp"> 
2    <aura:dependency resource="ui:button"/>
3</aura:application>

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

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

ページでのコンポーネントの作成

最後に、$Lightning.createComponent(String type, Object attributes, String locator, function callback) を使用して、最上位コンポーネントをページに追加します。この関数は $A.createComponent() に似ていますが、コンポーネントの挿入先となる DOM 要素を指定する追加の domLocator パラメータが含まれています。

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

このコードでは、「lightning」という ID を持つ DOM 要素が作成され、$Lightning.createComponent() メソッドで参照されます。このメソッドでは、「Press Me!」と表示される ui:button が作成され、コールバック関数が実行されます。

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