Edited at

Salesforce Lightning Design Systemとは

More than 3 years have passed since last update.

Salesforce.comは新しいCSSフレームワークであるSalesforce Lightning Design System(SLDS)をリリースしました。

SLDSはSaelsforceのコアプロダクト(CRM製品やForce.com)で適用されているデザインを誰でも簡単に利用できるようにするために開発されたもので、以下の特徴を持っています。


  • Salesforceの提供サービスが利用している見た目に準拠

  • レスポンシブデザイン

  • SASS, LESS, StylusなどのCSSプリプロセッサに対応

  • Pure CSSフレームワークのためJavascript不要

このSLDSには業務システムを構築する上で重要なコンポーネントが数多く揃っており、またSalesforce上でなくても、もちろんSalesforceユーザでなくても誰でも自由に利用することができます。

同様のものとしてはTwitter BootstrapやGoogle Material Design、Office UI Fabricなどがありますが、SLDSは特にSalesforceに特化しており、Salesforceに組み込んだときに違和感のないUIを構築しやすいようにデザインされています

なお、BSDのオープンソースライセンスとなっていますので、商用製品に組み込むことが可能です。

Salesforce Lightning Design System

http://www.lightningdesignsystem.com/


SLDSの構造

SLDSをダウンロードして解凍すると以下のフォルダ構成になっています。

カスタマイズせずにそのまま利用するといった場合であれば、scssフォルダなど不要なものは削除してしまって構いません。

assets/



  • fonts/ - エンタープライズシステムで利用する際に美しい文字を提供することを目的に開発された"Salesforce Sans"と呼ばれる英字フォントが入っています。


  • icons/ - Design Systemのアイコンライブラリが入っています。


  • images/ - スピナーなどのその他の画像ファイルが入っています。


  • styles/ - デザインシステムを構成するコンポーネントやユーティリティのベースとなるCSSが格納されています。すべてのCSSには'''slds'''というプレフィクスが名前空間として追加されています。



    • salesforce-lightning-design-system.css - スタンドアロンのWebアプリなど、通常はこちらを利用します。


    • salesforce-lightning-design-system-vf.css - Salesforce Platform上のVisualforceページで利用する場合にはこちらを利用します。




  • scss/ - デザインシステムはSassのプリプロセッサから生成されています。もし色味や余白などのデザインをカスタマイズしたい場合にはこちらを利用します。

もしVisualforceやLightning上で利用するのであれば、すでに用意されたパッケージを利用するという手もあります。


サンプル

使い方は非常にシンプルです。ディレクトリ構造を保持した状態で、CSSを読み込むだけで利用準備は完了です。

一番外側のdivにはsldsクラスを適用し、その中で記述を行なっていきます。

例えば、Salesforceっぽい画面にはよくあるページのヘッダを記述するには以下のようになります、実際はStaticなHTMLでなく動的に生成・置き換えする部分もあるかと思いますが、デザインのイメージは分かるかと思います。


index.html

<html>

<head>
<link href="./assets/styles/salesforce-lightning-design-system.css" rel="stylesheet" style="" type="text/css"></link>
</head>
<body>
<div class="slds">
<div class="slds-page-header" role="banner">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<div class="slds-media">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
<use xlink:href="./assets/icons/standard-sprite/svg/symbols.svg#user"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-text-heading--label">ユーザレコード</p>
<div class="slds-grid">
<h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Record Title">山田 太郎</h1>
<div class="slds-col slds-shrink-none">
<button aria-live="assertive" class="slds-button slds-button--neutral slds-not-selected">
<span class="slds-text-not-selected">
<svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
<use xlink:href="./assets/icons/utility-sprite/svg/symbols.svg#add"></use>
</svg>フォロー</span>
<span class="slds-text-selected">
<svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
<use xlink:href="./assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>フォロー中</span>
<span class="slds-text-selected-focus">
<svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
<use xlink:href="./assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>あんフォロー</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="slds-col slds-no-flex slds-align-bottom">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">編集</button>
<button class="slds-button slds-button--neutral">削除</button>
<button class="slds-button slds-button--neutral">コピー</button>
<div class="slds-button--last">
<button class="slds-button slds-button--icon-border-filled">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="./assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More</span>
</button>
</div>
</div>
</div>
</div>
<div class="slds-grid slds-page-header__detail-row">
<div class="slds-col--padded slds-size--1-of-3">
<dl>
<dt>
<p class="slds-text-heading--label slds-truncate" title="Field 1">会社名</p>
</dt>
<dd>
<p class="slds-text-body--regular slds-truncate" title="グローバル光学株式会社">グローバル光学株式会社</p>
</dd>
</dl>
</div>
<div class="slds-col--padded slds-size--1-of-3">
<dl>
<dt>
<p class="slds-text-heading--label slds-truncate" title="フィールド2">Webサイト</p>
</dt>
<dd>
<a href="javascript:void(0)">http://globalp.demo</a>
</dd>
</dl>
</div>
<div class="slds-col--padded slds-size--1-of-3">
<dl>
<dt>
<p class="slds-text-heading--label slds-truncate" title="Field 4">役職</p>
</dt>
<dd>
<p>
<span>営業2部営業主任</span>
</p>
</dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>

このように記載すると実際には以下の画面が描画されます。



よくあるSalesforceのレコード編集ページのヘッダ部分ですね。

今まではCSSをHackしてなんとなくStyleを似せていた方も、きちんと仕様化されたCSSを利用してレイアウトを行うことができます。


コンポーネント

Lightning Design SystemではSalesforceでよく利用するデザインコンポーネント及び、幾つかのデザインコンポーネントを組み合わせたサンプルをあらかじめ用意しており、様々なデザインを行えるようになっておりますので、ぜひ試してみてください。

Components - Salesforce Lightning Design System

https://www.lightningdesignsystem.com/components/