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

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

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

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

親トピック: アプリケーションの作成

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

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

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

ファビコン(ブラウザ・タブ・アイコン)
PWAアイコン
Appleタッチ・アイコン(PWAアプリケーションをiOSに追加する場合)
「アプリケーション・ビルダー」アイコン(アプリケーションのホームページに表示される)
「サインイン」ページ
ホームページのブレッドクラム・リージョン

アプリケーション・アイコンは、5つのサイズで共有コンポーネント、静的アプリケーション・ファイルに格納されます。

32x32 - ミニ四角形のアイコン
144x144 - 小さいラウンド・アイコン
192x192 - 小さい四角形のアイコン
256x256 - 大きいラウンド・アイコン
512x512 - 大きい四角形のアイコン

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

ヒント:

2つのラウンド・アイコン(144x144および256x256)は、macOSドックなどの場所で使用され、設計ガイドラインでラウンド・アイコンの使用が推奨されています。ラウンド・アイコンの正確な仕様は、各辺のパディングが10%、枠線の角の丸めが20%であることです。

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

新しいアプリケーションの作成時 - 新しいアプリケーションを作成する際に、アプリケーションの作成ウィザードの「アプリケーションの作成」ページで「アイコンの設定」をクリックします。「完全なアプリケーションの作成ウィザードの実行」を参照してください。
ユーザー・インタフェース属性の編集 - 「ユーザー・インタフェース」ページの「アイコン」で属性を編集して実行します。「ユーザー・インタフェース属性でのアイコンの管理」を参照してください。
実行時におけるアイコンの編集 - 実行時に、実行時開発者ツールバーの「カスタマイズ」、「アプリケーション・アイコンの編集」を順にクリックします。「実行時開発者ツールバーの「アプリケーション・アイコンの編集」の使用」を参照してください
静的アプリケーション・ファイルへのアイコンのアップロード - アプリケーション・アイコンは、5つのサイズ(32x32、144x144、192x192、256x256または512x512)で共有コンポーネント、静的アプリケーション・ファイルに格納されます。

すべてのアイコン・サイズについてアップロードを制御するには、共有コンポーネント、静的アプリケーション・ファイルにアイコンをアップロードし、次のファイル・パスを使用します。
- #APP_FILES#icons/app-icon-32.png
- #APP_FILES#icons/app-icon-144-rounded.png
- #APP_FILES#icons/app-icon-192.png
- #APP_FILES#icons/app-icon-256-rounded.png
- #APP_FILES#icons/app-icon-512.png

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

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

ヒント:

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

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

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

アプリケーションのホームページが表示されます。
アプリケーションのホームページから、ユーザー・インタフェース・ページに、次の2通りの方法でアクセスできます。
- 「アプリケーション定義の編集」ボタン:
  1. アプリケーション名の右側にある「アプリケーション定義の編集」をクリックします。
  2. 「ユーザー・インタフェース」タブをクリックします。
- 「共有コンポーネント」からの場合:
  1. 「共有コンポーネント」をクリックします。
  2. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。
ユーザー・インタフェース・ページが表示されます。
「アイコン」を見つけます。
既存のアイコンが、表に表示されます。
アイコンを編集または更新するには、「編集」をクリックします。
1. 「アプリケーション・アイコンの編集」ダイアログで、次のいずれかを実行できます。
  - 「ファイルの選択」をクリックして、新しいアイコンにナビゲートします。
  - 新しいファイルを、表示されたリージョンにドラッグ・アンド・ドロップします。
2. 「閉じる」をクリックします。
ライブラリから新しいアイコンを選択するには、「アイコンの変更」をクリックします。
1. 「アプリケーション・アイコンの編集」ダイアログで、次のいずれかを実行できます。
  - アイコンのアップロード。プラス(+)記号をクリックしてアイコンにナビゲートするか、アイコンを「独自のアイコンのアップロード」リージョンにドラッグ・アンド・ドロップします。
    
    カスタム・アイコンをアップロードすると、様々なサイズにサイズ変更され、実行時に適切な場所に伝播されます。
  - ライブラリからのアイコンの選択。アイコンの色を選択してからアイコンを選択します。
2. 「閉じる」をクリックします。
「変更の適用」をクリックして、変更を保存します。

親トピック: アプリケーション・アイコンの管理

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

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

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

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

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

「アプリケーション・アイコンの編集」ダイアログが表示されます。
「アプリケーション・アイコンの編集」ダイアログで、次のいずれかを実行できます。
- 「新規アイコンをアップロードします」リージョンにファイルをドラッグ・アンド・ドロップします。
- 新規アイコンのアップロード・リージョンをクリックし、ファイルにナビゲートします。
新しいアイコンが表示されたら、「ズーム」スライダを使用してフレーム内で位置を変更します。
アイコン・クロッパにフォーカスすると、次のキーボード・ショートカットも使用できます。
- [←] - イメージを左に移動します
- [↑] - イメージを上に移動します
- [→] - イメージを右に移動します
- [↓] - イメージを下に移動します
- [I] - ズーム・イン
- [O] - ズーム・アウト
- [L] - 左に回転します
- [R] - 右に回転します
[Shift]を押すと移動が速くなります。
変更内容を保存するには、保存をクリックします。
保存せずにダイアログを終了するには、「取消」をクリックします

親トピック: アプリケーション・アイコンの管理