Lightning コンポーネント開発者ガイド
jVisualforce ページでの Lightning コンポーネントの使用
Lightning コンポーネントを Visualforce ページに追加して、両方のソリューションを使用して作成した機能を組み合わせることができます。Lightning コンポーネントを使用して新機能を実装し、それを既存の Visualforce ページで使用できます。
次の 3 ステップで Lightning コンポーネントを Visualforce ページに追加します。
- <apex:includeLightning /> コンポーネントを Visualforce ページに追加する。
- コンポーネントの連動関係を宣言する Lightning アプリケーションを $Lightning.use() を使用して参照する。
- $Lightning.createComponent() を使用してページ上にコンポーネントを作成する関数を記述する。
<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 要素を指定する追加の domLocator パラメータが含まれています。
前の例の 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」という ID を持つ DOM 要素が作成され、$Lightning.createComponent() メソッドで参照されます。このメソッドでは、「Press Me!」と表示される ui:button が作成され、コールバック関数が実行されます。