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

学習の目的

この単元を完了すると、次のことができるようになります。

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 ページに独自のカスタムスタイルシートを追加できます。たとえば、ページにスタイルシートファイル app-styles.css を追加しましょう。

app-styles.css が「AppStylesheet」というスタンドアロンの静的リソースとしてアップロードされている場合は、ページに次のコードを追加します。

<apex:stylesheet value="{!$Resource.AppStylesheet}"/>

app-styles.css が「AppStyles」という静的リソースアーカイブ (.zip または .jar ファイルなど) に含まれている場合は、URLFOR 関数を使用します。最初のパラメーターでアーカイブ名を指定し、2 つ目のパラメーターでアーカイブ内の app-styles.css へのパスを指定します。

<apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}"/>

次に、以前に 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> を使用する場合、固有のガイドラインと考慮事項があります。詳細は、「リソース」セクションにある『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 は、最新ブラウザーの機能に対応するように構築されていて、マークアップおよびスタイルの最新のベストプラクティスを活用しています。一方、Visualforce はしばらく前から存在しています。ほとんどの組織では、既存のページに Lightning Design System を適用すると、生成される HTML と顧客ページ内の静的コードの間に問題が発生し、困難な状況になります。

リソース

Visualforce 開発者ガイド: Visualforce ページの外観と出力のカスタマイズ
Visualforce 開発者ガイド: Lightning Design System の使用
Lightning Design System for Developers: Components Overview (開発者のための Lightning Design System: コンポーネントの概要)
Lightning Design System for Developers: Components: Buttons (開発者のための Lightning Design System: コンポーネント: ボタン)