日日是Oracle APEX: FontAPEXに含まれていないInstagramのアイコンをアプリに表示させる

2023年2月15日水曜日

FontAPEXに含まれていないInstagramのアイコンをアプリに表示させる

Oracle APEXの標準フォントであるFontAPEXはオープン・ソースで、GitHubにて公開されています。

https://github.com/oracle/font-apex

ライセンスの関係でGoogle、Twitterその他（Oracleも含む）のブランドに関係するアイコンはFontAPEXに含まれていません。

FontAPEXに含まれているアイコンは、以下のサイトより探すことができます。

https://apex.oracle.com/fontapex/

APEXのアイコンを探してみます。

使用するアイコンを決めて、クリックします。

Size、Scale、Animationなどを指定して、HTMLやIconとして記述する文字列を生成します。

APEXアプリケーションには、ここで得られた文字列を埋め込むことができます。

このサイトで、googleのブランド・アイコンを探してみます。

FontAPEXには含まれていないため、No Resultsとなります。

しかし、いくつかのブランド・アイコンはAPEXアプリケーションから参照することができます。

APEXアプリケーションに静的コンテンツのリージョンを作成し、ソースとして以下を記述します。

	<span aria-hidden="true" class="t-Icon fa fa-facebook"></span>
	<span aria-hidden="true" class="t-Icon fa fa-facebook-square"></span>
	<span aria-hidden="true" class="t-Icon fa fa-github"></span>
	<span aria-hidden="true" class="t-Icon fa fa-github-square"></span>
	<span aria-hidden="true" class="t-Icon fa fa-google"></span>
	<span aria-hidden="true" class="t-Icon fa fa-linkedin"></span>
	<span aria-hidden="true" class="t-Icon fa fa-linkedin-square"></span>
	<span aria-hidden="true" class="t-Icon fa fa-oracle-o"></span>
	<span aria-hidden="true" class="t-Icon fa fa-oracle-o-square"></span>
	<span aria-hidden="true" class="t-Icon fa fa-oracle"></span>
	<span aria-hidden="true" class="t-Icon fa fa-twitter"></span>
	<span aria-hidden="true" class="t-Icon fa fa-twitter-square"></span>
	<span aria-hidden="true" class="t-Icon fa fa-youtube"></span>
	<span aria-hidden="true" class="t-Icon fa fa-youtube-square"></span>

view raw brand-icons.html hosted with ❤ by GitHub

ページを実行すると以下のように表示されます。

含まれているブランド・アイコンは限定されていて、InstagramはFontAPEXにもAPEXの製品自体にも含まれていないようです。

Font AwesomeとFontAPEXの両方を同時に使用する方法が、海外の記事で紹介されています。

Font Awesome v5 alongside Font APEX, Jeff Kemp

https://jeffkemponoracle.com/2020/04/font-awesome-v5-alongside-font-apex/

Use Font APEX and Font Awesome Simultaneously, Maxime Tremblay
https://askmax.blog/2018/01/29/use-font-apex-and-font-awesome/

Jeff Kempさん、Maxime Tremblayさん共にOracle APEX界隈では著名な方なので、確かな方法だと思うですが、記事がかなり古い（Font Awesomeは現在v6）のと、フォント全てをダウンロードしてfaというプレフィックス（FontAPEXもfaなので競合する）を書き換える、という作業はできれば避けたいです。

少数の足りないアイコンを表示させるために、SVGを使ってみます。

Font Awesomeのサイトへ行き、Instagramのアイコンを検索します。SVGのアイコンであれば、他のサイトからダウンロードすることもできるでしょう。

使用するアイコンをクリックします。

ダイアログが開くので、アイコンを確認します。

SVGファイルを使用するために、Font Awesome社のGitHubリポジトリからライセンス・フリーのファイルを探してダウンロードします。

https://github.com/FortAwesome/Font-Awesome/blob/6.x/svgs/brands/instagram.svg

Oracle APEXに移り、共有コンポーネントの静的ワークスペース・ファイルを開きます。
静的ワークスペース・ファイルとしてアップロードすると、アプリケーション間で共有できます。

ファイルの作成をクリックします。

ダウンロードしたSVGファイルを選択します。

作成をクリックします。

ファイルがアップロードされました。

APEXアプリケーションで使用するので、参照をコピーしておきます。

ページ・デザイナでアイコンを使用するページを開き、CSSのインラインに以下を記述します。SVGはバックグラウンド・イメージとして表示します。FontAPEXのSmallのサイズに合わせて、width, heightともに16pxとしています。

	.fa6-instagram {
	background-image: url("#WORKSPACE_FILES#instagram.svg");
	background-repeat: no-repeat;
	display: block;
	background-position: center center;
	background-size: contain;
	width: 16px;
	height: 16px;
	}