この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ユーザに表示する Salesforce スタイルの識別

Visualforce ページを作成する場合、期待される Salesforce のデザインを知っておくと、そのスタイルにマッチしたページを表示するのに役立ちます。たとえば、ユーザがデザインをカスタマイズするかどうか選択できるとします。Visualforce ページは、その違いを考慮して設計する必要があります。

ユーザに表示するスタイルを識別するには、$User.UITheme と $User.UIThemeDisplayed という 2 つのグローバル変数が役立ちます。これら 2 つの変数は、$User.UITheme がユーザに表示すべきデザインを返し、$User.UIThemeDisplayed が実際のデザインを返すという点で異なります。たとえば、ユーザは Lightning Experience のデザインを表示する設定と権限を持っている場合がありますが、そのデザインをサポートしていないブラウザを使用していると、旧バージョンの Internet Explorer などで $User.UIThemeDisplayed が異なる値を返す場合があります。

どちらの変数も、次の値のいずれかを返します。

Theme1 — 古い Salesforce テーマ
Theme2 — Salesforce Classic 2005 ユーザインターフェースのテーマ
Theme3 — Salesforce Classic 2010 ユーザインターフェースのテーマ
Theme4d — 最新の「Lightning Experience」 Salesforce のテーマ
Theme4t — Salesforce モバイルアプリケーションのテーマ
Theme4u — Lightning コンソールのテーマ
PortalDefault — Salesforce カスタマーポータルのテーマ
Webstore — Salesforce AppExchange のテーマ

開発者が Salesforce に似た CSS スタイルをハードコードしたとします。Visualforce ページで新しいスタイルについても同じデザインを維持するために、開発者はユーザの設定に合わせるために複数のスタイルシートの中から選択する必要があります。次の例に、それを実現する方法の 1 つを示します。

1<apex:page standardController="Account">
2    <apex:variable var="newUI" value="newSkinOn" 
3        rendered="{!$User.UIThemeDisplayed = 'Theme3'}">
4        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'newStyles.css')}" />
5    </apex:variable>
6    <apex:variable var="oldUI" value="oldSkinOn" 
7        rendered="{!$User.UIThemeDisplayed != 'Theme3'}">
8        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'oldStyles.css')}" />
9    </apex:variable>
10    <!-- Continue page design -->
11</apex:page>

この例では、次の点に留意してください。

表示するセクションを「切り替え」るには rendered 属性を使用する。
<apex:stylesheet> タグには rendered 属性がないため、この属性があるコンポーネントでラップする必要がある。

ユーザ向けに新しいデザインを有効にしても、ユーザがそれを表示するための適切��ブラウザやアクセシビリティの設定を行っていない可能性があります。次のコード例では、$User.UITheme 変数を使用して代替情報をユーザに表示します。

1<apex:page showHeader="true" tabstyle="Case">
2    <apex:pageMessage severity="error" rendered="{!$User.UITheme = 'Theme3' && 
3                                                    $User.UIThemeDisplayed != 'Theme3'}">
4    We've noticed that the new look and feel is enabled for your organization. 
5    However, you can't take advantage of its brilliance. Please check with 
6    your administrator for possible reasons for this impediment.
7    </apex:pageMessage>
8    <apex:ListViews type="Case" rendered="{!$User.UITheme = 'Theme3' && 
9                                           $User.UIThemeDisplayed = 'Theme3'}"/>
10</apex:page>

$User.UITheme は Theme3 と同じですが、$User.UIThemeDisplayed は異なります。そのため、ページは最大限まで表示されません。

Visualforce 開発者ガイド

ユーザに表示する Salesforce スタイルの識別