重要なビジュアルデザインの考慮事項について

学習の目的

この単元を完了すると、次のことができるようになります。
  • Visualforce の組み込みコンポーネントのスタイル設定を変更する 2 通りの方法を説明する。
  • Salesforce Classic のスタイル設定と、CSS のスタイルシートを使用して変更可能な Lightning Experience のスタイル設定の 2 つの相違点を説明する。
  • Visualforce ページに Salesforce Lightning Design System を適用する 2 通りの方法を説明する。

重要なビジュアルデザインの考慮事項について

Visualforce ページは、Salesforce Classic と Lightning Experience のどちらで実行しても同じように表示されます (いずれかのユーザインターフェースコンテキストに合わせて改変した場合を除く)。ユーザインターフェース要素を表示する Visualforce の組み込みコンポーネントは、Lightning Experience のデザインとマッチさせるために簡単に再設定することができません。

特に組み込みの Visualforce コンポーネントによって表示される HTML は、Lightning Experience でもそのまま表示され、デフォルトでこれらのコンポーネントが使用する Salesforce Classic のスタイルシートが読み込まれます。このため、<apex:inputField>、<apex:outputField>、<apex:pageBlock> などのコンポーネントを使用したページはそのビジュアルデザインを継承し、Salesforce Classic のビジュアルデザインにマッチさせたコンポーネントを使用したページもそのマッチ度に応じたビジュアルデザインを引き継ぎます。Lightning Experience の中に Salesforce Classic が見え隠れします。

差し当たり、既存のページについての一般的な推奨事項は、Lightning Experience のビジュアルデザインに合わせようとしないことです。Lightning Experience は現在も発展途中で、現時点でスタイルをマッチさせるということは、移動中のターゲットを標的にするようなものです。たやすいことではありません。

それでも、一定のページを Lightning Experience のビジュアルデザインとマッチさせたいという場合があります。新規ページの場合、あるいは一定の作業をいとわない場合は、Lightning Experience と完全にマッチするページを作成する優れたツールがいくつか存在します。

標準コンポーネントのスタイル設定への影響

Visualforce には、標準コンポーネントのスタイル設定を調整および上書きするさまざまなオプションが用意されています。コンポーネントの外観を多少変えることが目的の場合は、これらのオプションの使用にさほど労力を要しません。スタイル設定の適用に使用可能なツールをいくつか見てみましょう。

個別のコンポーネントのスタイル設定

HTML を作成する Visualforce コンポーネントには、パススルー style および styleClass 属性があります。これらの属性を使用すると、独自のスタイルおよびスタイルクラスで、生成される HTML のデザインを制御できます。style ではコンポーネントに直接スタイルを設定でき、styleClass では他の場所で定義されたスタイル用にクラスを添付できます。たとえば、次のコードは <apex:outputText> のクラスを設定して、スタイルを適用します。
<apex:page>
    <style type="text/css">
        .asideText { font-style: italic; }
    </style>
    <apex:outputText style="font-weight: bold;"
        value="This text is styled directly."/>
    <apex:outputText styleClass="asideText"
        value="This text is styled via a stylesheet class."/>
</apex:page>

カスタムスタイルシートの追加

静的リソースと <apex:stylesheet> タグを使用すると、任意の Visualforce ページに独自のカスタムスタイルシートを追加できます。たとえば、「AppStylesheet」という静的リソースとしてアップロードしたスタイルシートを追加するには、ページに次のコードを追加します。
<apex:stylesheet value="{!$Resource.AppStylesheet}"/>
次に、以前に asideText スタイルを使用して行った場合と同様に、このスタイルシートに含まれる任意のスタイルを参照して、Visualforce タグの styleClass 属性でこれらのスタイルを参照します。

これは、CSS スタイル定義を Visualforce ページに追加する場合に推奨される方法です。ページ間でスタイルシートが共有され、各ページに追加する必要のあるマークアップが最小限に抑えられるためです。

このスタイルシート追加方法の例外となるのが、Salesforce Lightning Design System です。Lightning Design System は、自身のページにスタイルを設定する新しい画期的なツールキットです。このツールについては詳しく解説します。

Lightning Design System を静的リソースとしてアップロードし、<apex:stylesheet> を使用して参照することもできますが、もっと簡単な方法があります。ページのマークアップの任意の場所に <apex:slds /> を追加するだけです。

Lightning Experience のさまざまなスタイル

ページが Lightning Experience で実行されている場合にのみカスタムスタイルシートを読み込むには、次のマークアップを使用します。これは、「Classic と Lightning Experience 間での Visualforce ページの共有」の Visualforce マークアップの例に似ています。
<apex:page standardController="Account">
    <!-- Base styles -->
    <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}" />
    <!-- Lightning Desktop extra styles -->
    <apex:variable var="uiTheme" value="lightningDesktop"
        rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'lightning-styling.css')}" />
    </apex:variable>
    <!-- Rest of your page -->
</apex:page>

以上がツールです。次にこのいくつかの使用法を見ていきます。

スタイル設定の方法と推奨事項

Lightning Experience のビジュアルデザインにマッチさせた Visualforce ページを作成するには、Lightning Design System を使用してページを新規作成します。Visualforce ページで Lightning Design System を使用するにはいくつかの方法があります。

