tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceとLightning Design Systemの組み合わせを試してみました

Salesforceの公開しているCSS Framework - Lightning Design Systemが公開されたので、Visualforceページとの組み合わせを試してみました。


サンプルコードはGithubにアップしてあります。ヘッダー部分などはBootstrap SF1を使って見た目を整えています。

試してみて確認できたこと

Lightning Design Systemですが、Bootstrap SF1など他のライブラリと一緒に利用できるか気になっていたのですが、基本問題なく利用できるみたいです。


Trailheadのチュートリアルによると『slds』プレフィックスを利用することで他のCSSに影響がでないようになっているそうです。

<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
...
</div>
<!-- \ REQUIRED SLDS WRAPPER -->


『slds』プレフィックスの間違った使い方として、ページ全体に適用されるように配置するとBootstrap SF1などの他のライブラリでフォントの色が上書きされるということが発生しました。
f:id:tyoshikawa1106:20150827194840p:plain:w400

f:id:tyoshikawa1106:20150827194537p:plain


『slds』の宣言は必要な範囲内だけで適用されるように宣言する方がいいみたいです。
f:id:tyoshikawa1106:20150827195043p:plain

f:id:tyoshikawa1106:20150827195105p:plain


Lightning Design Systemで用意されているコンポーネントの中に『Activity Timeline』というコンポーネントがあります。
f:id:tyoshikawa1106:20150827195336p:plain


背景色が白以外のところで使用したときに気づいたのですが、『Activity Timeline』コンポーネントの背景色は白で指定されているみたいです。

f:id:tyoshikawa1106:20150827195503p:plain


こういった情報はSASSファイルで管理していると記載があったので、おそらくそこからカスタマイズできると思います。実際に編集するところまでは確認していませんが、それらしいファイルが見つかりました。

f:id:tyoshikawa1106:20150827195946p:plain

f:id:tyoshikawa1106:20150827195905p:plain


Lightning Design Systemで用意されているData Tableは画面サイズに合わせて自動で幅を調整してくれます。
f:id:tyoshikawa1106:20150827200147p:plain


モバイル端末で見た時のように小さい幅の場合、ヘッダー部分が左側に表示されるように変更してくれるオプションもありました。
f:id:tyoshikawa1106:20150827200231p:plain:w300


オプションを何も付けなかった時だと思うのですが、サンプルのBaseのテーブルはBootstrapで2列表示したときに幅上限を超えて表示されました。Data Tableコンポーネントを利用するときはきちんとオプションを指定しておくと安全そうです。
f:id:tyoshikawa1106:20150827200555p:plain



Bootstrapのヘッダーはclassの『navbar-fixed-top』を宣言することでヘッダー固定で表示できるようになります。ヘッダー固定に指定状態でDatepickersコンポーネントを表示してみたときに次のように表示されました。
f:id:tyoshikawa1106:20150827201113p:plain


基本的にカレンダー部分が表示されたままという使い方はあまりしないと思いますが、『navbar-fixed-top』と一緒に利用するときは注意が必要です。


今回確認できたことは以上になります。もしかすると使い方が間違っているところがあるかもしれませんが、VisualforceとLightning Design Systemの組み合わせはだいたいこんな感じだと思います。