ユーザーに表示する 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 — AppExchange のテーマ
開発者が Salesforce に似た CSS スタイルをハードコードしたとします。Visualforce ページで新しいスタイルについても同じデザインを維持するために、開発者はユーザーの設定に合わせるために複数のスタイルシートの中から選択する必要があります。次の例に、それを実現する方法の 1 つを示します。
この例では、次の点に留意してください。
- 表示するセクションを「切り替え」るには rendered 属性を使用する。
- <apex:stylesheet> タグには rendered 属性がないため、この属性があるコンポーネントでラップする必要がある。
ユーザー向けに新しいデザインを有効にしても、ユーザーがそれを表示するための適切なブラウザーやアクセシビリティの設定を行っていない可能性があります。次のコード例では、$User.UITheme 変数を使用して代替情報をユーザーに表示します。
$User.UITheme は Theme3 と同じですが、$User.UIThemeDisplayed は異なります。そのため、ページは最大限まで表示されません。