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

Oracle APEXアプリケーションでファビコン、PWAアイコン、Appleタッチ・アイコンおよび「アプリケーション・ビルダー」アイコンとして表示されるアイコンを追加および更新します。

• アプリケーション・アイコンについて
  APEXアプリケーションでのアプリケーション・アイコンの管理について説明します。
• ユーザー・インタフェース属性でのアイコンの管理
  「ユーザー・インタフェース」ページの「アイコン」リージョンからアプリケーション・アイコンを編集またはアップロードします。
• 実行時開発者ツールバーの「アプリケーション・アイコンの編集」の使用
  実行時開発者ツールバーの「カスタマイズ」メニューで「アプリケーション・アイコンの編集」オプションを使用して、実行時にアイコンを編集します。

5.10.1 アプリケーション・アイコンについて

APEXアプリケーションでのアプリケーション・アイコンの管理について説明します。

アプリケーションにアイコンを追加すると、アプリケーション内の次の場所に伝播されます。

• ファビコン(ブラウザ・タブ・アイコン)

• PWAアイコン

• 「アプリケーション・ビルダー」アイコン(アプリケーションのホームページに表示されるアイコン)

• 「サインイン」ページ

• ホームページのブレッドクラム・リージョン

• Appleタッチ・アイコン(PWAアプリケーションをiOSに追加する場合)

アプリケーション・アイコンは、3つのサイズ(32x32、192x192または512x512)で共有コンポーネント、静的アプリケーション・ファイルに格納されます。

ヒント:

個々のアイコンを編集する際に、アイコンの所有権を取得します。必ず適切なサイズ(32x32、192x192または512x512)に一致するアイコンをアップロードしてください。

次の方法で、アプリケーション・アイコンを編集またはアップロードできます。

• 新しいアプリケーションの作成時 - 新しいアプリケーションを作成する際に、アプリケーションの作成ウィザードの「アプリケーションの作成」ページで「アイコンの設定」をクリックします。アプリケーションの作成ウィザードを実行するときを参照してください

• ユーザー・インタフェース属性の編集 - 「ユーザー・インタフェース」ページの「アイコン」で属性を編集して実行します。「ユーザー・インタフェース属性でのアイコンの管理」を参照してください。

• 実行時におけるアイコンの編集 - 実行時に、実行時開発者ツールバーの「カスタマイズ」、「アプリケーション・アイコンの編集」を順にクリックします。「実行時開発者ツールバーの「アプリケーション・アイコンの編集」の使用」を参照してください

• 静的アプリケーション・ファイルへのアイコンのアップロード - アプリケーション・アイコンは、3つのサイズ(32x32、192x192または512x512)で共有コンポーネント、静的アプリケーション・ファイルに格納されます。

  すべてのアイコン・サイズについてアップロードを制御するには、共有コンポーネント、静的アプリケーション・ファイルにアイコンをアップロードし、次のファイル・パスを使用します。

  • #APP_FILES#icons/app-icon-32.png

  • #APP_FILES#icons/app-icon-192.png

  • #APP_FILES#icons/app-icon-512.png

関連項目:

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

5.10.2 ユーザー・インタフェース属性でのアイコンの管理

「ユーザー・インタフェース」ページの「アイコン」リージョンからアプリケーション・アイコンを編集またはアップロードします。

ヒント:

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

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

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

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

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

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

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

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

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

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

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

4. 「アイコン」を見つけます。
   既存のアイコンは、ページの左側にある表に表示されます。
5. アイコンを編集または更新するには、「編集」をクリックします。
   1. 「アプリケーション・アイコンの編集」ダイアログで、次のいずれかを実行できます。

      • 「ファイルの選択」をクリックして、新しいアイコンにナビゲートします。

      • 新しいファイルを、表示されたリージョンにドラッグ・アンド・ドロップします。

   2. 「閉じる」をクリックします。
6. ライブラリから新しいアイコンを選択するには、「アイコンの変更」をクリックします。
   1. 「アプリケーション・アイコンの編集」ダイアログで、次のいずれかを実行できます。

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

        カスタム・アイコンをアップロードすると、様々なサイズにサイズ変更され、実行時に適切な場所に伝播されます。

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

   2. 「閉じる」をクリックします。
7. 「変更の適用」をクリックして、変更を保存します。

5.10.3 実行時開発者ツールバーの「アプリケーション・アイコンの編集」の使用

実行時開発者ツールバーの「カスタマイズ」メニューで「アプリケーション・アイコンの編集」オプションを使用して、実行時にアイコンを編集します。

「アプリケーション・アイコンの編集」を使用するには:

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

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

2. 実行時開発者ツールバーで、「カスタマイズ」をクリックして「アプリケーション・アイコンの編集」を選択します。

   「アプリケーション・アイコンの編集」ダイアログが表示されます。

3. 「アプリケーション・アイコンの編集」ダイアログで、次のいずれかを実行できます。
   • 「新規アイコンをアップロードします」リージョンにファイルをドラッグ・アンド・ドロップします。
   • 新規アイコンのアップロード・リージョンをクリックし、ファイルにナビゲートします。
4. 新しいアイコンが表示されたら、「ズーム」スライダを使用してフレーム内で位置を変更します。

   アイコン・クロッパにフォーカスすると、次のキーボード・ショートカットも使用できます。

   • [←] - イメージを左に移動します

   • [↑] - イメージを上に移動します

   • [→] - イメージを右に移動します

   • [↓] - イメージを下に移動します

   • [I] - ズーム・イン

   • [O] - ズーム・アウト

   • [L] - 左に回転します

   • [R] - 右に回転します

   [Shift]を押すと移動が速くなります。

5. 変更内容を保存するには、保存をクリックします。
6. 保存せずにダイアログを終了するには、「取消」をクリックします