SFDC：apex:includeLightningを試してみました

Lightning ComponentをVisualforceページ内に表示できるapex:includeLightningを試してみました。

f:id:tyoshikawa1106:20151123155950p:plain

Add Lightning Components to Visualforce Pages | Lightning Components Developer's Guide | Salesforce Developers

1. Lightning Applicationを作成

まず、Lightningアプリケーションを用意します。『extends="ltng:outApp"』を宣言することでVisualforceページで呼び出せるみたいです。『aura:dependency』には表示したいコンポーネントを指定します。今回は標準コンポーネントのui:buttonを表示してみます。

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="ui:button"/>
</aura:application>

f:id:tyoshikawa1106:20151123160724p:plain

2. Visualforce Pageを作成

extends="ltng:outApp"を宣言したLightningアプリケーションを用意できたらVisualforceページを作成します。

<apex:page showHeader="true" sidebar="false">
    <apex:includeLightning />
    <div id="vf-page">
    	<div id="lightningUiButton" />    
    </div>
    <script type="text/javascript">
        $Lightning.use("c:LightningOutSampleApp", function() {
          $Lightning.createComponent("ui:button",
          { label : "Lightning UI Button Component" },
          "lightningUiButton",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>

f:id:tyoshikawa1106:20151123161450p:plain

これでVisualforceページ内にLightningコンポーネントを表示することができました。
f:id:tyoshikawa1106:20151123170023p:plain

処理の概要

apex:includeLightning

これを宣言するとLightningComponentをVF内で表示するためのJSが利用できるみたいです。以前は次のように記述する必要がありました。

<!-- 以前の書き方 -->
<apex:includeScript value="/lightning/lightning.out.js"/>

<div id="lightningUiButton" />

このdivタグがLightningComponentに置き換わります。

scriptタグ

最後のscriptタグの処理でVisualforceページ内にLightningComponentを表示するための処理を行っています。

$Lightning.useタグ
- 『extends="ltng:outApp"』を宣言したLightningアプリケーションを指定します。
$Lightning.createComponentタグ
- 表示したいコンポーネントを指定します。
{ label : "Lightning UI Button Component" }
- コンポーネントのパラメータを指定します。
"lightningUiButton"
- LightningComponentに変換したいdivタグなどのIDを指定しています。
function(cmp)
- 何か処理を実装できると思うのですが、確認できていません。

以上が、apex:includeLightningを利用したLightning ComponentをVisualforceページに表示する際の手順になります。

複数コンポーネントの表示

先ほど1つのコンポーネント表示を試してみましたが、これが複数だった場合どうすればいいか確認してみました。次のように記述すればいいみたいです。

Lightning Application

f:id:tyoshikawa1106:20151123163206p:plain

Visualforce Page

f:id:tyoshikawa1106:20151123163235p:plain

これで2つのコンポーネント表示を行うことができました。
f:id:tyoshikawa1106:20151123163419p:plain

開発したLightningComponentの埋め込み

上記ではSalesforceの標準コンポーネントを埋め込んでみました。最後に自分で開発したコンポーネントの埋め込みを試してみます。

Lightning Application

f:id:tyoshikawa1106:20151123163942p:plain

Visualforce Page

f:id:tyoshikawa1106:20151123164013p:plain

・・・表示されたことはされたのですが、Salesforceの標準スタイルに干渉してしまったみたいです。(背景の青色部分が白になったりしています。)標準コンポーネントのときには平気だったので開発で利用しているCSSが原因と思われます。
f:id:tyoshikawa1106:20151123164045p:plain