【Salesforce】Lightning Design Systemを使ってVisualforceでLightning風のページを作ってみる

#JavaScript

#Salesforce

西村祐二

2017.06.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも！西村祐二＠大阪です。

SalesforceにはLightning ExperienceとSalesforce Classicの2つの異なるUIがあります。
Visualforceは主にSalesforce ClassicのUIを作成する際に使用するWeb開発フレームワークです。

今回、「Lightning Design System」を使って
Lightning風(現在主流のUI)のVisualforceページを作成してみたいと思います。
作成するページの内容はTrailheadを参考に取引先責任者リストを表示するページを作成してみたいと思います。

2017-06-22 16.48.52

Lightning Design Systemとは

Lightning Design Systemとは
Salesforceが提供しているCSSフレームワークです。
イメージとしてはTwitter BootstrapのSalesforce版です。
Saleforceで使われているLightningのアイコンやスタイルを利用することができます。

2017-06-23 1.57.49

さっそく、Lightning Design Systemを使ってページを作ってみましょう。

環境

・Developer Edition
　※デモ用のデータがあらかじめ入っているためオススメです。

・バージョン：40

完成画面

今回作成するページの完成画面は下記のようになります。

2017-06-23 1.46.40

比較のため通常のUIは下記のようになります。

2017-06-23_2_10_50

手順

▼「開発者コンソール」を開きます。

2017-06-23 2.15.59

▼「Visualforce Page」を新規作成します。ページ名は今回「test_slds」としています。

2017-06-23 2.19.56

▼下記プログラム貼り付け「Preview」をクリックします。
すると完成画面のようながページが表示されるかと思います。
Lightning Design SystemはファイルをSalesforceにアップロードせずに利用することができます。

※プログラムはTrailheadをもとにしております。予めご了承ください。

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="ja">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>Salesforce Lightning Design System</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Import the Design System style sheet -->
      <apex:slds />
    </head>

    <apex:remoteObjects >
      <apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
    </apex:remoteObjects>

    <body>
      <!-- REQUIRED SLDS WRAPPER -->
      <div class="slds-scope">
        <!-- MASTHEAD -->
        <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System </p>
        <!-- / MASTHEAD -->
        <!-- PAGE HEADER -->
        <div class="slds-page-header">
          <!-- LAYOUT GRID -->
          <div class="slds-grid">
            <!-- GRID COL -->
            <div class="slds-col slds-has-flexi-truncate">
              <!-- HEADING AREA -->
              <!-- MEDIA OBJECT = FIGURE + BODY -->
              <div class="slds-media slds-no-space slds-grow">
                <div class="slds-media__figure">
                  <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact">
                    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
                  </svg>
                </div>
                <div class="slds-media__body">
                  <p class="slds-text-title--caps slds-line-height--reset">Contacts</p>
                  <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="My Contacts">顧客リスト</h1>
                </div>
              </div>
              <!-- / MEDIA OBJECT -->
              <!-- /HEADING AREA -->
            </div>
            <!-- ACTION BUTTONS -->
            <div class="slds-col slds-no-flex slds-grid slds-align-top">
              <div class="slds-button-group" role="group">
                <button class="slds-button slds-button--neutral">Add Contact </button>
                <button class="slds-button slds-button--neutral">More </button>
              </div>
            </div>
            <!-- / ACTION BUTTONS -->
          </div>
          <!-- / LAYOUT GRID -->
        </div>
        <!-- / PAGE HEADER -->
        <!-- PRIMARY CONTENT WRAPPER -->
        <div class="myapp slds-p-horizontal--medium">
          <ul id="contact-list" class="slds-has-dividers--bottom-space"></ul>
        </div>
        <!-- / PRIMARY CONTENT WRAPPER -->

        <!-- FOOTER -->
        <footer role="contentinfo" class="slds-p-around--large">
          <!-- LAYOUT GRID -->
          <div class="slds-grid slds-grid--align-spread">
            <p class="slds-col">Salesforce Lightning Design System Example</p>
            <p class="slds-col">© Your Name Here</p>
          </div>
          <!-- / LAYOUT GRID -->
        </footer>
        <!-- / FOOTER -->
      </div>
      <!-- / REQUIRED SLDS WRAPPER -->


<!-- JAVASCRIPT -->
<script>
  (function() {
    'use strict';
    var contact = new SObjectModel.Contact();
    var contactList = document.getElementById('contact-list');

function createTile (record) {
  return [
    '<li class="slds-item">',
      '<div class="slds-tile slds-media">',
        '<div class="slds-media__figure">',
          '<img class="slds-avatar slds-avatar--medium" src="', record.get('PhotoUrl'), '" alt="" />',
        '</div>',
        '<div class="slds-media__body">',
          '<h3 class="slds-truncate" title="', record.get('Name'), '"><a href="javascript:void(0);">', record.get('Name') ,'</a></h3>',
          '<div class="slds-tile__detail slds-text-body--small">',
            '<p class="slds-truncate">', record.get('Title') ,'</p>',
          '</div>',
        '</div>',
      '</div>',
    '</li>'
  ].join('');
}

    contact.retrieve(
      { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
      function(error, records) {
        if (error) {
          alert(error.message);
        } else {
          contactList.innerHTML = records.map(createTile).join('');
        }
      }
    );
  })();

</script>
<!-- / JAVASCRIPT -->
    </body>
  </html>
</apex:page>

解説

「Lightning Design System」を利用するにあたりハマそうなとろこを中心に解説していきます。

▼2行目
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
Lightning Design SystemのSVGアイコンを使用するための宣言です。

▼9行目
<apex:slds />
Lightning Design SystemのスタイルとアセットをVisualforceページにインポートします。

▼12行目
<apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
「Contact」へアクセスし、javascriptで呼び出せるようになります。
apex:remoteObjectsはとても便利です。

▼18行目から72行目
<div class="slds-scope">...</div>
Lightning Design Systemの適用範囲です。

▼31行目から35行目

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

$Assetグローバル変数を使用して、
Lightning Design Systemに含まれる画像やその他のアセットにアクセスできます。
jpg画像を利用する際は下記のようになります。

<span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
    <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar" />
</span>