tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Visualforce開発とLightning Design System

ちょっと前にVisualforceとLightning Design Systemの組み合わせを試してみたのですが、VF開発でよくある標準スタイルとの干渉を避けるために、ヘッダー非表示で使用する前提かなと思っていました。


ですが、Design Systemには他のCSSに影響がでないように『slds』プレフィックスが用意されているので、これを利用することでヘッダーを表示した状態で、利用することができるみたいです。
f:id:tyoshikawa1106:20150831022801p:plain


Tabs Componentも問題なく表示できました。実際にタブを切り替える処理までは動作確認していませんが普通に利用できそうです。
f:id:tyoshikawa1106:20150831023002p:plain


Design Systemで用意されているコンポーネントですが画面サイズに合わせて自動で幅を調整してくれるものもあります。Grid Systemも準備されているので開発で役立ちそうでした。
f:id:tyoshikawa1106:20150831023310p:plain


ちょっとした注意点として、Lightning Design SystemにはCSSファイルがVF用とそれ以外の2種類が用意されていました。この2つを比べてみたところTabsコンポーネントなどで表示のされ方が少し異なるものがありました。

Visualforce版

f:id:tyoshikawa1106:20150831023719p:plain

通常版

f:id:tyoshikawa1106:20150831023739p:plain


バージョンアップで修正が入るかもしれませんが、現状こういう違いがあることを把握しておくと後々になって困らないかなと思います。


上記キャプチャで利用したAcitivity Time Line ComponentとTabs Componentのコードはこちらです。


あとTrailheadに記載があったのですが、Lightning Design Systemを利用するときは、JavaScript Remoting または REST APIをつかったJSベースの処理を使用することが推奨されているみたいです。開発で利用する際にはこの辺りを考慮しておく必要がありそうです。


少し気になっているところで、VF開発でSVGを利用する場合、次のようにHTMLタグを宣言する必要があるのですが、showheader="true"にしたときはapplyHtmlTag="true"の宣言ができなくなります。

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

f:id:tyoshikawa1106:20150831024900p:plain


試してみた感じ問題は無さそうですが、ここのところは気にせずhtmlタグを利用しちゃっていいのかなと少し気になりました。もしかすると他に良い書き方があるかもしれないです。


とりあえず標準ヘッダーありの状態でLightning Design Systemを利用することができることを確認できて良かったです。リストやTableなどよく使われるコンポーネントは一通り用意されているので開発で役立ちそうでした。