Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

655 views

Published on

VisualforceページへのSalesforce Lightning Design System適用について

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Visualforceへの Salesforce Lightning Design System (SLDS) 適⽤はどうします? 作成⽇ 2017/12/11 ​@xlouder Salesforce Platform Advent Calendar 2017 11⽇⽬
  2. 2. 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
  3. 3. 「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>
  4. 4. 「2. SLDSを静的リソースに格納し、読み込んで利⽤する」の設定⽅法 設定⽅法 1. SLDSを(リンク先のGitHubから)ダウンロード • https://www.lightningdesignsystem.com/downloads 2. ダウンロードしたファイルを静的リソースに格納して、VFページ内で利⽤ メリット • 指定バージョンのSLDSが利⽤可能 • SLDSのバージョンアップに影響されない デメリット • SalesforceとSLDSのバージョンに差分が出た時に影響有無を確認する必要あり • 容量に限りのある静的リソースを利⽤している
  5. 5. ​実際にやってみましょう。
  6. 6. 使⽤するVF ​⼊⼒項⽬が並んでいる、このVFページにSLDSを適⽤してみましょう。
  7. 7. 「1. <apex:slds>要素の追加」 下記コードのように、<apex:slds>要素を追加します。
  8. 8. 使⽤しているSLDSのバージョン確認 実際のVF画⾯を⾒てみましょう。 ブラウザの開発ツールから、使⽤されているSLDSのバージョンを確認することが可能です。 Winterʼ18 (API 41.0) 環境でのSLDSバージョンは、最新バージョン「2.4.6」ではなく少し前のバージョン(Summerʼ17) が利⽤されているようです。 ※2017/12/11 現在
  9. 9. VF画⾯を表⽰ ​設定⽅法と設定した結果を⾒てみましょう VF画⾯(Before) VF画⾯(After)
  10. 10. なんということでしょう ボタンが少し⼤きくなったり、⽇付リンクが⻘くなったり… ほとんど変わっていません。
  11. 11. イメージしているSLDSを適⽤したVF画⾯ きっと、こんな画面ですよね? Lightning Experience(LEX)標準画⾯
  12. 12. Winterʼ18 新機能を適⽤してみよう ​Winerʼ18 のリリースノートに下記がありましたので、適⽤してみます。 ​Lightning Experience のスタイルシートを使⽤して既存の Visualforce ページを⾃動的にスタイル設定 https://releasenotes.docs.salesforce.com/ja-jp/winter18/release-notes/rn_vf_lightningstylesheets.htm
  13. 13. VF画⾯を表⽰ ​設定⽅法と設定した結果を⾒てみましょう VF画⾯(Before) VF画⾯(After)
  14. 14. なんということでしょう ヘッダーが消えたり、複数選択リストやリッチテキストエリアがおかしくなったり、真っ⽩に… LEXに近付いた部分と、遠ざかった部分がありますね。。
  15. 15. 実際は、 • <apex:slds>要素の追加はSLDSを利⽤できるようになるだけであり、 VFタグへの⾃動適⽤は期待できない • SLDSに対応していないVFタグが沢⼭ある となっているため、各要素にSLDSを適⽤する場合は、 CSSクラスを⾃分で指定する必要があります。
  16. 16. 各要素に頑張ってCSSを適用すると・・ ​※<apex:slds>要素の追加と静的リソース格納と共通の内容 ​ごめんなさい。 ソースコードが汚くなったのでソースコード は省略しました。
  17. 17. 理想的な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
  18. 18. まとめ • SLDSを綺麗に適⽤しようとすればするほどVFタグの利⽤は難しい • どのレベルまでSLDSを適⽤させる必要があるのかを場⾯毎に要検討 • Classic StyleのVF画⾯開発の⽅が ”現時点では” 開発⽣産性は⾼い • SLDSを完全に適⽤させるのであれば、Lightningコンポーネント開 発も検討した⽅が良い • SLDS適⽤は慣れていないと⾒積りし⾟いので、プロトタイプ開発を してみたほうが良いと思います(感想)
  19. 19. おまけ:サンタさんへの願い事 • <apex:slds>でSLDSのバージョン指定をできるようにしてほしい • Visualforce開発者ガイドとSLDSのドキュメントをまとめたガイドがほしい

×