11.1.4 テーマ・ローラーの使用
「テーマ・ローラー」を使用して、コードを編集することなく、アプリケーションの外観をすばやく変換します。
- テーマ・ローラーについて
実行時開発者ツールバーの「カスタマイズ」メニューで使用可能な「テーマ・ローラー」オプションについて説明します。 - 「テーマ・ローラー」ダイアログの使用
「テーマ・ローラー」ダイアログにアクセスするには、実行時開発者ツールバーの「カスタマイズ」メニューから「テーマ・ローラー」をクリックします。 - Redwood Lightテーマ・スタイルについて
Redwood Lightテーマ・スタイルでは、複数の固有オプションが「テーマ・ローラー」に示されます。 - テーマ・スタイルのインポートおよびエクスポート
テーマ・スタイルをインポートおよびエクスポートするには、「テーマ・ローラーの追加オプション」メニューから「インポートおよびエクスポート」を選択します。 - スタイルの互換性
VitaテーマとRedwood Lightテーマの互換性の問題について学習します。 - 開発者コンソールの統合について
Webブラウザの開発者用コンソールで公開関数apex.utr.config();
を使用すると、カスタムCSSコードとLESSコンパイル構成を取得および設定できます
親トピック: テーマの使用
11.1.4.1 テーマ・ローラーについて
実行時開発者ツールバーの「カスタマイズ」メニューで使用可能な「テーマ・ローラー」オプションについて説明します。
テーマ・ローラーはライブCSSエディタであり、テーマ・スタイル、色、角丸などのアプリケーション属性をすばやく変更できます。
アプリケーション・ビルダーからアプリケーションを実行してページを表示する場合は、編集可能な実行中のページの下部に、実行時開発者ツールバーが表示されます。「テーマ・ローラー」ダイアログにアクセスするには、「カスタマイズ」メニューから「テーマ・ローラー」をクリックします。

図customize_menu.pngの説明
実行時開発者ツールバーに「テーマ・ローラー」が表示されるようにするには:
- テーマ・スタイルを定義する必要があります。
- 少なくとも1つのテーマ・スタイルに「入力パラメータ・ファイルURL」属性が定義されている必要があります。
親トピック: テーマ・ローラーの使用
11.1.4.2 「テーマ・ローラー」ダイアログの使用
「テーマ・ローラー」ダイアログにアクセスするには、実行時開発者ツールバーの「カスタマイズ」メニューから「テーマ・ローラー」をクリックします。
ノート:
「ライブ・テンプレート・オプション」、「テーマ・ローラー」および「ロゴの編集」の同時使用はサポートされていません。ヒント:
「テーマ・ローラー」は、テーマ・スタイルが定義されていて、少なくとも1つのテーマ・スタイルの「入力パラメータ・ファイルURL」属性が定義されていると、実行時開発者ツールバーに表示されます。親トピック: テーマ・ローラーの使用
11.1.4.3 Redwood Lightテーマ・スタイルについて
Redwood Lightテーマ・スタイルでは、複数の固有オプションが「テーマ・ローラー」に示されます。
-
ピラー - ピラー・クラスを使用すると、背景とヘッダーのイメージを変更できるようになります。
-
レイアウト - レイアウト・クラスを使用すると、ユーザーはレイアウト・オプション「エッジからエッジ(デフォルト)」、「フローティング」または「含まれる」の切り替えが可能になります。
-
外観 - 「外観」の下側には、属性の「ヘッダー」、「ナビゲーション」、「ボディ・ヘッダー」および「背景」があります。
次の図は、Redwood Lightテーマ・スタイルが選択されている「テーマ・ローラー」を示しています。

図theme_roller_redwood.pngの説明
親トピック: テーマ・ローラーの使用
11.1.4.4 テーマ・スタイルのインポートおよびエクスポート
「テーマ・ローラーの追加オプション」メニューから「インポートとエクスポート」を選択して、テーマ・スタイルをインポートおよびエクスポートします。
「追加オプション」メニューの「インポート」、「エクスポート」および「リセット」のオプションを選択することで、スタイルの変更をテーマ・ローラーから直接エクスポートおよびインポートできます。インポートおよびエクスポート時、サポートされるファイル形式はJSONです。
テーマ・スタイルをインポートおよびエクスポートするには:
親トピック: テーマ・ローラーの使用
11.1.4.5 スタイル互換性
VitaテーマおよびRedwood Lightテーマの互換性の問題について学習します。
VitaテーマとRedwood Lightテーマは、変数が互いのテーマ・ファイルに存在しないため、現在互換性がありません。
VitaテーマからのエクスポートがRedwood Lightにインポートされると、Vitaテーマ変数がRedwood Lightテーマに存在しないため、変更は表示されません。リバース・シナリオについても同様です。Redwood LightからのエクスポートをVitaテーマにインポートすると、Redwood Light変数がVitaテーマに存在しないため、変更は表示されません。
親トピック: テーマ・ローラーの使用
11.1.4.6 開発者コンソールの統合について
Webブラウザの開発者用コンソールで公開関数apex.utr.config();
を使用すると、カスタムCSSコードとLESSコンパイル構成を取得および設定できます
Webブラウザの開発者用コンソールで公開関数apex.utr.config();
を使用すると、カスタムCSSコードとLESSコンパイル構成を取得および設定できます
スタイルを取得するには、次のようにコンソールでパラメータなしのapex.utr.config()
を記述します。
apex.utr.config();
Paste the following line of code into the JS console to load your current configuration into Theme Roller:
apex.utr.config({"classes":[],"vars":{},"customCSS":"","useCustomLess":"Y"});

図dev_console_1.pngの説明
スタイルを設定するには、次のようにコンソールでJSON構成のcustomCSSオブジェクト内にlessコードまたはcssコードを追加します。
apex.utr.config({"classes":[],"vars":{},"customCSS":"h1 { color: #111; font-family: 'Helvetica Neue', sans-serif; ... }", "useCustomLess":"Y"});
カスタムCSSは、テーマ・ローラーのコード・エディタに追加され、自動的にページに適用されます。
親トピック: テーマ・ローラーの使用