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

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

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. 保存せずにダイアログを終了するには、「取消」をクリックします