1. アプリケーション・ビルダー・ユーザーズ・ガイド
  2. テーマおよびテーマ・スタイルの使用
  3. テーマの使用
  4. テーマ・ローラーの使用

11.1.4 テーマ・ローラーの使用

「テーマ・ローラー」を使用して、コードを編集することなく、アプリケーションの外観をすばやく変換します。

親トピック: テーマの使用

11.1.4.1 テーマ・ローラーについて

実行時開発者ツールバーの「カスタマイズ」メニューで使用可能な「テーマ・ローラー」オプションについて説明します。

テーマ・ローラーはライブCSSエディタであり、テーマ・スタイル、色、角丸などのアプリケーション属性をすばやく変更できます。

アプリケーション・ビルダーからアプリケーションを実行してページを表示する場合は、編集可能な実行中のページの下部に、実行時開発者ツールバーが表示されます。「テーマ・ローラー」ダイアログにアクセスするには、「カスタマイズ」メニューから「テーマ・ローラー」をクリックします。

customize_menu.pngの説明が続きます
図customize_menu.pngの説明

実行時開発者ツールバーに「テーマ・ローラー」が表示されるようにするには:

  • テーマ・スタイルを定義する必要があります。
  • 少なくとも1つのテーマ・スタイルに「入力パラメータ・ファイルURL」属性が定義されている必要があります。

関連項目:

親トピック: テーマ・ローラーの使用

11.1.4.2 「テーマ・ローラー」ダイアログの使用

「テーマ・ローラー」ダイアログにアクセスするには、実行時開発者ツールバーの「カスタマイズ」メニューから「テーマ・ローラー」をクリックします。

ノート:

「ライブ・テンプレート・オプション」、「テーマ・ローラー」および「ロゴの編集」の同時使用はサポートされていません。
テーマ・ローラーは、開発者がコード行を変更することなく、アプリケーションの色や角丸などの属性を迅速に変更できる、ライブCSSエディタです。すぐに使用可能な付属のテーマは上書きできませんが、新しいテーマとして保存すると適宜に変更できます。

ヒント:

「テーマ・ローラー」は、テーマ・スタイルが定義されていて、少なくとも1つのテーマ・スタイルの「入力パラメータ・ファイルURL」属性が定義されていると、実行時開発者ツールバーに表示されます。
「テーマ・ローラー」ダイアログを使用するには:
  1. ページを実行してプレビューします。

    実行時開発者ツールバーは、編集可能な実行中のページの下部に表示されます。

  2. 実行時開発者ツールバーで、「カスタマイズ」をクリックして「テーマ・ローラー」を選択します。
    customize_menu.pngの説明が続きます
    図customize_menu.pngの説明

    テーマ・ローラーによって、アプリケーションのスタイルがフェッチされ、エディタにロードされます。「テーマ・ローラー」ダイアログが表示されます。

    theme_roller.pngの説明が続きます
    図theme_roller.pngの説明
  3. 属性を検索するには、ダイアログ上部の「検索」フィールドに検索文字列を入力します。検索語が含まれている属性のみが表示されます。

    ヒント:

    キーボード・ショートカットを使用して「テーマ・ローラー」ダイアログをナビゲートするには、[Ctrl]+[Fn]+[M]を押して解放します。次に、[Tab]を押してナビゲートします。
  4. テーマを選択または変更するには:
    1. 「テーマ」の「テーマを選択」 - ドロップダウン・リストからテーマを選択します。次の図では、テーマが「Redwood Light」に設定されています。
    2. セクション名をクリックすることで、セクションを展開/縮小します。
    3. 属性を変更します。

      属性の変更時には、ダイアログの下側にあるボタン「元に戻す」、「やり直し」および「リセット」がアクティブになります。

  5. カスタムCSS - コード・エディタにCSSまたはLESS互換のコードを入力します。LESS互換のコードを含める場合は、「LESSコンパイルの有効化」スイッチをオンにする必要があります。
  6. 次のいずれかをクリックして、テーマを保存します。

    • 保存 - テーマが編集可能な場合は、「保存」によってスタイルの変更が保存され、そのスタイルがアプリケーションの現行スタイルとして設定されます。

    • 名前を付けて保存 - 「名前を付けて保存」をクリックすると、テーマが新しいスタイルとして保存され、アプリケーションの現行スタイルとして設定されます。

親トピック: テーマ・ローラーの使用

11.1.4.3 開発者コンソールの統合について

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の説明が続きます
図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は、テーマ・ローラーのコード・エディタに追加され、自動的にページに適用されます。

親トピック: テーマ・ローラーの使用

11.1.4.4 Redwood Lightテーマ・スタイルについて

Redwood Lightテーマ・スタイルでは、複数の固有オプションが「テーマ・ローラー」に示されます。

次の図に示すように、Redwood Lightテーマ・スタイルを選択すると、複数の固有のクラス・オプションが含まれるようになります。

  • ピラー - ピラー・クラスを使用すると、背景とヘッダーのイメージを変更できるようになります。

  • レイアウト - レイアウト・クラスを使用すると、ユーザーはレイアウト・オプション「エッジからエッジ(デフォルト)」、「フローティング」または「含まれる」の切り替えが可能になります。

  • 外観 - 「外観」の下側には、属性の「ヘッダー」、「ナビゲーション」、「ボディ・ヘッダー」および「背景」があります。

次の図は、Redwood Lightテーマ・スタイルが選択されている「テーマ・ローラー」を示しています。

theme_roller_redwood.pngの説明が続きます
図theme_roller_redwood.pngの説明

親トピック: テーマ・ローラーの使用