細かい点を見ていく前に、Lightning Experience のスタイルをページに適用するさまざまな方法の概要を検討します。ここでは特に既存のページについて説明します。

既存のページを Lightning Experience にマッチさせるスタイル設定には次の 2 通りの方法があります。
  • マークアップを変更して新しいスタイル設定に適用する — 自身のページで変更を行います。
  • 既存のマークアップのスタイル設定ルールを変更する — 自身のスタイルシートで変更を行います。

このどちらかにしなければならないわけではありません。それぞれ個別に適用したり、組み合わて使用することができます。

Lightning Design System を正しく使用するということは、Visualforce ページにまったく新しいマークアップの Lightning Design System のスタイルシートを使用することを意味します。前述のとおり、これは Lightning Experience のビジュアルデザインにマッチさせる唯一のサポートされている方法です。

このためには、Lightning Design System のスタイルシートをその Web サイトからダウンロードして他のスタイルシートと同じように使用するか、<apex:slds> コンポーネントを Visualforce ページのマークアップに追加します。<apex:slds> コンポーネントを使用すると、Lightning Design System のスタイルシートを静的リソースとしてアップロードせずに参照できるため、ページの構文を簡素化し、250 MB の静的リソース制限に達するのを回避できます。

<apex:slds> を使用する場合、固有のガイドラインと考慮事項があります。詳細は、開発者のための Lightning Design System バッジを獲得するか、「リソース」セクションにある『Visualforce 開発者ガイド』へのリンクを確認してください。

Lightning Design System のスタイルシートを追加して、そのスタイルシートを使用するようにページを修正することも可能です。どの程度の作業を要するかは、Lightning Experience にどのくらい似せるかや、コード内の実際のマークアップやコンポーネントによって異なります。この方法でもそれなりに目的を達成できますが、推奨される方法ではありません。Lightning Design System は特定のマークアップに適用するように設計されていますが、Visualforce で生成されるマークアップはこのマークアップではありません。電気抵抗のちょっとした不整合によって電気がうまく流れなくなるように、致命的な違いではありませんが、靴の中に石が入ったまま進行していくようなものです。

他にも方法があります。既存のマークアップを Lightning Experience に似せるために、既存 (あるいは新規) のスタイルシートに新しいルールやスタイルを追加するというものです。すでにページのスタイルを主として独自のスタイルシートで設定している場合は、この方法がうまくいく可能性があります。逆に、主として Visualforce の組み込みコンポーネントと Salesforce Classic のスタイル設定を使用している場合は、Salesforce Classic のスタイルシートを基にスタイルを上書きしなければなりません。

この方法は技術的に可能ながら、お勧めしません。マークアップやスタイルに望まない連動関係が生じるためです。こうした連動関係が存在するのは、Visualforce の組み込みコンポーネントによって表示される HTML の構造、ID、クラスです。ここで明確にしておきたい点は、Visualforce の組み込みコンポーネントによって表示される HTML は内部実装の細部であり、予告なしに変更される可能性があることです。独自のスタイルシートにこうした連動関係があると、最終的にスタイル設定が壊れることがあります

Salesforce Lightning Design System

Lightning Design System は、Lightning Experience のような外観のエンタープライズアプリケーションを構築するためのデザインフレームワークです。高度な CSS フレームワーク、グラフアセットのコレクション、および Salesforce Sans フォントが含まれています。Lightning Design System を使用すると、スタイリッシュで、Lightning Experience ユーザインターフェースに完璧に合わせたページを構築できます。

Lightning Design System は、お客様やパートナーが簡単に Lightning Experience のデザインと合わせられるように設計されています。さらに、全体的な Lightning Experience デザインとの一貫性を保ちつつ、色などのデザインを独自のブランドに合わせてカスタマイズできるツールも含まれています。

Lightning Design System は非常に画期的で、説明したいことがたくさんありますが、ここでは Lightning Design System の使用についての詳細には触れません。使用方法についての説明は、別個に「開発者のための Lightning Design System」モジュールを用意しました。Lightning Design System の入手方法、ページをデザインするための基本的な使用概念、それらの概念を適用して Visualforce を使用して Lightning Experience アプリケーションを構築する方法について説明しています。

「開発者のための Lightning Design System」は大きなモジュールです。バッジ獲得には労力を要します。詳細はそちらのモジュールで説明するとしても、ここで何も説明しないわけではありません。Lightning Design System を Visualforce と併せて使用する方法について全般的に説明します。

まず知っておくべきなのは、Lightning Design System は新しいマークアップ構造とスタイルクラスを前提としているということです。そのため、新しいページおよびアプリケーションに使用することが適切です。Lightning Design System は、最新ブラウザの機能に対応するように構築されていて、マークアップおよびスタイルの最新のベストプラクティスを活用しています。一方、Visualforce はしばらく前から存在しています。ほとんどの組織では、既存のページに Lightning Design System を適用すると、生成される HTML と顧客ページ内の静的コードの間に問題が発生し、困難な状況になります。

「開発者のための Lightning Design System」モジュールでは、新しいページおよびアプリケーションの作成に焦点を絞っています。バッジを獲得することで、その方法を学ぶことができます。モジュールを修了すると、Lightning Design System の使用方法と、開発を計画する方法について理解できます。