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. 属性を変更します。

      「元に戻す」および「やり直し」 - 属性を変更すると、ダイアログの下部にある「元に戻す」および「やり直し」ボタンがアクティブになります。

    4. テーマ・スタイルのリセット - 未保存のテーマ・スタイルの変更を元に戻すには、「追加オプション」メニューから「リセット」を選択します。「追加オプション」メニューは、ダイアログの下部にある「名前を付けて保存」ボタンの横にあります。
  5. カスタムCSS - コード・エディタにCSSまたはLESS互換のコードを入力します。LESS互換のコードを含める場合は、「LESSコンパイルの有効化」スイッチをオンにする必要があります。
  6. エクスポートまたはインポート - 「テーマ・ローラー」ダイアログから直接、テーマ・スタイルの変更をエクスポートまたはインポートします。ダイアログの下部にある「別名保存」ボタンの横にある「追加オプション」メニューから、「エクスポート」または「インポート」を選択します。
  7. 次のいずれかをクリックして、テーマを保存します。

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

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

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

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

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

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

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

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

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

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

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

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

11.1.4.4 テーマ・スタイルのインポートおよびエクスポート

「テーマ・ローラーの追加オプション」メニューから「インポートとエクスポート」を選択して、テーマ・スタイルをインポートおよびエクスポートします。

「追加オプション」メニューの「インポート」、「エクスポート」および「リセット」のオプションを選択することで、スタイルの変更をテーマ・ローラーから直接エクスポートおよびインポートできます。インポートおよびエクスポート時、サポートされるファイル形式はJSONです。

テーマ・スタイルをインポートおよびエクスポートするには:

  1. ページを実行してプレビューします。

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

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

    「テーマ・ローラー」ダイアログに、アプリケーションのスタイルが表示されます。「追加オプション」メニューから「インポート」、「エクスポート」および「リセット」のオプションを選択すると、テーマ・ローラーから直接スタイルの変更をエクスポートおよびインポートできます。

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

    ヒント:

    キーボード・ショートカットを使用して「テーマ・ローラー」ダイアログをナビゲートするには、[Ctrl]+[Fn]+[M]を押して解放します。次に、[Tab]を押してナビゲートします。
  3. テーマ・スタイルをインポートするには:
    1. 「追加オプション」メニューから「インポート」を選択します。
      ファイル・ブラウザが表示されます。
    2. 適切なファイルに移動して、現在のテーマ・スタイルに適用するカスタムCSSコード、変数スタイルの変更、クラスおよびLESSコンパイル構成の設定を設定します。

      ファイルをインポートする際、次のJSONキー値が必要です:

      {
    "classes": [],
    "vars": {},
    "customCSS":"",
    "useCustomLess":""
}

      次の表に、必要な値を示します。

      キー データ型 値
      classes JSON配列 ページに追加されるカンマ区切りのクラス名のリスト。
      vars JSONオブジェクト 値を含むテーマ・スタイル変数。
      customCSS 文字列 カスタムCSSコード。
      useCustomLess 文字列 テーマ・スタイルをLESSを使用してコンパイルする場合は「Y」、NOの場合は「N」を使用します。
  4. テーマ・スタイルをエクスポートするには:
    1. 「追加オプション」メニューから「エクスポート」を選択します。
      このオプションは、現在のスタイル構成をJSONファイルにエクスポートします。
  5. テーマ・スタイルをリセットするには:
    1. 「追加オプション」メニューから「リセット」を選択します。
      このオプションは未保存のテーマ・スタイルの変更を元に戻します。

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

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

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