SVGで提供されているロゴをメニューに表示してみます。今回はOpenAIのロゴを使用します。APEXで作ったアプリにChatGPTのAPIを呼び出す機能を加えたときに、役に立つかもしれません。
おそらく2021年までは回答の場所にあったのだと思いますが、現在はhttps://openai.com/brand#logosにありました。Download logosをクリックするとopenai-logos.zipというファイルがダウンロードされます。
SVGのロゴは、openai-logos.zipを展開すると作成されるディレクトリSVGs以下に、openai-logomark.svg（黒）、openai-white-logomark.svg（白）として含まれています。
SVGs % ls -l
total 40
-rw-r--r--@ 1 ********** staff 2946 4 11 06:44 openai-lockup.svg
-rw-r--r--@ 1 ********** staff 1735 4 11 06:45 openai-logomark.svg
-rw-r--r--@ 1 ********** staff 4141 4 11 06:46 openai-white-lockup.svg
-rw-r--r--@ 1 ********** staff 2414 4 11 06:47 openai-white-logomark.svg
SVGs %
APEXアプリケーションの共有コンポーネントの静的ワークスペース・ファイルを開きます。
SVGのデータを使ってCSSクラスを作成するには、２通りの方法があります。
- SVGファイルをアップロードし、CSSのクラス定義からファイルを参照する
- SVGファイルの内容をBASE64でエンコード（Quoted Printableも可）してCSSクラスに埋め込む
ファイルをアップロードするには、ファイルの作成をクリックします。
コンテンツを指定するためにファイルをドラッグ・アンド・ドロップをクリックして、ファイルを選択します。または、書いてある通りファイルをドラッグ・アンド・ドロップします。
作成をクリックすると、選択したファイルが静的ワークスペース・ファイルとしてアップロードされます。
openai-logomark.svgとopenai-white-logomark.svgをアップロードします。
アップロードしたSVGファイルを参照するCSSクラスを作成します。ファイルのアップロードと同様に、ファイルの作成をクリックします。
ファイル名はvendor-logos.cssとします。コンテンツを選択せずに作成をクリックすると、ファイルが新規作成されます。
ファイルの内容として以下を記述します。ファイルの拡張子がcssであれば、変更の適用時に自動的にミニファイされたCSSファイルも作成されます。参照はAPEXアプリケーションから、このCSSファイルの読み込むために使用します。あらかじめ、コピーしておきます。
CSSからSVGファイルを参照するのではなく、CSSファイルに埋め込むにはbackground-imageの指定を以下のように変更します。
メニューにロゴを表示するために、このCSSクラスをアプリケーションのすべてのページから参照可能にします。
静的ワークスペース・ファイルvendor-logos.cssの参照を、アプリケーション定義のユーザー・インターフェースのCSSのファイルURLに設定します。
以上ですべてのページからOpenAIのロゴが参照できるようになりました。
デフォルトで作成されるホーム・ページへのナビゲーションのアイコンを、OpenAIのアイコンに変更してみます。
共有コンポーネントのナビゲーション・メニューに含まれるナビゲーション・メニューを開きます。
リスト・エントリにホームがあるので、それを開きます。
イメージ/クラスをopenai-white-logomarkに変更します。
以上で記事の先頭の画像のように、OpenAIのロゴがメニューに表示されます。
これまでの例は、ユーザー・インターフェースのナビゲーション・メニューのリスト・テンプレートとしてSide Navigation Menuが選択されていました。
これをTop Navigation Mega Menuに変更します。
ナビゲーション・メニューをTop Navigation Mega Menuに変更すると、アイコンが表示されません。
これには２つ理由があります。
- 背景色が白なのでopenai-white-logmarkの代わりにopenai-logomarkを使用する
- クラスfaを追加で指定する
Side Navigation MenuとTop Navigation Mega Menuでテンプレート定義が異なるため、Top Navigation Mega MenuではCSSのクラス指定にfaを追加する必要があります。
リスト・エントリのイメージ/クラスをfa openai-logomarkに変更します。
APEXのアプリケーションには、アイコンを埋め込むことができる場所が多数あります。思ったように表示されない場合（特にアイコンとなるspan要素がHTMLに含まれているにもかかわらず）には、同様の対応が有効である可能性があります。
以上になります。
Oracle APEXのアプリケーション開発の参考になれば幸いです。
完
