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

Oracle APEXアプリケーションでアプリケーション・ロゴを追加および更新します。

アプリケーション・ロゴは、実行時にアプリケーションの上部ナビゲーション・バーに表示されます。

ヒント:

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

• ユーザー・インタフェース属性でのロゴの管理
  ユーザー・インタフェース属性を編集して、アプリケーション・ロゴを追加または更新します。
• 実行時のアプリケーション・ロゴの編集
  実行時開発者ツールバーの「ロゴの編集」を使用して、実行時に表示されるアプリケーション・ロゴをすばやく変更します。

5.11.1 ユーザー・インタフェース属性でのロゴの管理

ユーザー・インタフェース属性を編集して、アプリケーション・ロゴを追加または更新します。

ユーザー・インタフェース属性を編集してアプリケーション・ロゴを管理するには:

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

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

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

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

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

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

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

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

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

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

   • なし - アプリケーションにロゴは表示されません。

   • イメージ - 有効なイメージ・ファイル・タイプに基づいてロゴを作成します。

     • ロゴ - 「イメージ」を選択します。

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

       #APP_FILES#my-logo.png

   • テキスト - テキストのみのロゴを定義します。

     • ロゴ - 「テキスト」を選択します。

     • テキスト - 「テキスト」を選択 - アプリケーション・ロゴに表示するテキストを入力します。

   • イメージとテキスト - イメージとテキストのロゴを定義します。

     • ロゴ - 「イメージとテキスト」を選択します。

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

       #APP_FILES#my-logo.png

     • テキスト - 「テキスト」を選択 - アプリケーション・ロゴに表示するテキストを入力します。

   • カスタム

     • ロゴ - 「カスタム」を選択します。

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

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

ヒント:

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

関連項目:

• 静的アプリケーション・ファイルの管理
• 静的ワークスペース・ファイルの管理
• カスタム・テーマの作成
• ページ・テンプレート

5.11.2 実行時のアプリケーション・ロゴの編集

実行時開発者ツールバーの「ロゴの編集」を使用して、実行時に表示されるアプリケーション・ロゴをすばやく変更します。

実行時にアプリケーション・ロゴを追加または更新するには、「ロゴの編集」を使用します。

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

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

2. 実行時開発者ツールバーで、「カスタマイズ」をクリックして「ロゴの編集」を選択します。
   
   図select_edit_logo.pngの説明

   「ロゴの編集」ダイアログが表示されます。

3. タイプ - ロゴのタイプを選択します。オプションは次のとおりです。

   • なし - アプリケーションにロゴは表示されません。

   • テキスト - テキストのみのロゴを定義します。

     • タイプ - 「テキスト」を選択します。

     • テキスト - アプリケーション・ロゴとして表示するテキストを入力します。

   • イメージ - 有効なイメージ・ファイル・タイプと500kb未満のサイズに基づいてロゴを作成します。

     • タイプ - 「イメージ」を選択します。

     • イメージの指定 - ファイルをドラッグ・アンド・ドロップするか、「ファイルの選択」をクリックしてイメージまで移動します。

   • イメージとテキスト:

     • タイプ - 「イメージとテキスト」を選択します。

     • イメージの指定 - ファイルをドラッグ・アンド・ドロップするか、「ファイルの選択」をクリックしてイメージまで移動します。

   • 「カスタム」では、アプリケーションのロゴとして表示するカスタムHTMLを定義します。

     ただし、セキュリティ上の問題があるため、これを構成するために「ロゴの編集」を使用することはできません。「カスタム」を選択すると、「ユーザー・インタフェース属性」ボタンが表示されます。「ユーザー・インタフェース属性」をクリックして、「ユーザー・インタフェース属性」ページでカスタム・ロゴを追加します。

   次の例では、「タイプ」が「テキスト」に設定されていて、「テキスト」にはIT Projects for My Companyと記入されています。更新したロゴ「IT Projects for My Company」が、ページの上部に表示されている点に注目してください。

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

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

   ロゴは正常に保存されました

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

ノート:

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