Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jVisualforce ページでの Lightning コンポーネントの使用
- <apex:includeLightning/> コンポーネントを使用して、Visualforce 用 Lightning コンポーネントの JavaScript ライブラリを Visualforce ページに追加します。
- コンポーネントの連動関係を宣言する Lightning アプリケーションを作成して参照します。
- $Lightning.createComponent() を使用して、ページにコンポーネントを作成する JavaScript 関数を記述します。
Visualforce の Lightning コンポーネントの JavaScript ライブラリの追加
ページの先頭に <apex:includeLightning/> を追加します。このコンポーネントは Visualforce の Lightning コンポーネントで使用される JavaScript ファイルを読み込みます。
Lightning 連動関係アプリケーションの作成および参照
Visualforce の Lightning コンポーネントを使用するには、Lightning 連動関係アプリケーションを参照してコンポーネントの連動関係を定義します。このアプリケーションはグローバルにアクセス可能で、ltng:outApp を拡張します。アプリケーションによって、使用するすべての Lightning 定義 (コンポーネントなど) の連動関係が宣言されます。
Lightning 連動関係アプリケーションの作成についての詳細は、「Lightning Out の連動関係」を参照してください。
ページでのコンポーネントの作成
最後に、$Lightning.createComponent(String type, Object attributes, String domLocator, function コールバック) を使用して、最上位コンポーネントをページに追加します。この関数は $A.createComponent() に似ていますが、コンポーネントの挿入先となる DOM 要素を指定する追加の domLocator パラメータが含まれています。
$Lightning.createComponent() コールにより「Press Me!」というラベルの付いたボタンが作成されます。このボタンは、「lightning」という ID を持つ DOM 要素に挿入されます。ボタンが追加されてページでアクティブになると、コールバック関数が呼び出されて console.log() ステートメントを実行します。コールバックは、作成されたコンポーネントを唯一の引数として受信します。このシンプルな例では、ボタンには何も機能が割り当てられていません。
$Lightning.use() および $Lightning.createComponent() の使用についての詳細は、「Lightning Out のマークアップ」を参照してください。