「テーマ・ローラー」および「ロゴの編集」の使用

11.1.4 「テーマ・ローラー」および「ロゴの編集」の使用

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

ノート:

「ライブ・テンプレート・オプション」、「テーマ・ローラー」および「ロゴの編集」の同時使用はサポートされていません。

「テーマ・ローラー」および「ロゴの編集」について
実行時開発者ツールバーの「カスタマイズ」メニューで使用可能な「テーマ・ローラー」オプションと「ロゴの編集」オプションについて説明します。
「テーマ・ローラー」ダイアログの使用
「テーマ・ローラー」ダイアログ・ボックスを使用すると、コードを編集せずにアプリケーションの外観をすばやく変更できます。
開発者コンソールの統合について
Webブラウザの開発者用コンソールで公開関数apex.utr.config();を使用すると、カスタムCSSコードとLESSコンパイル構成を取得および設定できます
Redwood Lightテーマ・スタイルについて
Redwood Lightテーマ・スタイルでは、複数の固有オプションが「テーマ・ローラー」に示されます。
「ロゴの編集」の使用
「ロゴの編集」を使用すると、実行時に表示されるロゴを簡単に変更できます。

11.1.4.1 「テーマ・ローラー」および「ロゴの編集」について

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

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

図customize_menu.pngの説明

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

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

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

「ロゴの編集」を使用すると、実行時にユーザーに表示されるロゴを簡単に追加または編集できます。

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

「テーマ・ローラー」ダイアログ・ボックスを使用すると、コードを編集せずにアプリケーションの外観をすばやく変更できます。

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

ヒント:

「テーマ・ローラー」は、テーマ・スタイルが定義されていて、少なくとも1つのテーマ・スタイルの「入力パラメータ・ファイルURL」属性が定義されていると、実行時開発者ツールバーに表示されます。

「テーマ・ローラー」ダイアログを使用するには:

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

実行時開発者ツールバーは、編集可能な実行中のページの下部に表示されます。
実行時開発者ツールバーで、「カスタマイズ」をクリックして「テーマ・ローラー」を選択します。

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

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

ヒント:
キーボード・ショートカットを使用して「テーマ・ローラー」ダイアログをナビゲートするには、[Ctrl]+[Fn]+[M]を押して解放します。次に、[Tab]を押してナビゲートします。
テーマを選択または変更するには:
1. 「テーマ」の「テーマを選択」 - ドロップダウン・リストからテーマを選択します。次の図では、テーマが「Redwood Light」に設定されています。
2. セクション名をクリックすることで、セクションを展開/縮小します。
3. 属性を変更します。
  
  属性の変更時には、ダイアログの下側にあるボタン「元に戻す」、「やり直し」および「リセット」がアクティブになります。
カスタムCSS - コード・エディタにCSSまたはLESS互換のコードを入力します。LESS互換のコードを含める場合は、「LESSコンパイルの有効化」スイッチをオンにする必要があります。

図theme_roller_custom_css.pngの説明
次のいずれかをクリックして、テーマを保存します。
- 保存 - テーマが編集可能な場合は、「保存」によってスタイルの変更が保存され、そのスタイルがアプリケーションの現行スタイルとして設定されます。
- 名前を付けて保存 - 「名前を付けて保存」をクリックすると、テーマが新しいスタイルとして保存され、アプリケーションの現行スタイルとして設定されます。

親トピック: 「テーマ・ローラー」および「ロゴの編集」の使用

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

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

親トピック: 「テーマ・ローラー」および「ロゴの編集」の使用

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

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

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

ピラー - ピラー・クラスを使用すると、背景とヘッダーのイメージを変更できるようになります。
レイアウト - レイアウト・クラスを使用すると、ユーザーはレイアウト・オプション「エッジからエッジ(デフォルト)」、「フローティング」または「含まれる」の切り替えが可能になります。
外観 - 「外観」の下側には、属性の「ヘッダー」、「ナビゲーション」、「ボディ・ヘッダー」および「背景」があります。

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

図theme_roller_redwood.pngの説明

親トピック: 「テーマ・ローラー」および「ロゴの編集」の使用

11.1.4.5 「ロゴの編集」の使用

「ロゴの編集」を使用すると、実行時に表示されるロゴを簡単に変更できます。

ロゴを含めるには、ページ・テンプレートに#LOGO#置換文字列が含まれている必要があります。

ノート:

アプリケーションの「ユーザー・インタフェース属性」を編集することで、アプリケーション・ロゴを編集することもできます。「アプリケーション・ロゴの定義」を参照してください。

「ロゴの編集」を使用するには:

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

実行時開発者ツールバーは、編集可能な実行中のページの下部に表示されます。
実行時開発者ツールバーで、「カスタマイズ」をクリックして「ロゴの編集」を選択します。

図select_edit_logo.pngの説明
「ロゴの編集」ダイアログが表示されます。
タイプ - ロゴのタイプを選択します。オプションは次のとおりです。
- なし - アプリケーションにロゴは表示されません。
- テキスト - テキストのみのロゴを定義します。
  - タイプ - 「テキスト」を選択します。
  - テキスト - アプリケーション・ロゴとして表示するテキストを入力します。
- イメージ - 有効なイメージ・ファイル・タイプと500kb未満のサイズに基づいてロゴを作成します。
  - タイプ - 「イメージ」を選択します。
  - イメージの指定 - ファイルをドラッグ・アンド・ドロップするか、「ファイルの選択」をクリックしてイメージまで移動します。
- イメージとテキスト:
  - タイプ - 「イメージとテキスト」を選択します。
  - イメージの指定 - ファイルをドラッグ・アンド・ドロップするか、「ファイルの選択」をクリックしてイメージまで移動します。
- 「カスタム」では、アプリケーションのロゴとして表示するカスタムHTMLを定義します。
  
  ただし、セキュリティ上の問題があるため、これを構成するために「ロゴの編集」を使用することはできません。「カスタム」を選択すると、「ユーザー・インタフェース属性」ボタンが表示されます。「ユーザー・インタフェース属性」をクリックして、「ユーザー・インタフェース属性」ページでカスタム・ロゴを追加します。
次の例では、「タイプ」が「テキスト」に設定されていて、「テキスト」にはIT Projects for My Companyと記入されています。更新したロゴ「IT Projects for My Company」が、ページの上部に表示されている点に注目してください。

図edit_logo_text.pngの説明
「保存」をクリックします。

確認メッセージが表示されます。

Logo saved successfully
「取消」をクリックしてダイアログを終了します。

親トピック: 「テーマ・ローラー」および「ロゴの編集」の使用