5.8.4 ユーザー・インタフェース属性の編集

「ユーザー・インタフェース」ページを使用して、アプリケーションのデフォルト特性を制御し、表示を最適化します。

• ユーザー・インタフェース・ページへのアクセス
  「ユーザー・インタフェース」ページには、アプリケーションのホームページからアクセスします。
• ユーザー・インタフェース・ページ
  「ユーザー・インタフェース」ページは、「アイコン」、「ロゴ」、「属性」、「ナビゲーション・メニュー」、「ナビゲーション・バー」、「JavaScript」、「CSS」、「連結されたファイル」および「詳細」の各セクションに分かれています。

5.8.4.1 ユーザー・インタフェース・ページへのアクセス

「ユーザー・インタフェース」ページには、アプリケーションのホームページからアクセスします。

ユーザー・インタフェース・ページにアクセスするには、次のステップを実行します。

1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。

   アプリケーションのホームページが表示されます。

3. アプリケーションのホームページから、ユーザー・インタフェース・ページに、次の2通りの方法でアクセスできます。
   • 「アプリケーション定義の編集」ボタン:

     1. アプリケーション名の右側にある「アプリケーション定義の編集」をクリックします。

     2. 「ユーザー・インタフェース」タブをクリックします。

   • 「共有コンポーネント」からの場合:

     1. 「共有コンポーネント」をクリックします。

     2. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。

   ユーザー・インタフェース・ページが表示されます。

4. 対象となる属性を編集します。
5. 「変更の適用」をクリックして、変更を保存します。

5.8.4.2 ユーザー・インタフェース・ページ

「ユーザー・インタフェース」ページは、「アイコン」、「ロゴ」、「属性」、「ナビゲーション・メニュー」、「ナビゲーション・バー」、「JavaScript」、「CSS」、「連結されたファイル」および「詳細」の各セクションに分かれています。

ノート:

必須の値には赤いアスタリスク(*)が付いています。

ヒント:

このページの属性についてさらに学習するには、フィールドレベル・ヘルプを参照してください。

• アイコン
  
• ロゴ
  
• 属性
  
• ナビゲーション・メニュー
  
• JavaScript
  
• ナビゲーション・バー
  
• CSS
  
• 連結されたファイル
  
• 詳細
  

5.8.4.2.1 アイコン

ヒント:

アプリケーションでレガシー・アイコンが使用されている場合、「アイコン」リージョンの上部にノートが表示されます。「アイコンの変更」ボタンをクリックしてレガシー・アイコンを置換することをお薦めします。

「アイコン」リージョンを使用して、ファビコン、PWAアイコン、Appleタッチ・アイコンおよび「アプリケーション・ビルダー」アイコンを管理します。アップロードされたアイコンは、実行時に自動的にサイズ変更され、適切な場所に伝播されます。

「編集」をクリックして詳細を表示するか、既存のアイコンを更新します。「アプリケーション・アイコンの編集」ダイアログで、「ファイルの選択」をクリックしてファイルにナビゲートするか、新しいファイルを表示されたリージョンにドラッグ・アンド・ドロップできます。

ライブラリから新しいアイコンを選択するには、「アイコンの変更」をクリックします。「アプリケーション・アイコンの選択」ダイアログで、次の操作ができます。

• アイコンのアップロード。プラス(+)記号をクリックしてアイコンにナビゲートするか、アイコンを「独自のアイコンのアップロード」リージョンにドラッグ・アンド・ドロップします。

• ライブラリからのアイコンの選択。アイコンの色を選択してからアイコンを選択します。

関連項目:

アプリケーション・アイコンの管理

5.8.4.2.2 ロゴ

ロゴ属性は、上部のナビゲーション・バーに表示されるアプリケーション・ロゴを定義する場合に使用します。アプリケーションのロゴは、イメージ、テキスト、またはイメージとテキストにするか、カスタムのマークアップを基にすることもできます。

表5-14 「ユーザー・インタフェース」の「ロゴ」

