Salesforce のLightning Design Systemの概要と使い方

Salesforce Lightning Design System とは

Salesforce Lightning Design Systemは、Lightning Experience のアプリケーションを構築するCSS フレームワークです。 Salesforce Lightning Design Systemは、Lightning Experience UIの4つの基本設計原則である明確性、効率性、一貫性、美しさに則ったアプリケーション構築のための設計言語とツールを提供します。 Salesforce Lightning Design Systemを使用して、CSS を書かずにアプリケーションを構築できます。

Salesforce Lightning Design Systemを使うメリット

Salesforce Lightning Design Systemには、以下のようなメリットがあります。 ・統一された環境と合理化されたワークフローが提供される。 ・パディングや余白などのデフォルトが過度に適用されない。 ・継続的に更新されるため、ページと Lightning Experience の一貫性が確保される。 ※最新バージョンの SLDS の使用が前提です。 ・CSS フレームワークによるアクセシビリティが高い。 ・Bootstrap などの CSS フレームワークと連携できる。 ・Visualforce ページとSalesforce モバイルアプリケーションのデザインを統一できる。 ・Visualforce ページで、各種アイコンを使用できる。 ・Salesforce モバイルアプリケーション用の Visualforce ページを作成できる。 ・画面サイズに対応するレスポンシブなユーザーインタフェイスを設計できる。

Salesforce Lightning Design Systemの使い方

Lightning Design System を使用して、Lightning Experience のスタイルで、Visualforce ページを作成します。 Lightning Design Systemは、静的リソースとしてSalesforceにアップロードせずに使用できるため、シンプルなページ構文になります。250 MBの静的リソース制限を超過することもありません。 Visualforce ページ作成などに必要なCSSファイルを含むパッケージは、Lightning Design Systemからダウンロードできます。Lightning Design Systemのトップページの[Get Design System]をクリックするとダウンロードページが表示されます。

VisualforceページでLightning Design Systemスタイルシートを使用する

ここでは、Lightning Design System スタイルシートを使用して、Visualforce ページを作成する手順を説明します。 ①ページマークアップの任意の場所に、<apex:slds /> を追加する。 ②<apex:page> の applyBodyTag 属性または applyHtmlTag 属性を false に設定する。 ③任意の SLDS スタイルまたはアセット親要素についての slds-scope クラスを含む。

Lightning Design System スタイルシートを使用するサンプル

Lightning Design System のスタイルシートを適用するサンプルを紹介します。 Lightning Design System のスタイルシートとアセットを、範囲指定クラス内のマークアップで参照できます。そのためには、applyBodyTag または applyHtmlTag を false に設定して、範囲指定クラス slds-scope を含む必要があります。

<apex:page standardController=""Account"" applyBodyTag=""false""<apex:slds />
<!-- any Visualforce component should be outside SLDS scoping element -->
<apex:outputField value=""{!Account.OwnerId}"" />
<div class=""slds-scope"">
<!-- SLDS markup here -->
</div>
</apex:page>
</apex:page>

Lightning Design System のアセットを参照するサンプル

SVG アイコンや画像など、Lightning Design System のアセットを参照するサンプルを紹介します。 SVG アイコンの参照には、URLFOR() 数式関数と $Asset グローバル変数を使用します。html タグ内で、xmlns=””http://www.w3.org/2000/svg”” と xmlns:xlink=””http://www.w3.org/1999/xlink”” を 使用して、必要な XML 名前空間を追加します。 SVG アイコンを使用できるのは、showHeader、standardStylesheets、および sidebar が false に設定されていることが前提です。

<svg aria-hidden=""true"" class=""slds-icon"">
<use xlink:href=""{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}""></use>
</svg>

Salesforce Lightning Design Systemのアイコンの使い方

Salesforce Lightning Design Systemを使用してユーザインタフェースを作成する際、Lightning Experience開発に使用されたアイコン、カラーパレット、フォントなどの素材を使えます。 ここではアイコンの種類や使い方について説明します。

Salesforce Lightning Design Systemのアイコンタイプと役割

Salesforce Lightning Design Systemでは、オブジェクト、ユーティリティ、アクション、およびDoctypeの4つの主要なアイコンタイプと、Salesforce製品のブランドを示す製品アイコンの、計5種類のアイコンが使用されています。 各アイコンタイプはデザイン要素の一貫性を保っています。これらのアイコンタイプには、それぞれの役割とルールがあります。

