SFDC：TrailheadのLightning Design Systemをやってみました

f:id:tyoshikawa1106:20150827003919p:plain

TrailheadでLightning Design Systemをやってみました。

Understanding Key Principles behind the Design System

Design Systemには以下のリソースが用意されています。
- CSS framework
- Icons
- Font
- Design Tokens (色、フォント、間隔、サイズが変数で管理されているのでカスタマイズできる。たぶんSassのこと。)
- 他のCSSに影響がでないようにslds- プレフィックスがついています。

Design Systemは以下の開発で利用できます。
Visualforce
Lightning pages and components
Mobile apps
Standalone web apps (HerokuのアプリなどSFDC外でも使えます。)

Getting Started with the Design System

Salesforceで利用するときは静的リソースにアップします。
- 未管理パッケージをインストールするかダウンロードページから必要なファイルをダウンロードできます。

Quick Tour of the Design System

ファイル構成は次のとおりです。

assets
- fonts: Salseforceの用意したフォント
- icons: Design Systemで利用できるアイコン
- images: Design Systemで利用できる画像
- styles: 基本のCSS。Visualforce用とLightning/スタンドアロン開発用の二種類が用意されています。
- SCSS: フォントサイズや間隔などの設定情報をカスタマイズできます。

CSSの読み込み例です。

<apex:stylesheet value="{!URLFOR($Resource.SLDS080, 'assets/styles/salesforce-design-system-vf.css')}" />

Create a first page

簡単なサンプルコードとそれで表示できる画面が紹介されていました。
f:id:tyoshikawa1106:20150827005354p:plain

Design SystemではSVGタグを利用します。VisualforceではSVGタグで使うuseタグはそのままでは利用できないのですが、下記のタグを宣言することで利用できるようになるみたいです。

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

開発するときは最初にdivタグでclass="slds"を宣言するといいみたいです。

<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
...
</div>
<!-- \ REQUIRED SLDS WRAPPER -->

Understanding the Grid System

ここではグリッドシステムの使い方が紹介されていました。

<div class="slds-grid">
  <div class="slds-col">Column 1</div>
  <div class="slds-col">Column 2</div>
  <div class="slds-col">Column 3</div>
</div>

その他サンプルコードがいくつか紹介されています。

Working with Salesforce Data

Data Table Componentについて紹介していました。slds-table classを使うみたいです。

<table class="slds-table slds-table--bordered">
  <thead>
    <tr>
      <th scope="col">Account ID</th>
      <th scope="col">Account name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">123</th>
      <td>Account 1</td>
    </tr>
    <tr>
      <th scope="row">456</th>
      <td>Account 2</td>
    </tr>
  </tbody>
</table>

Dynamic Dataのところでは、Design Systemを利用するときはJavaScript Remoting または REST APIをつかったJSベースの処理を使用するようにしましょうと記載がありました。

Using Images, Icons and Avatars

画像表示やアイコン表示などについて紹介されていました。サンプルでは画像URLは静的リソースから読んでいなかったのでもしかしていけるのかなと思ったのですが、きちんと静的リソースから呼ぶ必要がありました。

Design SystemではSVG sprite mapsが提供されています。注意事項としてGoogle ChromeやFirefox、SafariはSVG sprite mapsをサポートしていますが、IE11はサポートされていません。IE11で利用する場合は、Javascriptライブラリの「svg4everybody」を使用すればいいみたいです。<a href="https://github.com/jonathantneal/svg4everybody">jonathantneal/svg4everybody</a>