VisualforceへのSalesforce Lightning Design System (SLDS) 適用はどうします？

Visualforceへの
Salesforce Lightning Design System (SLDS)
適⽤はどうします？
作成⽇ 2017/12/11
@xlouder
Salesforce Platform Advent Calendar 2017 11⽇⽬

VisualforceにSLDSを適⽤するには下記の2つの⽅法があります
1. <apex:slds>要素を追加
2. ダウンロードしたSLDSを静的リソースに格納し、読み込んで利⽤する
尚、Salesforceの公式ドキュメントとしては、1. を推奨しています。
SLDS適⽤⽅法の種類
公式ドキュメントの記載
・LIGHTNING DESIGN SYSTEM
https://www.lightningdesignsystem.com/platforms/visualforce/
・Visualforce 開発者ガイド - Lightning Design System の使⽤
https://developer.salesforce.com/docs/atlas.ja-jp.206.0.pages.meta/pages/pages_styling_slds.htm

「1. <apex:slds>要素の追加」の設定⽅法
設定⽅法
1. Visualforce(VF)ページ内の任意の場所に <apex:slds /> を追加
メリット
• SLDSのバージョンアップ内容が⾃動的に反映される
デメリット
• SLDSのバージョンを指定できないため、
将来的に開発した画⾯の⾒た⽬が変わってしまう可能性がある
ただし下記の場合は、範囲指定クラス slds-scope を含める必要があります。
・SLDSの適⽤をページ全体ではなく範囲を指定したい時
・<apex:page>要素のapplyBodyTag または applyHtmlTag を false に設定している
例）
<div class="slds-scope"> </div>
<body class="slds-scope"> </body>

「2. SLDSを静的リソースに格納し、読み込んで利⽤する」の設定⽅法
設定⽅法
1. SLDSを(リンク先のGitHubから)ダウンロード
• https://www.lightningdesignsystem.com/downloads
2. ダウンロードしたファイルを静的リソースに格納して、VFページ内で利⽤
メリット
• 指定バージョンのSLDSが利⽤可能
• SLDSのバージョンアップに影響されない
デメリット
• SalesforceとSLDSのバージョンに差分が出た時に影響有無を確認する必要あり
• 容量に限りのある静的リソースを利⽤している

実際にやってみましょう。

使⽤するVF
⼊⼒項⽬が並んでいる、このVFページにSLDSを適⽤してみましょう。

「1. <apex:slds>要素の追加」
下記コードのように、<apex:slds>要素を追加します。

使⽤しているSLDSのバージョン確認
実際のVF画⾯を⾒てみましょう。
ブラウザの開発ツールから、使⽤されているSLDSのバージョンを確認することが可能です。
Winterʼ18 (API 41.0) 環境でのSLDSバージョンは、最新バージョン「2.4.6」ではなく少し前のバージョン(Summerʼ17)
が利⽤されているようです。
※2017/12/11 現在

VF画⾯を表⽰
設定⽅法と設定した結果を⾒てみましょう
VF画⾯(Before) VF画⾯(After)

なんということでしょう
ボタンが少し⼤きくなったり、⽇付リンクが⻘くなったり…
ほとんど変わっていません。

イメージしているSLDSを適⽤したVF画⾯
きっと、こんな画面ですよね？
Lightning Experience(LEX)標準画⾯

Winterʼ18 新機能を適⽤してみよう
Winerʼ18 のリリースノートに下記がありましたので、適⽤してみます。
Lightning Experience のスタイルシートを使⽤して既存の Visualforce ページを⾃動的にスタイル設定
https://releasenotes.docs.salesforce.com/ja-jp/winter18/release-notes/rn_vf_lightningstylesheets.htm

なんということでしょう
ヘッダーが消えたり、複数選択リストやリッチテキストエリアがおかしくなったり、真っ⽩に…
LEXに近付いた部分と、遠ざかった部分がありますね。。

実際は、
• <apex:slds>要素の追加はSLDSを利⽤できるようになるだけであり、
VFタグへの⾃動適⽤は期待できない
• SLDSに対応していないVFタグが沢⼭ある
となっているため、各要素にSLDSを適⽤する場合は、
CSSクラスを⾃分で指定する必要があります。

各要素に頑張ってCSSを適用すると・・
※<apex:slds>要素の追加と静的リソース格納と共通の内容
ごめんなさい。
ソースコードが汚くなったのでソースコード
は省略しました。

理想的なSLDSの使⽤⽅法
SLDSを綺麗に適⽤するには、HTMLタグと組み合わせるのが推奨です。
しかしコードを書くと結構⼤変だったりします。
参考に、テキスト項⽬(⼊⼒)と参照項⽬(⼊⼒)のSLDSを貼り付けます。
Lightning Design System - Input
https://www.lightningdesignsystem.com/components/input/#content
Lightning Design System - Lookups
https://www.lightningdesignsystem.com/components/lookups/#content

まとめ
• SLDSを綺麗に適⽤しようとすればするほどVFタグの利⽤は難しい
• どのレベルまでSLDSを適⽤させる必要があるのかを場⾯毎に要検討
• Classic StyleのVF画⾯開発の⽅が ”現時点では” 開発⽣産性は⾼い
• SLDSを完全に適⽤させるのであれば、Lightningコンポーネント開
発も検討した⽅が良い
• SLDS適⽤は慣れていないと⾒積りし⾟いので、プロトタイプ開発を
してみたほうが良いと思います（感想）

おまけ：サンタさんへの願い事
• <apex:slds>でSLDSのバージョン指定をできるようにしてほしい
• Visualforce開発者ガイドとSLDSのドキュメントをまとめたガイドがほしい

VisualforceへのSalesforce Lightning Design System (SLDS) 適用はどうします？

VisualforceへのSalesforce Lightning Design System (SLDS) 適用はどうします？

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to VisualforceへのSalesforce Lightning Design System (SLDS) 適用はどうします？

Similar to VisualforceへのSalesforce Lightning Design System (SLDS) 適用はどうします？ (20)

More from 寛吉田

More from 寛吉田 (8)

Recently uploaded

Recently uploaded (11)