ユーティリティアイコン

ユーティリティアイコンは、ダイアログを閉じる、検索する、メニューを開く、フィード投稿を共有するなどのUI固有のアクションを示します。 テキストと組み合わせもしくは単独で使用です。シンプルな単色の画像で背景はなく、画像の色は任意に変更できます。

オブジェクトアイコン

オブジェクトアイコンには、アカウント、リード、商談、ケースなどを示す標準のオブジェクトアイコンと、カスタムオブジェクトの作成に使用される一意のカスタムオブジェクトアイコンの2種類があります。 モバイルアプリケーションとデスクトップアプリケーションで使用されています。 4pxカラーの角丸正方形の背景と白い画像の組みあわせです。特定のカラーパレットを使用します。

アクションアイコン

アクションアイコンは、実行できるアクションを示す重要なアイコンで、モバイルアクションバーに表示されます。 タッチデバイス固有のアイコンで、カラーの円の背景と白い画像で構成されています。特定のカラーパレットを使用します。

Doctypeアイコン

Doctypeアイコンは、ドキュメントファイルを示すアイコンです。ドキュメントファイルの種類を表す白い文字と、背景は角が折りたたまれた紙のイメージです。モバイルアプリケーションとデスクトップの両方で使用されます。

製品アイコン

製品アイコンは、Salesforce製品のブランドを表すアイコンです。デスクトップでは、アプリランチャーとSalesforceアプリケーションウィンドウの左上、そしてモバイルデバイスのホーム画面で使用されています。 白い背景に4pxの丸みのあるストロークの2色の画像の組み合わせで、フルカラーの製品公式のカラーパレットを使用しています。

Salesforce Lightning Design System のアイコン使用のサンプル

Salesforce Lightning Design Systemでは、個別のSVGスプライトを使用してアイコンを作成できます。各アイコンタイプのサンプルを紹介します。 Usehrefタグで、アイコンのハッシュ/ ID値を指定し、アイコンSVGスプライトにリンクします。 サンプルでは、ハッシュ/ ID値を“iconsamle”としていますが、Lightning Design System のアイコンページで参照できます。

標準のオブジェクトアイコンのサンプル

標準のオブジェクトアイコンのサンプルです。

<span class=""slds-icon_container slds-icon-standard-account"" title=""Description of icon when needed"">
<svg class=""slds-icon"" aria-hidden=""true"">
<use xlink:href=""/assets/icons/standard-sprite/svg/symbols.svg#iconsample""></use>
</svg>
<span class=""slds-assistive-text"">Description of icon when needed</span>
</span>

カスタムのオブジェクトアイコンのサンプル

カスタムのオブジェクトアイコンのサンプルです。

<span class=""slds-icon_container slds-icon-custom-custom5"" title=""Description of icon when needed"">
<svg class=""slds-icon"" aria-hidden=""true"">
<use xlink:href=""/assets/icons/custom-sprite/svg/symbols.svg#iconsamle""></use>
</svg>
<span class=""slds-assistive-text"">Description of icon when needed</span>
</span>

アクションアイコンのサンプル

アクションアイコンのサンプルです。

<span class=""slds-icon_container slds-icon_container_circle slds-icon-action-description"" title=""Description of icon when needed"">
<svg class=""slds-icon"" aria-hidden=""true"">
<use xlink:href=""/assets/icons/action-sprite/svg/symbols.svg#iconsample""></use>
</svg>
<span class=""slds-assistive-text"">Description of icon when needed</span>
</span>

Doctypeアイコンのサンプル

Doctypeアイコンのサンプルです。

<span class=""slds-icon_container slds-icon-doctype-xml"" title=""Description of icon when needed"">
<svg class=""slds-icon"" aria-hidden=""true"">
<use xlink:href=""/assets/icons/doctype-sprite/svg/symbols.svg#iconsample""></use>
</svg>
<span class=""slds-assistive-text"">Description of icon when needed</span>
</span>

Salesforce Lightning Design Systemを活用しよう

Salesforce Lightning Design System の概要と使い方について紹介しました。 Salesforce Lightning Design Systemでは、CSSを書かないで、Lightning Experience スタイルのVisualforceページやHEOROKUの静的ページを作成できます。Lightning Experience で使用されているアイコンなどを使用でき、それらを開発者が用意しなくてよくなるというメリットもあります。 Salesforce Lightning Design Systemを理解して活用しましょう。]]>