読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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

salesforce.com Lightning Trailhead

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」を使用すればいいみたいです。

Laying out a Record Home Page and Using Advanced Components

このモジュールの最後のユニットです。ここでは実際にLightning Componentをひとつ作成する方法が紹介されていました。
f:id:tyoshikawa1106:20150827021542p:plain


TrailheadのLightning Design Systemのモジュールはだいたいこんな感じの内容でした。
f:id:tyoshikawa1106:20150827022105p:plain