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="lightning:button"/>
3</aura:application>

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

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

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

最後に、$Lightning.createComponent(String type, Object attributes, String domLocator, function コールバック) を使用して、最上位コンポーネントをページに追加します。この関数は $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("lightning:button",
9              { label : "Press Me!" },
10              "lightning",
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!」というラベルの付いたボタンが作成されます。このボタンは、「lightning」という ID を持つ DOM 要素に挿入されます。ボタンが追加されてページでアクティブになると、コールバック関数が呼び出されて console.log() ステートメントを実行します。コールバックは、作成されたコンポーネントを唯一の引数として受信します。このシンプルな例では、ボタンには何も機能が割り当てられていません。

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