Lightning コンポーネント開発者ガイド
jVisualforce ページへの Lightning コンポーネントの追加
コンポーネントの統合に必要なのは、次の 3 ステップのみです。
- JavaScript ファイルを Visualforce ページに含めます。
- 使用する Lightning アプリケーションを Visualforce ページに示します。
- ページでコンポーネントを作成する関数を作成します。
JavaScript ファイルの包含
デフォルトで組織に事前に読み込まれる /lightning/lightning.out.js という JavaScript ファイルがあります。ページの先頭で <script src="/lightning/lightning.out.js"> または <apex:includeScript value="/lightning/lightning.out.js"> を使用して、Visualforce 用の Lightning コンポーネントを使用します。
Lightning アプリケーションの参照
Visualforce 用の Lightning コンポーネントを使用するには、Lightning アプリケーションを参照する必要があります。これは、ltng:outApp を拡張し他の定義 (コンポーネントなど) との連動関係を宣言する、グローバルにアクセスできるアプリケーションです。次に、lcvfTest.app という簡単なアプリケーションの例を示します。
1<aura:application access="GLOBAL" extends="ltng:outApp">
2 <aura:dependency resource="ui:button"/>
3</aura:application>このアプリケーションを参照するには、次のマークアップ (namespace は組織の名前空間プレフィックス) を使用します。
1$Lightning.use("namespace:lcvfTest", function() {});ページでのコンポーネントの作成
最後に、$Lightning.createComponent(String type, Object attributes, String locator, function callback) を使用して、ページでコンポーネントを作成します。この関数は $A.createComponent() に似ていますが、コンポーネントの挿入先となる DOM ノードの ID を指定する追加の locator パラメータが含まれています。前のステップで lcvfTest.app を使用して ui:button を作成する Visualforce ページのコードを見てみましょう。
1<apex:page>
2 <apex:includeScript value="/lightning/lightning.out.js" />
3 <div id="lightning" />
4 <script>
5 $Lightning.use("namespace:lcvfTest", function() {
6 $Lightning.createComponent("ui:button",
7 { label : "Press Me!" },
8 "lightning",
9 function(cmp) {
10 // do some stuff
11 }
12 );
13 });
14 </script>
15</apex:page>このコードでは、$Lightning.createComponent() メソッドで参照される「lightning」という ID で DOM ノードが作成されます。このメソッドでは、「Press Me!」と表示される ui:button が作成され、コールバック関数が実行されます。