2023年5月14日日曜日

Font Awesome Freeのフォントを使用する

 Font Awesome社がFont Awesome Free Licenseの元で提供しているフォントを、Oracle APEXで使用してみます。フォント・ファイルはWOFF2、またはTTF形式のものを使用します。

FontのデータはFont Awesome社のGitHubリポジトリから取得します。

https://github.com/FortAwesome/Font-Awesome

2023年5月15日の時点で、Font-Awesome-6.x.zipというファイルがダウンロードされます。


ダウンロードしたファイルを展開します。

Font-Awesome-6.xというディレクトリの下に以下のファイルが展開されます。

 Font-Awesome-6.x % ls -l

total 128

-rw-r--r--@  1 **********  staff    133  3 28 01:58 CHANGELOG.md

-rw-r--r--@  **********  staff   3234  3 28 01:58 CODE_OF_CONDUCT.md

-rw-r--r--@  **********  staff   1252  3 28 01:58 CONTRIBUTING.md

-rw-r--r--@  **********  staff   7427  3 28 01:58 LICENSE.txt

-rw-r--r--@  **********  staff   3600  3 28 01:58 README.md

-rw-r--r--@  **********  staff    444  3 28 01:58 UPGRADING.md

-rw-r--r--@  **********  staff    653  3 28 01:58 composer.json

drwxr-xr-x@ 20 **********  staff    640  5 14 14:21 css

-rw-r--r--   **********  staff  28918  5 14 14:04 fontawesome.zip

drwxr-xr-x@ 16 **********  staff    512  3 28 01:58 js

drwxr-xr-x@  **********  staff     96  3 28 01:58 js-packages

drwxr-xr-x@ 25 **********  staff    800  5 14 14:36 less

drwxr-xr-x@ 10 **********  staff    320  3 28 01:58 metadata

drwxr-xr-x@  **********  staff    160  3 28 01:58 otfs

drwxr-xr-x@ 21 **********  staff    672  3 28 01:58 scss

drwxr-xr-x@  **********  staff    160  3 28 01:58 sprites

drwxr-xr-x@  **********  staff    160  3 28 01:58 svgs

drwxr-xr-x@ 10 **********  staff    320  3 28 01:58 webfonts

 Font-Awesome-6.x % 

この中でwebfontslessに含まれるファイルを使用します。

webfontsへ移動し、拡張子が.woff2.ttfのファイルをZIPファイル(以下の例ではfonts.zip)に固めます。

zip -r fonts.zip *.woff2 *.ttf

APEXアプリケーションの共有コンポーネント静的ワークスペース・ファイルを開きます。

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


ディレクトリとしてwebfontsを指定します。CSSの定義には、フォントファイルが../webfonts以下に存在していると記述されているため、この値は必ずwebfontsにします。コンテンツとしてfonts.zipを選択し、ファイルの解凍オンにします。

作成をクリックします。


ファイルが作成されたら、静的ワーススペース・ファイルの一覧を確認します。

フォント・ファイルが展開され、ファイルの名前webfonts/で始まっていることを確認します。ZIPファイルに固める際にディレクトリ名が含まれていると、webfonts/webfonts/とディレクトリ名が2重になることがあります。そうなっていないように注意します。


CSSファイルはlessファイルより作成します。

Oracle APEXは標準でFont APEXがバンドルされています。Font APEXはもともとFont Awesomeと互換性があるように設計されているため、フォント名のプリフィックスがfaで、多くのフォントが同じ名前になっています。

フォント名の競合をさけるために、これから導入するFont Awesome Freeのフォント名のプレフィックスを、faからfaweに変更します。

lessには_variable.lessファイルが提供されていて、プリフィックスがfa-css-prefixとして定義されています。_variable.lessをエディタで開いて、fa-css-prefixの値をfaからfaweに変更します。

// variables

// --------------------------


@fa-css-prefix          : fawe;

@fa-style               : 900;

@fa-style-family        : "Font Awesome 6 Free";

@fa-style-family-sharp  : "Font Awesome 6 Sharp";


lessファイルからcssファイルを生成します。lesscコマンドを使用します。

lesscコマンドはNode.jsのパッケージに含まれています。Node.jsをインストールし、以下のnpmコマンドでインストールすることができます。(macOSで確認しています。)

