Lightning Component でページ遷移する 〜LightningRouterの提案〜

1. Salesforce App Cloud Advent Calendar 2015
Lightning Component で
ページ遷移する
∼LightningRouter の提案∼
Salesforce DUG [Tokyo] Meetup 2016 新年会 (2016/1/28)
TeamSpirit Inc.
@a_kuratani

2. Akira Kuratani / 倉谷 彰
@a_kuratani
kuratani
TeamSpirit Inc.

3. –Lightning コンポーネント開発者ガイド
“Lightning コンポーネントフレームワークは、モバイルデバ
イス用およびデスクトップデバイス用の動的な Web アプリ
ケーションを開発する UI フレームワークです。これは、拡
張性に優れた単一ページアプリケーションを構築する最新の
フレームワークです。”
単一ページアプリケーション

4. Single Page Application
• 単一ページによるWebアプリケーション
• ページはDOMの操作により切り替える
• サーバとのやりとりはRESTやWebSocketなど
を利用

5. きっと
Angular/Reactとかで
できることが重要

6. そういえば…

7. react-router
Angular ngRoute
的なやつがない気がする

8. Spring’15 Releasenote
• aura:locationChange イベントが追加
• URLのクエリー文字列やハッシュが
変更されたタイミングで発火する

9. LightningRouterの提案
• aura:locationChangeイベントを利用して
ハッシュタグによるページ切替を実現する

10. <aura:component>
<div>
Hello, Sample2!
<a href="#Sample1">Sample1</a>
</div>
</aura:component>
例えば、
<aura:component>
<div>
Hello, Sample1!
<a href="#Sample2">Sample2</a>
</div>
</aura:component>
src/aura/Sample1Cmp/Sample1Cmp.cmp
src/aura/Sample2Cmp/Sample2Cmp.cmp

11. <aura:application>
<c:LightningRouter
init="Sample1"
route='{
"Sample1" : "Sample1Cmp",
"Sample2" : "Sample2Cmp"
}'
/>
</aura:application>
JSONでルーティングを定義
src/aura/LightningRouterApp/LightningRouterApp.app
例えば、

12. LightningRouterコンポーネント
<aura:component>
<aura:handler event="aura:locationChange" action="{!c.render}" />
<aura:handler event="init" action="{!c.render}" />
<aura:attribute name="init" type="String" access="global" />
<aura:attribute name="route" type="String" access="global" />
{!v.body}
</aura:component>
src/aura/LightningRouter/LightningRouter.cmp

13. ({
render : function (component, event, helper) {
var token = event.getParam("token");
var querystring = event.getParam("querystring");
var route = JSON.parse(component.get("v.route"));
if($A.util.isUndefined(token)) {
token = component.get("v.init");
}
var cmpName = route[token];
$A.createComponent(
"c:" + cmpName,
{
"aura:Id": cmpName,
},
function(newCmp){
if (component.isValid()) {
var body = component.get("v.body");
body.pop();
body.push(newCmp);
component.set("v.body", body);
}
}
);
}
})
src/aura/LightningRouter/LightningRouter.js

14. eventのパラメータを取得
var token = event.getParam("token");
var querystring = event.getParam("querystring");
token:URL のハッシュ部分
querystring:ハッシュのクエリ文字列部分

15. コンポーネントを入れ替える
$A.createComponent(
"c:" + cmpName,
{
"aura:Id": cmpName,
},
function(newCmp){
if (component.isValid()) {
var body = component.get("v.body");
body.pop();
body.push(newCmp);
component.set("v.body", body);
}
}
);
コンポーネントを生成して、{!v.body}
のコンポーネントを追加・削除

16. Demo

17. まとめ
• aura:locationChangeイベントを利用して
コンポーネントによるページ切替の手法を提案
• リソース
• Salesforce App Cloud Advent Calendar 2015 9日目
Lightning Componet でページ遷移する
∼LightningRouter の提案∼
http://qiita.com/a_kuratani/items/75947a62b98f38af86f7

18. 宣伝
• Slackチーム
• TOKYO Salesforce DG
tokyosalesforcedg.slack.com
• 方向性は定まっていません！
• 参加はこちらから
slackin-tokyosalesforcedg.herokuapp.com

19. Enjoy Lightning!