Dreamforce2015 Day3： Lightning Out

Dreamforce3日目が過ぎ、ホテルで夜中にこの記事を書いている讃岐です。Dreamforce期間中はお祭りみたいなところもあり、夜は街に繰り出してウェーイしたり、いろいろありますよね。

Dreamforceでは数千を超えるセッションが用意されており、会場も1つだけではなく街中にいくつもあります。ただ、何も考えずにセッションに申し込むと街中を歩く羽目になるので、私は基本的にMoscone Westという会場に常駐していました。WestのDevZoneでは様々なブースやセッションが行われていましたが、中でも目を引いたのがTrailhead関連とそのキャラクターとなっている？Astro Dollです。彼はロケットに乗ったり、たぬきのような恰好をさせられたり大活躍ですね。

そんなAstro Boyに近年押され気味なのがこの2人。

Salesforceに関わっている人にはおなじみ、SaaSyとChattyです。

長年第一線で活躍している2人ですが、今年はAstro Boyの大躍進もあり、そのうちあの入れ歯のキャラクターのように消えてしまうのではないかと、個人的に心配していたのですが、さすがの貫録で基調講演前のメイン舞台で踊っていました。「まだお前にこのステージは早い・・」と言わんばかりです。

今後もSalesforceゆるキャラポジションの熾烈な争いに目が離せませんね。

さて、そんなどうでもよい話はさておき。

今年のDreamforceでのLightning

昨年のDreamforceで大々的に発表されたLightningですが、この1年の間にAppBuilderやComponentのGA、また少し前に発表されたSalesforceの新UIとなるLightning Experienceもあり、少しずつですが利用する段階に入ってきたと言えます。

そんな中、今年のDreamforceでのLightningについてどのような発表があったかというと、実は特別大きい発表はありませんでした。それもそのはずで、LightningをSalesforceの新しいUIとするLightning Experienceや、新UIのスタイルが定義され Lightning ComponentおよびVisualforceやそれ以外のシステムでも利用できる、CSSフレームワークであるLightning Desighn Systemのリリースは約1か月ほど前に事前発表されていました。

そういった意味で驚くような発表はありませんでした。ただ、Lightning Experienceについては、様々なデモブースや発表でも触れられており、今後は現在のUI（SalesforceではClassicと呼ぶようにしたようです）から新UIへの移行を強く進めているのを感じられます。

特に大きな発表のなかったLightningではありますが、発表から1年が経ち、多くの開発者が自分が得た知見を共有すべくセッションやミニシアターでのデモなどを行っていました。

その中でもLightningの製品責任者であるSkipさんのセッションで紹介していたLightning Outという新機能は、今回Lightningの中でも数少ない新機能のお披露目だったと言えるでしょう。

今回はそのセッションで聞いたLightning Outの概要と実際に作ってみたサンプルについて、ご紹介したいと思います。

Introducing Lightning Out

まずLightning Outが何か簡単に述べると、Lightning Componentを外部から呼び出す仕組みです。現在Lightning ComponentはAppBuilderやSalesforce1アプリ、あるいは直接ApplicationのURLを叩くことで呼び出すことが可能ですが、Lightning ComponentをSalesforceの外となるHeroku、Office365、SAP、その他オンプレミスのシステムなど、様々なところから呼び出せるようになります。

これはどういうことでしょうか？

例えばSalesforceのCRM情報をSAPで表示するという要望があった時により選択肢が増えます。

単純にSAPで表示するのであれば、SOAPやRESTのコールでSalesforceの情報を受け取りSAP側のアドオン開発で表示するのも良いでしょう。しかし、既にSalesforce側でそういったコンポーネントがあったとしたら、Lightning Outを使うことでSAP側は軽微な開発でSalesforceの情報を表示することができます。また、複数システムで同じ情報を表示したい場合にも、Salesforce側でLightning Componentを作っておけば、各システム側ではそれを呼び出すことでSalesforceの情報を閲覧することが可能となります。もちろんそれ以外にも様々な活用方法があるでしょう。

Salesforce外から呼び出すという事で、Lightning Outを使うにはSession IDまたはOAuthトークンが必要となります。

またSecure Browser(https)とCross-Origin Resource Sharing(CORS)もサポートしているそうです。

Lightning Component for Visualforce(LC4VF)

Lighting OutではSalesforceの外部から呼び出すことができる以外に、Salesforce内であるVisualforceからコンポーネントを扱うこともできます。この場合は当然ながら認証は必要ありません。

なお、それぞれのリリース予定については以下の通りです。

  • LC4VFはWinter'16でGA
  • Lightning OutはWinter'16でプレリリース、Spring'16でGA

今回はLC4VFとして、Lightning Componentを呼び出すHelloWorld的なVisualforceを作ってみます。ただし、まだ正式なドキュメントやサンプルが見当たらず、試行錯誤の上でのものなので、その辺は予めご了承ください。（免責事項）

まずはLightningのApplicationです。

HelloLoApp.app

<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="HelloLcom" type="COMPONENT"/>	
</aura:application>

Applicationではextendsに"ltng:outApp"を指定する必要があり、また呼び出すComponentはaura:dependencyに指定するようです。

続いてComponentです。

HelloLcom.com

<aura:component >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<p>Component Sample.</p>
</aura:component>

HelloLcomController.js

({
doInit : function(component, event, helper) {
console.log("Hello Lightning Out!");
}
})

こちらは特に変哲のないComponentとControllerです。Controllerでは呼び出せたことを確認するためにinitとしてログを出力しています。

続いてVisualforceです。

SampleLO.page（"TERRADEV"は名前空間なので、指定していない場合はc:としてください）

<apex:page >
<apex:includeScript value="/lightning/lightning.out.js"/>
<button onClick="createLcom('hoge')" >Call Lightning Component</button>
<script>
$Lightning.use("TERRADEV:HelloLoApp",
function(){}
);
function createLcom(type, subjectId){
$Lightning.createComponent("TERRADEV:HelloLcom");
}
</script>
</apex:page>

Lightning Outを利用するには以下3つが必要となります

  1. lightning.out.js
  2. $Lightning.use()
  3. $Lightning.createComponent()

今回はVisualforceなのでlightning.out.jsをSalesforce内の相対パスで読み込んでいますが、外部システムの場合は別途ファイルをダウンロードするなどして読み込む必要があると思われます。CDNが提供されるかなど、その辺の情報は公開されておりません。

lightning.out.jsの中身を見ると、addScriptやaddStyleなどのメソッドが定義されており、これらを使う事で名前の通りスクリプトやスタイルが追加できるようです。

さて、ここまでできたらVisualforceからボタンを押してLightning Componentを呼び出してみます。


consoleを見るとLightning ComponentのControllerで出力しているログが確認できました。本来はログだけではなく、Component自体をVisualforceに表示したかったのですが、その辺の書き方は調べきれませんでした。ControllerからPageのDOMを探して・・みたいなことも出来ると思いますが、方向として違う気がするので今回はデバッグレベルではありますが、このようなサンプルとなりました。

まとめ

今回のDreamforceではLightningに関する大きな発表はありませんでしたが、Lightning ExperienceとしてUIの一新、またUIを構成するLightning Componentやそのコンポーネントを外部から呼び出せるようにするなど雷のように早い進化は続いています。SalesforceはコンポーネントをベースとしてUIの部品化を進めており、標準画面を部分的に拡張したり、あるいは今回紹介したLightning Outを使ってコンポーネント単位で他システムとのインテグレーションを図れるようになっていきます。

今後もLightningの進化から目が離せませんね。