進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Salesforce Lightning Design System を使用した Visualforce ページのスタイル設定

学習の目的

この単元を完了すると、次のことができるようになります。
  • Salesforce Lightning Design System (SLDS) とは何か、およびその用途について説明する。
  • Visualforce の開発で SLDS を使用する方法を説明する。
  • SLDS を使用して Salesforce アプリケーション向けの Visualforce ページにスタイルを設定する。

Salesforce アプリケーションの Visualforce ページでの SLDS の使用

Salesforce Lightning Design System (SLDS) を使用すると、当社の最新ユーザインターフェースのデザインを踏襲したアプリケーションを構築して、Salesforce アプリケーションと Lightning Experience の両方で使用できます。Lightning Design System は CSS フレームワークで、Salesforce のこの新しいデザインを創出するために当社の開発者が使用しているアイコンやカラーパレット、フォントなどを利用できます。

前回の単元で作成した [Latest Accounts (最近の取引先)] ページは便利な機能です。けれども、このページが Salesforce アプリケーションの他の部分と一致していればいいのにとは思いませんか? 「何だか大変そう。Salesforce アプリケーションの CSS をリバースエンジニアリングするのに開発者チーム全体を要するかもしれない」

と思っているかもしれません。当社では、自らが開発した新しいユーザインターフェースをとても気に入っています。Lightning Experience によってエンタープライズユーザの操作水準が向上しています。Lightning Design System があれば、CSS を 1 行も記述することなく、アプリケーション内の Salesforce アプリケーションや Lightning Experience のデザインを統一させることができます。

Lightning Design System と言うと舌を噛みそうなため、ここからは SLDS ということにします。

SLDS の利点と利用法

SLDS は、Salesforce アプリケーションや Lightning Experience の原則、設計言語、ベストプラクティスと一貫するアプリケーションを作成するためのツールとなります。SLDS が極めて便利なものである理由から説明しましょう。
  • 既存の機能を拡張したり、外部システムと統合したりする場合に、エクスペリエンスを統合し、ワークフローを合理化することができる。
  • エンタープライズアプリケーションで一般的なユーザインターフェースのパターンを特に念頭に置いて設計されている。
  • 継続的に更新されている。SLDS の最新バージョンを使用している限り、ページが常に Lightning Experience と一貫したものになります。

素晴らしいですよね? では、Salesforce アプリケーション向けの開発で SLDS をどのように使用するのでしょうか? この使用法については次の単元で説明します。

Salesforce アプリケーション向けの Visualforce ページの SLDS タグ

SLDS を使用すれば、Salesforce アプリケーションのデザインと一致する Visualforce ページを構築できます。SLDS を使用するために必要なことは、コードをわずかに調整し、2 ~ 3 の注意点を覚えておくだけです。ほとんどの場合、SLDS を使用する Visualforce コードは「とりあえず機能します」。

SLDS を使用して Visualforce ページを作成する基本的なフレームワークを使用してみましょう。

  • SLDS をページに追加するには、<apex:slds /> タグをページの任意の場所に追加します。<apex:slds /> タグによって SLDS スタイルシートがインポートされるため、自身でスタイルを設定する必要がありません。
  • SLDS 要素を、範囲指定クラス <div class="slds-scope">...</div> でラップします。範囲指定クラスを使用する目的は、SLDS のスタイル設定ルールが他のコンポーネントのスタイル設定ルールと競合しないようにするためです。

    メモ

    メモ

    Visualforce での SLDS コンポーネントの使用についての詳細は、「Lightning Design System の使用」を参照してください。

  • SLDS SVG スプライトマップのアイコンを使用するには、xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink」 属性をページの <html> タグに追加します。
以下は、これらのタグを組み込んだサンプルコードです。現段階では詳細を気にする必要はありません。次のセクションで、実際のコードをいくつか見ていきます。
<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="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>Salesforce Lightning Design System Trailhead Module</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <!-- Import the Design System style sheet -->
      <apex:slds />
    </head>
    <body>

      <div class="slds-scope">
        <!-- your page content goes here -->
      </div>

    </body>
  </html>
</apex:page>
メモ

メモ

<apex:pageblock><apex:inputField> などの Apex タグは SLDS での使用がサポートされていません。

SLDS を使用した Visualforce ページの作成

