Lightning コンポーネント開発者ガイド
jVisualforce ページへの Lightning コンポーネントの追加
コンポーネントの統合に必要なのは、次の 3 ステップのみです。
- Visualforce ページに <apex:includeLightning /> を追加します。
- 使用する Lightning アプリケーションを Visualforce ページに示します。
- ページでコンポーネントを作成する関数を作成します。
<apex:includeLightning> の追加
ページの先頭に <apex:includeLightning /> を追加します。Visualforce の Lightning コンポーネントを使用するために必要な JavaScript ファイルが読み込まれます。
Lightning アプリケーションの参照
Visualforce 用の Lightning コンポーネントを使用するには、Lightning アプリケーションを参照する必要があります。このアプリケーションはグローバルにアクセス可能で、ltng:outApp を拡張します。アプリケーションによって、使用するすべての Lightning 定義 (コンポーネントなど) の連動関係が宣言されます。次に、lcvfTest.app という簡単なアプリケーションの例を示します。このアプリケーションは <aura:dependency> タグを使用して、標準 Lightning コンポーネントの ui:button を使用することを示します。
1<aura:application access="GLOBAL" extends="ltng:outApp">
2 <aura:dependency resource="ui:button"/>
3</aura:application>このアプリケーションを参照するには、次のマークアップを使用します。theNamespace はアプリケーションの名前空間プレフィックス (組織の名前空間、またはアプリケーションを提供する管理パッケージの名前空間) です。
1$Lightning.use("theNamespace: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: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.createComponent() メソッドで参照される「lightning」という ID で DOM ノードが作成されます。このメソッドでは、「Press Me!」と表示される ui:button が作成され、コールバック関数が実行されます。