Lightning Componet でページ遷移する〜LightningRouter の提案〜
Lightning Component のページ遷移の問題点
Lightning Component は「 Single-Page-Application (SPA) を構築できるフレームワークだ！」なんて触れ込みもありましたが、実のところ1ページ内でViewを切り替えるための Router をライブラリに持っていません。
また、ページ内でのView切替するための仕組みもなく、以前紹介し唯一の可能性であった navigateToComponent() もお蔵入りになってしまっています。
つまり、Lightning Component のページ遷移を考えたときによい解決策がない状態でした。
LightningRouter の提案
実は、Winter'16 で aura:locationChange イベントが追加されました。このイベントは、URLのクエリー文字列やハッシュが変更されたタイミングで発火するものです。この機能追加によって、待望の Router 機能を実装できるようになりましたので、Lightning Component を実現する LightningRouter コンポーネントをサンプル実装してみました。
サンプル実装
ルーティングを処理するコンポーネントのサンプル実装です。
初期表示するコンポーネント、ルーティング情報を属性として与えられることで、動作するようになっています。ルーティング処理自体は、locationが変化した際に発生するイベントを受け取り、ルーティング情報に従って{v.body}に表示するコンポーネントを切り替えているだけで単純なものです。
```xml:src/aura/LightningRouter/LightningRouter.cmp
<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>
```
```js:src/aura/LightningRouter/LightningRouterController.js
({
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);
}
}
);
}
})
```
利用方法
下記のように呼び出します。init 属性には初期表示する Lightning Component、route 属性には、ハッシュとそのハッシュがセットされた場合に表示する Lightning Component をJSON(連想配列)で記述します。
```xml:src/aura/LightningRouterApp/LightningRouterApp.app
<aura:application>
<c:LightningRouter
init="Sample1"
route='{
"Sample1" : "Sample1Cmp",
"Sample2" : "Sample2Cmp"
}'
/>
</aura:application>
```
あとは、ページとして表示する Lightning Component を用意し、下記のようにアンカータグでハッシュを呼び出せば、表示する Lightning Component を切り替えてページ遷移します。
```xml:src/aura/Sample1Cmp/Sample1Cmp.cmp
<aura:component>
<div>
Hello, Sample1!
<a href="#Sample2">Sample2</a>
</div>
</aura:component>
```
```xml:src/aura/Sample2Cmp/Sample2Cmp.cmp
<aura:component>
<div>
Hello, Sample2!
<a href="#Sample1">Sample1</a>
</div>
</aura:component>
```
GitHubリポジトリ
サンプルソースコードについては、ここで公開しています。
おわりに
以上のように、 Winter'16 で追加になったイベントを用いて、これまで Lightning Component になかった Router機能を実装しました。
今回実装したものは、単純に Lightning Component を切り替えるシンプルな実装となっています。
実際に製品開発などで利用する場合は、Salesforce1で動作するように修正する、ページ遷移時のアニメーションを追加する、など必要に応じて拡張していく必要があります。
SlackにTokyo Salesforce Developer GroupのTeamを作ってみた
毎年のようにサービス名が変わって毎年新鮮な気持ちで Advent Calendar に挑める今年も大盛り上がりの Salesforce App Cloud Advent Calendar 2015 ですが、1日埋まっていない日があるので代打しようとキーボードを叩いています。
とはいえ、Winter'16のアップデートを見てもLightning Componentの機能拡充も少なく諸先輩方の素晴らしい投稿がたくさんあり、なかなかネタが…。
じゃぁ、どうする？
そこで、Slackの登場です。
会社勤めをしているとなかなかFacebookアカウントを取りにくい人もいたりします。そんな方も気軽に参加して雑談できるスペースになればいいなぁ、という空想で自分を励ましながらSalesforce DUG JapanTokyo Salesforce Developer Groupのチームを作ってみました。
salesforcedugjapanはすでに使われていたけど、誰だろう…。
招待してもらわないと参加できないよね？
そんな声もあろうかと、Invite用のWebページも用意しました！
（但し、テストしていません！）
slackin-tokyosalesforcedg.herokuapp.com
URLからも分かるようにHerokuで動いています。なんとHeroku Buttonのおかげで調査から設置まで30分もあればできてしまいました(参照：参考文献)。Heroku、すごいですねぇ。もちろんFreeプランなので無料！
よって、30分すると寝ます！
一回アクセスすると起きてくるはずなので、少し間をとって再度アクセスしてもらえばInvite用のWebページが表示されるはずです。
ところで、何を話すの？
Slackでぶっちゃけ何をやるか決まっておりません。
Facebookページよりは話しやすい場になると思いますので、例えばリリースノートの感想を書き込んで雑談したり、テーマを決めて雑談したり、できればと考えております。
以上、Salesforce App Cloud Advent Calendar 2015 の12月20日分の代打投稿でした。
参考文献
Lightning Event は3度死ぬ
Lightning Event とは
Lightning Event とは、Lightning Component において、コンポーネント間でイベント処理を実行するための仕組みです。Lightning Event では、イベントを定義する、イベントを発火するコンポーネントに定義を記述する、イベントを受け取り処理するコンポーネントに定義を記述する、の3ステップが必要となります。
First Impact
問題点
それは、Lightning Component をまともにコンポーネント分割してコンポーネント間のイベント処理を Lightning Event で行おうとしたときに訪れます。
Lightning Event も Lightning Component などと同様にバンドルという単位で扱います。このバンドルにイベントの定義だけを記述します。問題はこのバンドルがすべて1階層内で管理されるため、まともにコンポーネントを分割し、イベント処理を書いていくとものすごい数のバンドルが作成されることになり、管理不能になっていきます。
対応策
対応策としては、下記の2つが考えられます。
- まとめにコンポーネントを分割しない
- Lightning Component はあくまでも外側とのI/Fの定義に徹して、内部は別ライブラリ(React.jsなど)を利用する
前者はコンポーネント志向を捨てることになるので、後者のほうが優れたやり方ではあります。ただし、モダンJavaScriptのスキルが必要となるので、JavaScriptが得意ではないエンジニアがいきなり採用するには少しハードルがあります。トレンドは、モダンJavaScriptを利用して開発する流れとなっているので、頑張って覚えていってもよいかもしれません。
Second Impact
問題点
それは、別のパッケージにある Lightning Component を Lightning Event で連携しようとしたときに訪れます。
Lightning Event は型付け言語に相応しく、ソースコード中にある場合は定義を参照してバリデーションしており、定義が見つからない場合はソースコードをSalesforce組織にデプロイすることができません。
そのため、他のパッケージ中にあるコンポーネントを参照すると、自動的に基本パッケージと拡張パッケージというような主従の関係となってしまいます。これは、 Lightning Event でも同様に機能しますので、他のパッケージの Lightning Event を呼び出すパッケージを作ろうとすると、呼び出し元のパッケージに依存するようになってしまい、単独ではインストールすることができなくなってしまいます。
対応策
対応策としては、Lightning Event を利用する場合は、直接的なイベントのワイヤリングを諦めるしかありません。それぞれのパッケージでは別々に Lightning Event を発火・受け付ける処理を作成し、2つのパッケージのコンポーネント間のイベントを受け渡すワイヤリング用のコンポーネントを作成することでやりたいことができるようになります。
自動的にイベントをワイヤリングできなくなってしまうところですが、このワイヤリングコンポーネントを2つのパッケージの拡張パッケージとして作成してやることで、コーディングする必要はなくなります。
2つのパッケージにある Lightning Component を Lightning App Builder で配置し、合わせてワイヤリングコンポーネントを配置してやることでイベントの受け渡しを実現できます。
Third Impact
もうすぐ ltng:sendMessage イベントが実装されるようです。
このイベントを利用すると、新しいイベントを定義せずに ltng:sendMessage イベントでメッセージ(JSON形式)をチャンネルを指定してイベント発火し、
ところが…
今Skipが居たのでフラっとltng:sendMessageをコンポーネント間のIFに使うのはアリかと聞いたら、結論からするとあんまりいいアーキテクチャじゃ無いよ、それ用に作って無いし、だそうです。(元々ltng:sendMessageはAppBuilderが使う事を想定)
— Mitsuhiro Okamoto (@mitsuhiro) September 21, 2015んで、Lightning Eventをパッケージングした時の依存性問題に関しては、例えばイベントを別のイベントへ流す様なマッピングツールを提供するなど、今解決策を検討してるそうな。なのでProductionでComponent間連携やるのはもうちょい待った方が良さげ。
— Mitsuhiro Okamoto (@mitsuhiro) September 21, 2015おぅ…。
希望の光と思われた ltng:sendMessage も解ではないと…。
問題として認識されて、解決に向けて対応中とのことなので、もう少し様子を見ましょう…。
Enjoy Lightning!
Dreamforce 2015 に行ってきた！
はじめに
Salesforce.com 関連ビジネスをやっている方は一度は参加しておきたい世界最大のITカンファレンス"Dreamforce 2015"に参加してきました！
フライト
開催地はもちろん米国サンフランシスコ！
日本を深夜に飛び立つ羽田便に乗り込み、リクライニングしないシートに耐え忍ぶこと9時間。なかなかの苦行でしたが、とりあえず持参したアイマスクとエア枕と気合で寝て過ごしました。なんと他の列に座った同僚もリクライニングしなかったとか。
Keynote
基調講演はいつものハワイの方から始まりました。安定の眠気を誘う感じでした。やはりこのハワイアンダンスがあるとDreamforceが始まった感じします。
そして、スティービー・ワンダーさんへ。もうまるっきり何のイベントか分からなくなってますね。会場でリズムに合わせて踊ってる人が映し出されたり、ノリノリな人も。日本語同時通訳ゾーンで、かなり距離があったのが残念。
今年はLightningMan。もう何がなんだか…。しかし、マーク・ベニオフ CEO とパーカー・ハリス Co-Founder の掛け合い漫才は圧巻でした。
DevZone
今年の目玉はなんと言ってもTrailheadでした。URLが書かれた紙が入ってると思われる箱をもらうための行列がすごかったです。米国人も並ぶんだなぁと妙なところに感心してしまいました。
さて、今年はここ2年間連続で開かれたHackathonがなく、一昨年のSalesforce1や昨年のLightning Componentのようにイベントで発表される新技術もなく、Developer的には少し物足りない感じもありました。
まぁ、Lightning ExperienceやLightning Design Systemが先立ちされちゃってるので、それ関係のセッションを聴くとか落ち着いて過ごせたので、それはそれでよかったですけど。
IoTとかやってるベンダーならThunderとか発表されたので、もう少し違った感じなのかもしれません。
Partner Zone/Session
今回はISV向け、Partner向けのセッションを多めに参加してみました。
初日のPartner Meet Up Session、最終日のPartner Technical Sessionは日本のパートナー向けに特別に準備されたセッションでした。その中でもADM(Adoptive Delivery Methodology)の解説は、現在進行形でチームビルドとリリースプロセスの見直しを行おうとしているところで個人的にタイムリーな話題でした。
最終日のセッションでは、ADMのうちバックログをスプリントに流すところのワークショップがあったり、プロジェクトオーナーの役割やスクラムの進め方など質問させてもらう時間があったりと、とてもよい刺激になりました。
参加セッション
今回、私が参加したセッションはこんな感じです。初めて、ということで勝手も分からないので、Keynote、ISV、Lightningあたりのキーワードで絞って参加してみました。
Day0(2015/9/15)
| 10:00-11:30 | Partner Keynote: The World's #1 Cloud Ecosystem |
| 15:00-15:30 | Lightning Components: The Future |
| 16:00-18:00 | Partner Meet Up Session (for Japan) |
| 19:00-20:00 | Cloud Expoウェルカムレセプション |
Day1(2015/9/16)
| 09:00-09:40 | Emerging Technologies: Getting started with the new Lighting Experience for ISVs |
| 10:00-10:20 | ISV Tech Talk: Introducing The Salesforce Lightning Design System |
| 13:00-15:30 | Get Ready for a New Kind of Customer Success with Marc Benioff & Special Guests |
| 17:00-17:30 | Advanced Lightning Components |
| 19:30-21:30 | Japan Night |
Day2(2015/9/17)
| 09:00-09:40 | Building Lightning Components for ISVs |
| 10:30-11:20 | Salesforce Developer Keynote |
| 中の人とHerokuで昼食 | |
| 14:00-14:50 | App Cloud Keynote: Experience a New Way to Build Apps - Platform Keynote |
| 16:00-17:30 | Heroku Session & Office Tour |
Day3(2015/9/18)
| 09:00-12:00 | ISV App Lab Building Your App, and Your Business From A-Z |
| 15:00-16:00 | Partner Technical Session (for Japan) |
いったん、まとめ
現地での時差ボケは朝4時くらいに起きてしまう以外は特に問題なかったのですが、帰国後はなかなか時差ボケが治らないのか、疲労が取れないのか突然の眠気に襲われたり、業務がバタバタしたりで、ブログがこんなに遅く…。
MiniHackやHerokuオフィス訪問などまだ書ききれてないので、ぼちぼち続きを書いていこうと思います。
忘れないうちに。。。
Salesforce Summer 東京で開発者コミュニティラボを初開催しました！
2015年7月24日に開催されたSalesforce Summer 東京にTOKYO Salesforce DUGとしてスペースを貸してもらい、開発者コミュニティラボを初開催しました！(ぱちぱちぱちっ)
タイムスケジュールとしては、こんな感じでした。
DUGの紹介
まずは、Salesforce DUG 会長の米井さんからDUGの歴史について、ざっくりまとめつつ、DUGの存在意義についてアツく語ってもらいました。Force.comエンジニアの地位向上、エンジニアとしての価値向上、DUGに参加することのメリットなどなど。
しかし、Meetupを一回しかやらなかった年があるとか、なかなか黒歴史ですね。ちょっとサボりすぎですね。すみません、ごめんなさい、もうちょっと頑張ります…。
Lightning 開発者トーク
Lightning開発者トークでは、Lightning Componentを実際に開発しているオークニーさん、co-meetingさん、テラスカイさん、チームスピリットさんの4社から発表がありました。
co-meetingさんからはカンバンコンポーネント・ガントチャートコンポーネントの紹介とLightning Componentのライブコーディング。
テラスカイさんからはカレンダーコンポーネントの紹介。
チームスピリットさんからはTeamSpiritのLightning Component化と領収書OCRコンポーネントの紹介などがありました。
徐々にLightningコンポーネントが増えていっていますが、日本企業のリリースしているコンポーネントはその中でもクォリティが高いように思います。今後もいろいろ増えていくと思いますので、今後も楽しみです。
Salesforce1 Platformクイズ大会
AppleWatchのかかったクイズ大会は、なかなかの盛り上がりを見せました。「SalesforceのCMに女将として出演している女優さんの名前は？」などSalesforce1 Platformに関係ない問題を織り交ぜながら19問の問題が出題されたりしました。最終的には、運営メンバーを除いて正解数の多かった3名の方からじゃんけんで勝者を決めました(クイズはどうした？)。
じゃんけんに勝ち残り、AppleWatchを見事ゲットしたのは@lv1hp0 さんでした！おめでとうございます～！ツイ垢見ると、認定上級デベロッパーを持っていらっしゃるようで。ぜんぜんLv1でもHP0でもじゃないっすね^^;
Salesforce DUGの何かに参加したのは初めてとのことなので、今回に懲りず参加してもらえれば幸いです。
Platformテーブルトーク
Salesforce.comの岡本さん、Herokuの相澤さんの開発者向けセッションと重なったこともあり、少なめの参加者によるトークに…。まぁ、開発者向けセッションに行くよね^^;
とはいえ、参加していただいた方とはなかなか濃いトークができたのではないでしょうか？
開発者コミュニティラボの模様
開発者コミュニティラボの模様はこんな感じでした。
その他の写真は、Salesforce DUG JapanのFacebookグループにアルバムを作って公開していますので、そちらで見ついでにFacebookグループに参加してもらえるといいと思います。
まとめ
今回が初めての開催となったわけですが、急遽決まったことやその他イベントも多く運営メンバーが忙しく十分な準備ができなかったりと準備不足の感もあり申し訳ない気持ちです。
とはいえ、それなりに開発者の方に参加していただき、かつ、これまで知らなかった方にSalesforce DUGという存在を知ってもらえたように思います。まだいろいろできたんじゃないか、と言えば、キリがなくなってしまいますが、今回の経験を次回に活かせていきたいと思います。
Lightning Component もくもく会 #3 でもくもくしてきたよ
2015年7月14日に Salesforce DUG 主催の Lightning Component もくもく会(仮) #3 を開催しました！
今回は、上場して新社屋に移ったばかりのTerraSkyさんにお邪魔して開催しました。
salesforcedugjapan.doorkeeper.jp
もくもく会の模様
LT
今回のAppirioの北嵐さんから発表がありました。
テーマは「標準化 for Lightning Development」とこれからLightning Componentを利用して開発するにあたって、標準化として決めておいたほうがよいこと、書き方などがまとめられていました。
残念ながら、LT資料はアップされていないようなので、なかやまさん(@nakayama_san)にまとめていただいた絵をどうぞ。
すごくわかりやすくまとまっています！
#golightningfast
Lightning Componentもくもく会の#3にきましたー。 pic.twitter.com/u1z0suDl6B
— なかやまさん (@nakayama_san) 2015, 7月 14ツイートまとめ
もくもく会でのツイートをまとめていますので、ご参考まで。togetter.com
最後に
今回のもくもく会は、これまでとは違ってわりともくもくと作業されている方が多かったように思います。ただ、Salesforce DUG運営メンバーは7/24イベント準備など別のことをやっている人が多かったですが…(-_-;)
7月はイベント盛りだくさんですが、9月中旬のDreamforceももうすぐなので、なんとなくそわそわしますね。Dreamforceまでにもう一度もくもく会をやりたいと思いますので、またよろしくお願いします！
Enjoy Lightning!
Lightning Component もくもく会(仮) #2 でもくもくしてきたよ
2015年5月27日に Salesforce DUG 主催の Lightning Component もくもく会(仮) #2 を開催しました！(ぱちぱちぱちっ) 少し参加人数が減ってきましたが、普段あまり話さないエンジニア同士でネットワーキングできてよかったです。
salesforcedugjapan.doorkeeper.jp
もくもく会の模様
あと、なかやまさんに描いてもらいました！
ありがとうございます！
#golightningfast pic.twitter.com/PoMnVzatco
— なかやまさん (@nakayama_san) 2015, 5月 27発表資料や実況ツイートなど
吉川さんのちゃんと検証した技術的な話や木村さんの現在開発中のコンポーネント披露など勉強になりました。なかなかどういったコンポーネントを作ればいいのか手探りな感じなので、実際に手を動かした結果のフィードバックはとても参考になります。
ちなみに、私の発表資料はこちらです。今回も前回に引き続き、話のネタ的な発表資料でした。
ディスカッションでは、今後どうなっていくか大予想みたいな話ができて面白かったです。
www.slideshare.net
ついでに、関連しそうなツイートをまとめたので、ご参考まで。
さいごに
株式会社チームスピリットでのもくもく会も3回目となりました。恒例のケーキ美味しかったです。ごちそうさまでした！
次回、もくもく会はきっと日本橋で開催予定なので、皆さま懲りずにご参加ください。
Enjoy Lightning!