npm install less -g

以下の5つのlessファイルから、CSSファイルを生成します。

lessc fontawesome.less fontawesome.css
lessc v4-shims.less v4-shims.css
lessc regular.less regular.css
lessc solid.less solid.css
lessc brands.less brands.css


ディレクトリscss以下でSass/Scssのコンパイラを使って作業を行なっても、プリフィックスを変更したCSSファイルを作成できると思います。

生成したCSSファイルを静的ワークスペース・ファイルとしてアップロードします。

ディレクトリとしてcssを指定します。コンテンツにlessから作成したCSSファイルを選択します。

作成をクリックします。


エディタが開きます。内容の変更が不要です。変更の保存を行うと、ミニファイされたCSSファイルも作成されます。

参照はAPEXアプリケーションに設定するため、メモに控えておきます。


以上の操作をfontawesome.cssv4-shims.cssregular.csssolid.cssbrands.cssにたいして行います。

最終的にアップロードしたCSSファイルと、それがミニファイルされたCSSファイルが作成されていることを確認します。


フォントを参照するAPEXアプリケーションの設定に移ります。

アプリケーション定義ユーザー・インターフェースCSSファイルURLとして、以下の5行を設定します。

#WORKSPACE_FILES#css/v4-shims#MIN#.css
#WORKSPACE_FILES#css/fontawesome#MIN#.css
#WORKSPACE_FILES#css/brands#MIN#.css
#WORKSPACE_FILES#css/regular#MIN#.css
#WORKSPACE_FILES#css/solid#MIN#.css


以上で、APEXアプリケーションからFont Awesome Freeのフォントが参照できるようになりました。

Font APEXとFont Awesomeの両方で登録されているフォントを表示してみます。

Max TrembleyさんのブログUse Font APEX and Font Awesome Simultaneouslyで紹介されているフォントを選んで表示します。

静的コンテンツのリージョンを作成ます。

Font APEXのリージョンのソースとして、以下を記述します。

<span class="fa fa-cog" aria-hidden="true"></span>
<span class="fa fa-trash-o" aria-hidden="true"></span>
<span class="fa fa-bars" aria-hidden="true"></span>
<span class="fa fa-envelope-o" aria-hidden="true"></span>
<span class="fa fa-key" aria-hidden="true"></span>
<span class="fa fa-shopping-cart" aria-hidden="true"></span>
<span class="fa fa-battery-half" aria-hidden="true"></span>


Font Awesomeのリージョンでは、以下をソースとします。

<span class="fawe fawe-cog" aria-hidden="true"></span>
<span class="fawe fawe-trash-o" aria-hidden="true"></span>
<span class="fawe fawe-bars" aria-hidden="true"></span>
<span class="fawe fawe-envelope-o" aria-hidden="true"></span>
<span class="fawe fawe-key" aria-hidden="true"></span>
<span class="fawe fawe-shopping-cart" aria-hidden="true"></span>
<span class="fawe fawe-battery-half" aria-hidden="true"></span>


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


以上でFont Awesomeを使うことができるようになりました。

このようにして追加したアイコンを、共有コンポーネントテーマに設定すると、カスタム・アイコンとして選択することができます。

共有コンポーネントテーマを開きます。


ユニバーサル・テーマを開きます。


アイコンのセクションに移動します。

カスタム・ライブラリ・ファイルURLは、アプリケーション定義ユーザー・インターフェースCSSファイルURLとして設定したURLと同じです。

カスタム・クラスについては、とりあえず以下の7つを指定します。それぞれカンマで区切ります。

fawe-cog,fawe-trash-o,fawe-bars,fawe-envelope-o,fawe-key,fawe-shopping-cart,
fawe-battery-half

カスタム接頭辞クラスとしてfaweを設定します。


以上の設定を行い、属性アイコンからアイコンを選択するダイアログを開いてみます。

カスタム・タブを開くと、カスタム・クラスとして登録したアイコンが一覧されますが、残念なことにアイコン自体は表示されていません。この原因は不明です。


Font Awesome Freeのフォントを使用する方法の説明は以上です。

今回作成したアプリケーションのエクスポートを以下に置きました。Font Awesome Freeのデータは含んでいません。
https://github.com/ujnak/apexapps/blob/master/exports/font-awesome-free.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。