属性	説明
ロゴ	「ロゴ」で、ロゴ・タイプを選択します。オプションは次のとおりです。 なし イメージ テキスト イメージとテキスト カスタム 選択に応じて、追加の属性が表示されます。属性についてさらに学習するには、アイテムのヘルプを参照してください。 「イメージ」、「テキスト」、「イメージとテキスト」または「カスタム」を選択した場合は、追加属性が表示され、ページ・テンプレートに#LOGO#置換文字列が含まれている必要があります。

関連項目:

アプリケーション・ロゴの管理

5.8.4.2.3 属性

表5-15 属性

属性	説明	さらに学習するには
テーマ・スタイルを選択できるようにエンド・ユーザーを有効化	「オン」に設定すると、エンド・ユーザーは、カスタマイズ・ダイアログ内でセッションのテーマ・スタイルを選択できます。「パブリック」とマークされたテーマ・スタイルのみを選択できます。	「ユーザーによるテーマ・スタイルの選択の可能化」を参照してください
"Built with APEX"をフッターに追加	「オン」に設定すると、Oracle APEXによって"Built with ♥ using Oracle APEX"というテキストが全ページのフッターに追加されます。	なし
自動検出	ユーザー・インタフェースを自動的に検出する必要があるかどうかを選択します。自動検出を有効にすると、ユーザーは対応するログイン・ページまたはホームページにリダイレクトされます。	なし
ホームURL	アプリケーションのホームページを指定します。	なし
ログインURL	アプリケーションのログイン・ページを指定します。	なし
テーマ	現在ユーザー・インタフェースに関連付けられているテーマを表示します。	「テーマの切替え」を参照してください
テーマ・スタイル	テーマ・スタイルを選択します。このオプションは、テーマ・スタイルをサポートする新しいテーマに対してのみ表示されます。	「テーマ・スタイルの使用」を参照してください
グローバル・ページ	定義されている場合、アプリケーションのグローバル・ページが表示されます。	「すべてのページにコンポーネントを表示するグローバル・ページの作成」を参照してください

5.8.4.2.4 ナビゲーション・メニュー

ユニバーサル・テーマ - 42などの新しいテーマを使用しているアプリケーションは、ナビゲーション・メニューを使用したナビゲーションを提供します。

表5-16 ナビゲーション・メニュー

属性	説明
ナビゲーションの表示	アプリケーションにナビゲーション・メニューを含めるには「オン」、除外するには「オフ」を選択します。
ナビゲーション・メニュー・リスト	アプリケーションのナビゲーション・メニューに利用されるリストを選択します。
位置	このアプリケーションにナビゲーション・メニューを配置する位置を選択します。  サイド ページ・テンプレートの#SIDE_GLOBAL_NAVIGATION_LIST#の位置のナビゲーション・メニューのリスト・テンプレートがレンダリングされます。  トップ ページ・テンプレートの#TOP_GLOBAL_NAVIGATION_LIST#の位置のナビゲーション・メニューのリスト・テンプレートがレンダリングされます。  たとえば、「サイド」を選択すると、ページの左側のツリーとしてナビゲーションをレンダリングできます。「トップ」を選択すると、ページのヘッダーのメニュー・バーとしてナビゲーションをレンダリングできます。
リスト・テンプレート	このアプリケーションのナビゲーション・メニューのレンダリングに使用されるリスト・テンプレートを選択します。
テンプレート・オプション	アプリケーションのナビゲーション・メニュー・リストに使用されるリスト・テンプレートのテンプレート・オプションを設定します。

関連項目:

ナビゲーション・メニューの管理

5.8.4.2.5 JavaScript

これらの属性を使用して、アプリケーションがJavaScriptを処理する方法を制御または変更します。

表5-17 JavaScript

