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

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>

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>

これでVisualforceページ内にLightningコンポーネントを表示することができました。

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

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

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

開発したLightningComponentの埋め込み

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

参考