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

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

• ユーザー・インタフェース・ページへのアクセス
  
• ユーザー・インタフェース・ページ
  
• アプリケーション・ロゴの定義
  

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

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

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

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

3. アプリケーションのホームページから、ユーザー・インタフェース・ページに、次の2通りの方法でアクセスできます。
   • 共有コンポーネントに移動:

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

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

   • 「アプリケーション・プロパティの編集」ボタン:

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

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

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

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

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

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

ヒント:

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

• 一般
  
• ロゴ
  
• ファビコン
  
• 属性
  
• ナビゲーション・メニュー
  
• ナビゲーション・バー
  
• JavaScript
  
• カスケード・スタイルシート
  
• 連結されたファイル
  

6.9.4.2.1 一般

「一般」の下の属性を使用して、アプリケーション・ユーザー・インタフェースの基本的な特性を定義します。

表6-14 「ユーザー・インタフェース」の「一般プロパティ」

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

6.9.4.2.2 ロゴ

「ロゴ」属性は、アプリケーション・ロゴを定義する際に使用します。アプリケーションのロゴは、イメージ、テキスト、またはイメージとテキストにするか、カスタムのマークアップを基にすることもできます。

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

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

関連項目:

アプリケーション・ロゴの定義

6.9.4.2.3 ファビコン

「ファビコンHTML」には、ファビコンHTMLコードを入力して、ファビコン(またはショートカット・アイコン)を作成します。この機能を使用するには、ページ・テンプレートに#FAVICONS#置換文字列が含まれている必要があります。次に例を示します。

<link rel="shortcut icon" href="/i51/favicon.ico">
<link rel="icon" sizes="16x16" href="/i51/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="/i51/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/i51/favicon-180x180.png">

6.9.4.2.4 属性

表6-16 属性

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

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

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

表6-17 ナビゲーション・メニュー

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

関連項目:

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

6.9.4.2.6 ナビゲーション・バー

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

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

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

関連項目:

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

6.9.4.2.7 JavaScript

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

表6-19 JavaScript

属性	説明
コンテンツ配信ネットワーク	Application ExpressでライブラリjQueryをロードするために使用が試行されるコンテンツ配信ネットワーク(CDN)を指定します。Application Expressでは、そのCDNからこれらのライブラリをロードできない場合、かわりにWebサーバーからこれらのライブラリがロードされます。 CDNを使用すると、ユーザーがすでに同じCDNを使用する他のWebサイトを訪問して同じライブラリをロードしたことがある場合に、アプリケーションのロード時間を短縮できます。
ファイル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プラグインが、Application ExpressによってロードされたjQueryバージョンを使用して引き続き適切に実行されるようにします。 アプリケーションおよび使用しているjQueryプラグインに、非推奨のjQuery機能への参照が含まれていないことが確実な場合は、これを「いいえ」に設定すると、ロードされるJavaScriptファイルの全体のサイズが削減されます。

6.9.4.2.8 カスケード・スタイルシート

「ファイルURL」で、すべてのページにロードするカスケード・スタイルシートのファイル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#

6.9.4.2.9 連結されたファイル

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

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

6.9.4.3 アプリケーション・ロゴの定義

アプリケーション・ロゴを定義するには、次のステップを実行します。

1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. アプリケーションのホームページから、ユーザー・インタフェース・ページに、次の2通りの方法でアクセスできます。
   • 「共有コンポーネント」からの場合:

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

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

   • 「アプリケーション・プロパティの編集」ボタンをクリックします。

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

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

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

4. 「ロゴ」で、ロゴ・タイプを選択します。選択に応じて、追加の属性が表示されます。

   • なし

   • イメージ

     イメージURLで、ロゴとして使用するイメージのURLを入力します(ファイル名拡張子を含む)。ページ・テンプレートに#LOGO#置換文字列が含まれている必要があります。次に例を示します。

     #APP_IMAGES#my-logo.png

   • テキスト

     「テキスト」に、アプリケーション・ロゴとして表示されるテキストを入力します。ページ・テンプレートに#LOGO#置換文字列が含まれている必要があります。

   • イメージとテキスト

     イメージURLで、ロゴとして使用するイメージのURLを入力します(ファイル名拡張子を含む)。次に例を示します。

     #APP_IMAGES#my-logo.png

     「テキスト」に、アプリケーション・ロゴとして表示されるテキストを入力します。

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

   • カスタム

     「カスタムHTML」で、アプリケーションのロゴのマークアップを入力します。このフィールドの値は、ページ・テンプレートの#LOGO#置換文字列に挿入されます。

5. 「変更の適用」をクリックします。

ヒント:

置換文字列を使用して、静的ファイル・リポジトリにアップロードされたイメージを参照することもできます。詳細は、「静的アプリケーション・ファイルの参照」および「静的ワークスペース・ファイルの参照について」を参照してください。

関連項目:

• 「静的アプリケーション・ファイルの管理」

• 「静的ワークスペース・ファイルの管理」

• カスタム・テーマの作成

• ページ・テンプレート