属性	説明
ファイルURL	すべてのページにロードするコードのJavaScriptのファイルURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列#MIN#を使用して.minを、または#MIN_DIRECTORY#を使用してminified/を通常ページ・ビューのファイルURLに含めたり、ページをデバッグ・モードで表示する場合は空の文字列を含めることができます。 ここに入力したJavaScriptのファイルURLによって、ページ・テンプレート内の#APPLICATION_JAVASCRIPT#置換文字列が置き換えられます。 ノート: スクリプトの開始タグや閉じタグを含める必要はありません。URLのみを記述します。 例: 標準ファイル参照: /myjs/main.js 通常ページ・ビューの場合は/myjs/minified/から縮小ファイルmain.min.jsを、デバッグ・モードの場合は/myjs/からmain.jsをロードする標準ファイル参照: /myjs/#MIN_DIRECTORY#main#MIN#.js コールを必要とするRequireJSからライブラリが使用されている場合は、この構文を使用します。定義名はrequirejs.configパスで使用されるものと一致している必要があり、値はライブラリによって公開されるグローバル・シンボルである必要があります。RequireJSを使用している場合のみ適用されます。これにより、RequireJSでこのライブラリを再度ロードする必要がなくなります。 [define hammerjs=Hammer]/myjs/hammer.js ファイルがRequireJSに依存する場合は、この構文を使用します。これにより、このファイルの前にRequireJSが自動的にロードされます。 [require requirejs]/myjs/main.js ファイルがOracle JETに依存する場合は、この構文を使用します。これにより、RequireJSおよびOracle JET RequireJS構成がこのファイルの前に自動的にロードされます。 [require jet]/myjs/main.js
非推奨またはサポート対象外になったJavascript関数を含む	非推奨またはサポート対象外になったJavaScriptファンクションがアプリケーション内のすべてのページに含まれているかどうかを指定します。非推奨またはサポート対象外になったファンクションは、各リリースのリリース・ノートに記載されます。使用しているアプリケーションに、非推奨のファンクションまたはサポートされるファンクションへの参照が含まれていないことが確実な場合は、選択を行わず、ロードされるJavaScriptファイルの全体のサイズを削減します。
jQuery移行を含める	jQuery移行プラグインがアプリケーション内のすべてのページに含まれる必要があるかどうかを指定します。 プラグインはjQueryの非推奨の機能および動作をリストアし、古いJavaScriptコードおよびjQueryプラグインが、APEXによってロードされたjQueryバージョンを使用して引き続き適切に実行されるようにします。 アプリケーションおよび使用しているjQueryプラグインに、非推奨のjQuery機能への参照が含まれていないことが確実な場合は、これを「いいえ」に設定すると、ロードされるJavaScriptファイルの全体のサイズが削減されます。

5.8.4.2.6 ナビゲーション・バー

ユニバーサル・テーマ - 42などの新しいテーマを使用しているアプリケーションには、ナビゲーション・バー・リストが含まれます。「ナビゲーション・バー」の設定で、リストおよびリスト・テンプレートを選択できます。クラシック実装を選択すると、リストのかわりにタブが使用されます。「ナビゲーション・バー」属性は、新しいテーマとともにのみ表示されます。

表5-18 ナビゲーション・バー

属性	説明
実装	このアプリケーションのナビゲーション・バーの実装方法を選択します。 クラシック ページ・テンプレートの#NAVIGATION_BAR#の位置に、クラシック・ナビゲーション・バーとしてナビゲーション・バーがレンダリングされます。  リスト ページ・テンプレートの#NAVIGATION_BAR#の位置に、選択されたリストおよびリスト・テンプレートを使用して、リストとしてナビゲーション・バーがレンダリングされます。
ナビゲーション・バー・リスト	このアプリケーションのナビゲーション・バーに利用されるリストを選択します。
リスト・テンプレート	このアプリケーションのナビゲーション・メニューのレンダリングに使用されるリスト・テンプレートを選択します。
テンプレート・オプション	アプリケーションのナビゲーション・メニュー・リストに使用されるリスト・テンプレートのテンプレート・オプションを設定します。

関連項目:

ナビゲーション・バー・リストの管理

5.8.4.2.7 CSS

「ファイルURL」で、すべてのページにロードするCSSファイルURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列#MIN#を使用して.min ,を、または#MIN_DIRECTORY#を使用して minified/を通常ページ・ビューのファイルURLに含めたり、ページをデバッグ・モードで表示する場合は空の文字列を含めることができます。アプリケーションのバージョンをファイルURLに含める場合、置換文字列#APP_VERSION#にアクセスすることもできます。

