Lightning componentとlightning design system
Download as PPTX, PDF5 likes1,070 views
Lightning もくもく会 #5のLTスライドです。 Lightning Component と Lightning Design System を使った簡単なアプリ開発をしてみた雑感と AuraJS の機能について軽く説明しています。
![便利な配列操作
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;](https://image.slidesharecdn.com/lightningcomponentlightningdesignsystem-151101110619-lva1-app6892/85/Lightning-component-lightning-design-system-14-320.jpg)
Lightning componentとlightning design system
- 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で位置を調整しないと テキストボックスを飛び出す → 表示がおかしくなってしまう標準コンポーネントもあった
- 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. 以上です
Editor's Notes
- #2: 1