Salesforce Lightning Design System（以下SLDS）をSkyVisualEditorで作成したVisualforceページに適用します。

新 しいユーザーインターフェイスであるLightning Experienceでは、Visualforceページもそのまま表示することが可能です。しかし新しいデザインで表示するためのツールとしてSLDS が公開されており、Lightning Experienceのデザインに合わせて表示することが可能です。

文字フォントタイプや文字の大きさ、入力枠のデザインやボタンの表示等、簡易的にSLDSの見た目をSkyVisualEditorページに適用させるためのファイルパックを提供します。
尚、このパックはサンプルであり、どんな画面でも完全にSLDSを適用するものではありません。利用者が見やすいようにCSSを変更している箇所もあります。（例：フォントサイズがメイリオ）
パックで提供しているファイルの内容はお好みに合わせて自由に変更してください。
Studio画面で設定した既存のプロパティ値（項目の幅や色等）は極力残しています。そのためSLDSとは異なる部分が発生しますので、運用に合わせて修正をしてください。

また、Salesforce Lightning Design Systemの詳細については下記URLを参照ください。
https://www.lightningdesignsystem.com/

1.画面例

【例1: Salesforceレイアウト画面】

【例2: 検索テンプレート画面】

 2.設定手順

SkyVisualEditorのページに当パックを設定する手順を紹介します。

1. SLDSを静的リソースのアップロード
   1. SLDSをダウンロード
      Salesforce社が公開しているSLDSのzipファイルをダウンロードします
      下記サイトの中頃にある ”Download Design System (0.12.2)” リンクをクリックし、「salesforce-lightning-design-system-0.12.2.zip」ファイルを取得します。
      http://design-system-v-0-12-2.herokuapp.com/resources/downloads/
      
      当パックでは、SLDSのVersion 0.12.2を使用して動作確認をしています。他のバージョンを使用する場合はお客様自身で動作確認をお願いします。
      
      
   2. 静的リソースにアップロード
      上記でダウンロードしたSLDSファイルを静的リソースにアップロードします。
      アップロードする際のリソース名は「SLDS012」としてください。
      
      
2. 当パックを静的リソースにアップロード
   1. 当パックのダウンロード
      当パックのファイル「SVE2SLDS.zip」を下記URLからダウンロードします。
      https://s3.amazonaws.com/www.skyvisualeditor.com/SLDS/SVE2SLDS.zip
      
   2. 静的リソースにアップロード
      上記でダウンロードした当パックファイルを静的リソースにアップロードします。
      アップロードをする際のリソース名は「SVE2SLDS」とします。
      
      
3. 作成したSkyVisualEditorページにStudio画面設定で適用
   

   1. JavaScriptのインクルード設定
      「JavaScriptインクルード設定」メニューにて下記を記述設定します。

      {!URLFOR($Resource.SVE2SLDS, 'sve2slds.js')} 

      
      
      

   2. スタイルシートのインクルード設定
      「スタイルシートインクルード設定」メニューにて下記の2つを記述設定します。

      {!URLFOR($Resource.SLDS012, 'assets/styles/salesforce-lightning-design-system-vf.css')}
      {!URLFOR($Resource.SVE2SLDS,'sve2slds.css')}   

      
      
      

   3. 各テーブルへの設定
      ページ内に各種テーブルが配置されている場合、実行される処理により画面内のテーブルのみが再描画されることがあります。その際にもデザインが適用されるために、各種テーブルのプロパティ「JavaScript」に下記のコードを記述設定します。

      input2slds(jQuery('[id$=Component138]'));
      （※ "Component138" はテーブル自身のプロパティ「ID」値）

      
      
      

   4. 重要なボタンの色
      重要なボタンや次にクリックしてほしいボタンの色を青く（反転して）表示したい場合、該当ボタンのプロパティ「スタイルクラス」に下記を記述設定をする。
      -----
      slds-button--brand
      -----
      

3.適用時のコンポーネントの変化

ページ全般的には下記の変更がありますが、特徴的な変更があるSkyVisualEditorのコンポーネントを示します。

• • フォントスタイルの変更
  • フォントサイズが大きく
  • 入力枠が大きく

デザインの適用によりSalesforce画面上の見た目が変わり、画面サイズの変更や文字が見切れてしまったりと、画面レイアウトの変更が必要になる場合がありますのでご注意ください。

コンポーネント／その他		コメント
オブジェクト項目	テキスト	オブジェクト項目全般的に、入力枠のサイズが大きくなり、フォーカスがある時の枠線が青くなります。
	選択リスト (複数選択)	文字サイズが大きくなり文字が見切れてしまう。コンポーネントの幅指定を大きくする必要あり。
	日付	文字サイズが大きくなり文字が見切れてしまう。コンポーネントの幅指定を大きくする必要あり。
SVEコンポーネント	タブ	SLDSではタブ色は白ベースですが、Studio画面で指定したプロパティ値を優先します
	データテーブル	設定手順にあるプロパティ「JavaScript」の設定が必要
	複数行表示データテーブル	設定手順にあるプロパティ「JavaScript」の設定が必要
	行動結合テーブル	設定手順にあるプロパティ「JavaScript」の設定が必要
	ボタン類	幅指定している場合、文字サイズが大きくなるため文字が見切れます。プロパティ「幅指定有り」のチェックを外す等の対応をしてください。 また、設定手順にあるボタン色の変更も可能です。

4.適用不可のSkyVisualEditorのコンポーネント

下記のコンポーネントは適用ができません。