ここに入力したファイルURLによって、ページ・テンプレート内の#APPLICATION_CSS#置換文字列が置き換えられます。

ノート: linkタグの開始タグや閉じタグを含める必要はありません。ファイルURLのみを含めてください。

例:

• 標準ファイル参照。

  /mycss/main.css

• 通常ページ・ビューの場合は/mycss/minified/から縮小ファイルmain.min.cssを、デバッグ・モードの場合は/mycss/からmain.cssをロードする標準ファイル参照。

  /mycss/#MIN_DIRECTORY#main#MIN#.css

• 条件付きメディア問合せ。

  [media="only screen and (max-device-width: 480px)"]/mycss/smartphone.css

• アプリケーション・バージョンを参照するURLで問合せ文字列を使用するファイル参照(アプリケーションがアップグレードされた(バージョンが増分された)ときに、ブラウザが常に新しいファイルをロードして、以前にキャッシュされたファイルを無視するよう指示されたファイル参照):

  /mycss/main.css?version=#APP_VERSION#

5.8.4.2.8 連結されたファイル

連結されたファイルを使用すると、単一のファイルごとに複数のHTTPリクエストを発行するかわりにブラウザで1つのファイルのみをロードするため、ページをロードするパフォーマンスを向上できます。この方法には、開発中に、より小さく、よりモジュール化されたファイルを使用するオプションと、APEX開発環境の外部のアプリケーションを実行するときに、単一の連結されたファイルを使用するオプションがあります。

連結されたファイルを作成するには、「連結されたファイル」をクリックして、画面に表示される手順に従います。さらに学習、および例を確認するには、フィールドレベル・ヘルプを参照してください。

5.8.4.2.9 詳細

「詳細」の属性を使用して、Oracle APEXで配布されるイメージ・ディレクトリを指し示すためにWebサーバーが使用する仮想パスを定義します。

表5-19 「ユーザー・インタフェース」、「詳細」

属性	説明
#APP_FILES#パス	#APP_FILES#置換文字列の使用時に、Webサーバーが静的ファイルを指定する場合に使用する仮想パスを決定します。 データベースのアプリケーション定義とともに格納されたファイルを参照するものを指定しないでください。 パフォーマンス上の理由から、アプリケーション・ファイルをWebサーバーに格納することもできます。任意の有効なURLを使用してそれらを参照します。 例: /myFiles/ http://contentDeliveryNetwork.com/myFiles/
#APEX_FILES#パス	アプリケーション・ビルダーによって分散されたイメージ・ディレクトリを指すためにWebサーバーが使用する仮想パスを決定します。インストール時、仮想パスは/i/として構成されます。不明な場合は、管理者に連絡してください。 静的テキスト(ページ、リージョン・ヘッダー、リージョン・フッターなど)にイメージを埋め込む場合は、置換文字列#APEX_FILES#を使用してイメージを参照できます。たとえば、イメージgo.gifを参照するには、次の構文を使用します。 <img src="#APEX_FILES#go.gif"> ノート: 入力されたイメージ接頭辞がインスタンス・イメージ接頭辞と同じである場合、アプリケーション・レベル属性は常にnullになります。これにより、異なるイメージ接頭辞を持つ可能性のある様々なインスタンス間で、アプリケーションを簡単に移動できます。 関連項目: APEX_FILES
メディア・タイプ	インターネット・メディア・タイプを入力します。インターネット・メディア・タイプは、2つの部分で構成される、インターネット上のファイル形式を表す識別子です。メディア・タイプは、少なくともタイプとサブタイプの2つの部分で構成され、オプションで1つ以上のパラメータを指定します。メディア・タイプは、ページ描画の際にHTTPヘッダーのContent-Typeで使用されます。 ページ・レベルのメディア・タイプが、アプリケーション・レベルのメディア・タイプを上書きします。この属性のデフォルト値はNULLです。ページ・レベルとアプリケーション・レベルの両方でメディア・タイプの値がNULLの場合、メディア・タイプとしてtext/htmlが使用されます。