tyoshikawa1106のブログ

- Force.com Developer Blog -

Lightning Component もくもく会 #4に参加しました

Salesforce DUG JapanコミュニティのLightning Component もくもく会 #4に参加しました。会場はチームスピリットさん。

f:id:tyoshikawa1106:20150904185044j:plain

f:id:tyoshikawa1106:20150904185419j:plain:w300


最近、Lightning Componentの勉強は進んでいなかったので、もくもく会参加はまたの機会にしようかなと思ったのですが、Salesforceの新しいCSS Framework - Lightning Design Systemを少し勉強したので、これについてLTしたくて参加しました。


今回のLTの資料がこちらです。


だいたい基本的な使い方についてなのですが、一番話したかったことは『Lightning Design SystemはLightning Component以外でも使える』ということです。特にVisualforce開発ではBootstrapなどを使うとき標準のスタイルに影響を与えてしまうのでヘッダーを非表示にして標準スタイルの読み込みを無効にする必要がありました。


Lightning Design Systemでは『slds』プレフィックスが用意されているため、これを宣言することで標準ヘッダーを表示したまま使用することができます。実際に作ってみた画面がこちらです。


基本的にLightning Design Systemを使った開発は従来のactionからapex処理を実行する方法ではなく、Javascriptベースの開発が推奨されています。従来の開発では利用できないのかなとJSベースではなくactionからapex処理を実行する方法で作ってみました。


やってみたところ、以外と問題なく利用できそうでした。apex:outputLinkやapex:inputFieldタグでもstyleClassをつかってclassを指定することでLightning Design Systemのスタイルを適用できましたし、reRenderで画面をリフレッシュしてもスタイルが崩れたりはしませんでした。


DatepickerやModalなどはまだ試せていないのですが、Bootstrapに自分でプレフィックスをつけて開発するよりは簡単に導入できるかもしれません。


・・・という感じのことを整理してLTしたかったのですが、ちょっとうまく話せなかったところもあったのでブログにまとめてみました (;´∀`) やっぱり開発者コミュニティのイベントでLTやらせてもらえると楽しかったです。

f:id:tyoshikawa1106:20150904194043j:plain:w300



もうひとつあったLTでは@stomitaさんがLightning Design SystemとReactをつかった開発についてお話してくれました。Githubにまとめてあるとのことです。


まだReactは全然勉強できていないのですが、いつか時間をつくって勉強してみたいと思います。