では、SLDS を使用するページを作成してみましょう。ここでは、前回の単元で SLDS を使用して作成した [Latest Accounts (最近の取引先)] ページにスタイルを設定します。
  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「LatestAccountsSLDS」と入力します。
  2. エディタで、任意のマークアップを次のように置き換えます。
    <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="en">
        <head>
          <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <title>SLDS LatestAccounts Visualforce Page in Salesforce Mobile</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
    
          <!-- Import the Design System style sheet -->
          <apex:slds />
        </head>     
        <body>
    
          <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
    
             <!-- PRIMARY CONTENT WRAPPER -->
             <div class="myapp">
    
             </div>
             <!-- / PRIMARY CONTENT WRAPPER -->
    
          </div>
          <!-- / REQUIRED SLDS WRAPPER -->
    
          <!-- JAVASCRIPT -->
          <!-- / JAVASCRIPT -->
        </body>
      </html>
    </apex:page>
    これは更新された [Latest Accounts (最近の取引先)] ページのスケルトンです。ここに表示されるコードの大半は、SLDS を使用するどの Visualforce ページにも必要です。
    • <apex:slds /> タグによって SLDS スタイルシートにアクセスできるようになります。このコンポーネントは、SLDS を静的リソースとしてアップロードする方法の簡単な代替法です。
    • SLDS スタイルのコンテンツはすべて <div class="slds-scope"> で囲む必要があります。このタグ内の要素にのみ SLDS スタイルが適用されます。
  3. では、一定のコンテンツを追加してみましょう。取引先レコードにリモートオブジェクトとしてアクセスするために、</head> タグと <body> タグの間に次のコードを挿入します。
    <apex:remoteObjects >
      <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
    </apex:remoteObjects>
  4. 次に、<div class="myapp"> の後に、slds-p-vertical--medium クラスの縦方向パディングを指定した account-list <div> を追加します。JavaScript によってこの <div> にごく最近アクセスした取引先のリストが挿入されます。
    <!-- ACCOUNT LIST TABLE -->
      <div id="account-list" class="slds-p-vertical--medium"></div>
    <!-- / ACCOUNT LIST TABLE -->
  5. 最後に、</body> タグの前に次の JavaScript コードを追加します。前回の単元で記述した JavaScript とよく似ていますよね? 基本的な考え方は同じです。この唯一の変更点は、SLDS に必要なマークアップとスタイル設定の使用に関することのみです。各自のコードでは、この JavaScript を個別の静的リソースに配置することをお勧めします。
    <script>
    (function() {
      var outputDiv = document.getElementById('account-list');
      var account = new SObjectModel.Account();
    
      var updateOutputDiv = function() {
    
        account.retrieve(
          { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
          function(error, records) {
            if (error) {
              alert(error.message);
            } else {
              // create data table
              var dataTable = document.createElement('table');
               dataTable.className = 'slds-table slds-table--bordered slds-text-heading_small';
    
              // add header row
              var tableHeader = dataTable.createTHead();
              var tableHeaderRow = tableHeader.insertRow();
    
              var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
              tableHeaderRowCell1.appendChild(document.createTextNode('Latest Accounts'));
              tableHeaderRowCell1.setAttribute('scope', 'col');
              tableHeaderRowCell1.setAttribute('class', 'slds-text-heading_medium');
    
              // build table body
              var tableBody = dataTable.appendChild(document.createElement('tbody'))
    
              var dataRow, dataRowCell1, recordName, data_id;
              records.forEach(function(record) {
                dataRow = tableBody.insertRow();
                dataRowCell1 = dataRow.insertCell(0);
                recordName = document.createTextNode(record.get('Name'));
                dataRowCell1.appendChild(recordName);
    
              });
              if (outputDiv.firstChild) {
                // replace table if it already exists
                // see later in tutorial
                outputDiv.replaceChild(dataTable, outputDiv.firstChild);
              } else {
                outputDiv.appendChild(dataTable);
              }
            }
          }
        );
      }
      updateOutputDiv();
    })();
    </script>
    このコードは、リモートオブジェクト経由で取引先レコードにアクセスし、updateOutputDiv() 関数がそのレコードを使用して account-list <div> 内にテーブルを表示します。
お疲れ様でした。次に、Visualforce ページを Salesforce アプリケーションに追加しましょう。

SLDS Visualforce ページの Salesforce アプリケーションへの追加

先行の単元と同じプロセスを使用して、スタイル設定されたページをモバイルアプリケーションに追加します。
  1. [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択して、モバイルアプリケーションのページを有効にします。
    モバイルアプリケーションのページを有効にする方法については、前の単元で説明しました。
  2. Visualforce ページのタブを作成します。
    1. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択します。
    2. [Visualforce タブ] セクションで、[新規] をクリックします。
    3. [Visualforce ページ] ドロップダウンリストで、[LatestAccountsSLDS] を選択します。
    4. [タブの表示ラベル] 項目に「SLDS Latest Accounts (SLDS 最近の取引先)」と入力します。
      [タブ名] 項目は自動的に入力されます。
    5. [タブスタイル] 項目をクリックして [ダイアモンド] スタイルを選択します。
      このスタイルのアイコンは、Salesforce アプリケーションナビゲーションメニューのページのアイコンとして表示されます。
    6. [次へ] をクリックし、[次へ] をもう一度クリックしてから [保存] をクリックします。
  3. タブを Salesforce アプリケーションナビゲーションメニューに追加します。
    1. [設定] から、[クイック検索] ボックスに「モバイルアプリケーション」と入力し、[Salesforce] | [Salesforce ナビゲーション]を選択します。
    2. [Latest Accounts (最近の取引先)] タブを選択し、[追加] をクリックします。
      [Latest Accounts (最近の取引先)] 項目が [選択済み] リストの一番下に追加されます。
    3. [保存] をクリックします。
    モバイルスタイル設定後の [Latest Accounts (最近の取引先)] ページご覧ください! [SLDS Latest Accounts (SLDS 最近の取引先)] ページが Salesforce アプリケーションの他の部分と見事に調和しています。
    メモ

    メモ

    このモジュールでは、SLDS について事細かに説明することはできません。「Lightning Design System」モジュールや Lightning Design System Web サイトで SLDS の他の優れたアプリケーションを確認することをお勧めします。