Lightning もくもく会 #5のLTスライドです。 Lightning Component と Lightning Design System を使った簡単なアプリ開発をしてみた雑感と AuraJS の機能について軽く説明しています。

1. Lightning Componentと
Lightning Design System
カスタムページを作ってみました
2015/10/29
NORIKO IWAI
© 2015 Appirio, Inc. - Confidential

2. Agenda
Lightning Componentの期待と実際
Lightning Design Systemの期待と実際
意外に使えたAuraJS
まとめ

3. 自己紹介
• 岩井 法子
• 株式会社アピリオ
• SFDCの開発とか色々
• SFDC歴3ヶ月
• それまでは
l JavaとかC#とか・・・
l jQueryとかBackbone.jsとかNode.jsとか・・・
3
資格制度変わっちゃいましたが

4. 今回作ったアプリ
4
• Lightning ComponentとLightning Design Systemと
AuraJSだけで頑張ってみた。
※開発環境はSublime Text 3 + MavensMate V7 beta

5. Lightning Componentに対する自分の理解
5
• クライアント - サーバのWebアプリケーションを開発する
ためのフレームワーク
• クライアントサイドはHTML + JavaScript（Auraフレーム
ワーク）、サーバサイドはApex
• シングルページアプリケーション（SPA）の開発に特化
• コンポーネント同士を組み合わせて階層的に利用すること
が可能
• Lightning Design SystemはSalesforce Lightningの外観
に合わせたカスタムCSS、アイコン、ベストプラクティス
のガイドなどのUI補助ツール集

6. Lightning Componentに期待していたこと
6
• HTML／JavaScriptの知識があれば学習コストが低く抑えら
れる。
ほぼ期待通り
• ApexのメソッドをJavaScriptからシームレスに利用できる。
• コードの見通しが良くなる。
• 便利な標準コンポーネントが最初から揃っている。
• 再利用性が高い。

7. Lightning Design Systemに期待していたこと
7
• Twitter Bootstrapみたいに簡単・便利なコンポーネントが
たくさん使える。
なんかちがった
• 少ない工数でリッチなUIがすぐに作れる。
• モダンなアニメーション効果を手軽に実現できる。
• Lightning Componentと親和性が高い。

8. Lightning Design Systemの実際
8
• Twitter Bootstrapみたいに簡単・便利なコンポーネントが
たくさん使える。
→ 提供されているのはHTMLサンプルだけ
→ カレンダーすら要自作
→ 提供されているのはHTMLサンプルだけ
→ カレンダーすら要自作

9. Lightning Design Systemの実際
9
• 少ない工数でリッチなUIがすぐに作れる。
show: function(component, event, helper) {
var element = component.get(‘modal’).getElement();
$A.util.toggleClass(element, 'slds-show');
$A.util.toggleClass(element, 'slds-hide');
}
<!-- Modal -->
<div aura:id=“modal”
class="slds-hide”>
…
</div>
CONTROLLER
COMPONENT
→ CSSだけならまだしも動きまで表現するとなると要自作

10. Lightning Design Systemの実際
10
• モダンなアニメーション効果を手軽に実現できる。
.THIS .transition-font-size {
-webkit-transition: 0.2s font-size linear;
transition: 0.2s font-size linear;
}
.THIS .transition-font-size.on {
font-size: 1.5em;
}
<li class=“transition-font-size"
onclick="{!c.selectMemberType}"
onmouseover="{!c.toggleFontSize}"
onmouseout="{!c.toggleFontSize}">
…
</li>
STYLE
COMPONENT
→ LightningのフレームワークではなくCSS3で要自作

11. Lightning Design Systemの実際
11
• Lightning Componentと親和性が高い。
例）
aura:inputDate の標準アイコン
STYLEで位置を調整しないと
テキストボックスを飛び出す
→ 表示がおかしくなってしまう標準コンポーネントもあった

12. そんな中で・・・
意外に使えたAuraJS
※ https://github.com/forcedotcom/aura のソースから抜粋

13. jQueryでおなじみクラス操作系
13
• $A.util.toggleClass
• $A.util.addClass
• $A.util.removeClass
• $A.util.hasClass
• $A.util.swapClass
var element = component.find("member-type-modal").getElement();
$A.util.toggleClass(element, 'slds-show');
$A.util.toggleClass(element, 'slds-hide');

14. 便利な配列操作
14
• $A.util.forEach
• $A.util.every
• $A.util.map
• $A.util.filter
var Name = $A.util.filter(
component.get("v.memberTypes"), function(obj, index) {
if (obj.Id === id) {
return true;
}
return false;
})[0].Name;

15. データ操作もOK
15
• $A.util.getDataAttribute
• $A.util.setDataAttribute
• $A.util.hasDataAttribute
var id = $A.util.getDataAttribute(event.currentTarget, "id");
<aura:iteration items="{!v.memberTypes}" var="memberType">
<li data-id="{!memberType.Id}”>
<a href="#" role="option">
{!memberType.Name}
</a>
</li>
</aura:iteration>

16. まとめ（１）
16
• 当初期待していたような「少ない工数」「簡単でリッチな
UI」実現は難しい。
• フロントエンドのUIに限って言えば、通常のWebアプリを
一から作るのと労力は変わらない。同じ機能を実装するな
ら、Visualforceベースの方がはるかに簡単。
• 生産性、保守性ともに良いとは言えないため、現状はSIの
ようなカスタム・アプリ開発の現場でLightning Design
Systemをそのまま使うのは難しいと思われる。
• もう少しLightning Design Systemが成熟する or 別の方
法が提示されるまで待った方が良さそう。

17. まとめ（２）
17
• 自作コンポーネントが溜まってくれば、開発工数はかなり
抑えられる（はず。App Builder環境に期待）。
• 依存度が低く組み合わせの自由度が高いので、開発者ごと、
開発会社ごとの色が出やすくなった。
• AuraJSの豊富な機能を見ていると、今後Lightning
ComponentとLightning Design Systemのつなぎになるよ
うな標準機能やベストプラクティスがもっと増えるのでは
ないか。

18. 以上です