読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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

salesforce.com Lightning

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


こちらLightning Experienceの画面では問題ありませんでした。
f:id:tyoshikawa1106:20151123164613p:plain


作りの問題かもしれませんが、従来のSalesforce画面での利用はあまり向いていないのではないかと思われます。


ちなみにSalesforce1モバイルアプリではどうなのかも確認してみました。
f:id:tyoshikawa1106:20151123165023j:plain:w200


一応表示はされましたが、スタイルが崩れている感じです。Salesforce ClassicとSalesforce1 Mobileでの利用には向いていなさそうです。


apex:includeLightningの使い方はこんな感じでした。Lightning ExperienceのVisualforceページにちょっとしたコンポーネントを埋め込みたいときには便利そうです。

参考