Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Salesforce App Cloud Advent Calendar 2015
Lightning Component で
ページ遷移する
∼LightningRouter の提案∼
Salesforce DUG [Tokyo] Meetu...
Akira Kuratani / 倉谷 彰
   @a_kuratani
   kuratani
   TeamSpirit Inc.
–Lightning コンポーネント開発者ガイド
“Lightning コンポーネントフレームワークは、モバイルデバ
イス用およびデスクトップデバイス用の動的な Web アプリ
ケーションを開発する UI フレームワークです。これは、拡
張性に...
Single Page Application
• 単一ページによるWebアプリケーション
• ページはDOMの操作により切り替える
• サーバとのやりとりはRESTやWebSocketなど
を利用
きっと
Angular/Reactとかで
できることが重要
そういえば…
react-router
Angular ngRoute
的なやつがない気がする
Spring’15 Releasenote
• aura:locationChange イベントが追加
• URLのクエリー文字列やハッシュが
変更されたタイミングで発火する
LightningRouterの提案
• aura:locationChangeイベントを利用して

ハッシュタグによるページ切替を実現する
<aura:component>
<div>
Hello, Sample2!
<a href="#Sample1">Sample1</a>
</div>
</aura:component>
例えば、
<aura:component>
<div>...
<aura:application>
<c:LightningRouter
init="Sample1"
route='{
"Sample1" : "Sample1Cmp",
"Sample2" : "Sample2Cmp"
}'
/>
</a...
LightningRouterコンポーネント
<aura:component>
<aura:handler event="aura:locationChange" action="{!c.render}" />
<aura:handler ev...
({
render : function (component, event, helper) {
var token = event.getParam("token");
var querystring = event.getParam("q...
eventのパラメータを取得
var token = event.getParam("token");
var querystring = event.getParam("querystring");
token:URL のハッシュ部分
que...
コンポーネントを入れ替える
$A.createComponent(
"c:" + cmpName,
{
"aura:Id": cmpName,
},
function(newCmp){
if (component.isValid()) {
va...
Demo
まとめ
• aura:locationChangeイベントを利用して

コンポーネントによるページ切替の手法を提案
• リソース
• Salesforce App Cloud Advent Calendar 2015 9日目

Lightnin...
宣伝
• Slackチーム
• TOKYO Salesforce DG

tokyosalesforcedg.slack.com
• 方向性は定まっていません!
• 参加はこちらから

slackin-tokyosalesforcedg.her...
Enjoy Lightning!
Upcoming SlideShare
Loading in …5
×

Salesforce dug [tokyo] meetup 2016 新年会

831 views

Published on

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

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Salesforce dug [tokyo] meetup 2016 新年会

  1. 1. Salesforce App Cloud Advent Calendar 2015 Lightning Component で ページ遷移する ∼LightningRouter の提案∼ Salesforce DUG [Tokyo] Meetup 2016 新年会 (2016/1/28) TeamSpirit Inc. @a_kuratani
  2. 2. Akira Kuratani / 倉谷 彰    @a_kuratani    kuratani    TeamSpirit Inc.
  3. 3. –Lightning コンポーネント開発者ガイド “Lightning コンポーネントフレームワークは、モバイルデバ イス用およびデスクトップデバイス用の動的な Web アプリ ケーションを開発する UI フレームワークです。これは、拡 張性に優れた単一ページアプリケーションを構築する最新の フレームワークです。” 単一ページアプリケーション
  4. 4. Single Page Application • 単一ページによるWebアプリケーション • ページはDOMの操作により切り替える • サーバとのやりとりはRESTやWebSocketなど を利用
  5. 5. きっと Angular/Reactとかで できることが重要
  6. 6. そういえば…
  7. 7. react-router Angular ngRoute 的なやつがない気がする
  8. 8. Spring’15 Releasenote • aura:locationChange イベントが追加 • URLのクエリー文字列やハッシュが 変更されたタイミングで発火する
  9. 9. LightningRouterの提案 • aura:locationChangeイベントを利用して
 ハッシュタグによるページ切替を実現する
  10. 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. 11. <aura:application> <c:LightningRouter init="Sample1" route='{ "Sample1" : "Sample1Cmp", "Sample2" : "Sample2Cmp" }' /> </aura:application> JSONでルーティングを定義 src/aura/LightningRouterApp/LightningRouterApp.app 例えば、
  12. 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. 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. 14. eventのパラメータを取得 var token = event.getParam("token"); var querystring = event.getParam("querystring"); token:URL のハッシュ部分 querystring:ハッシュのクエリ文字列部分
  15. 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. 16. Demo
  17. 17. まとめ • aura:locationChangeイベントを利用して
 コンポーネントによるページ切替の手法を提案 • リソース • Salesforce App Cloud Advent Calendar 2015 9日目
 Lightning Componet でページ遷移する
 ∼LightningRouter の提案∼
 http://qiita.com/a_kuratani/items/75947a62b98f38af86f7
  18. 18. 宣伝 • Slackチーム • TOKYO Salesforce DG
 tokyosalesforcedg.slack.com • 方向性は定まっていません! • 参加はこちらから
 slackin-tokyosalesforcedg.herokuapp.com
  19. 19. Enjoy Lightning!

×