Sencha FontAwesome パッケージをリバースエンジニアリングしてアイコンの概要を知る

何度か、このブログでも翻訳させて貰った、Lee Boonstra のブログ記事 Reverse Engineer the Sencha FontAwesome package to get an overview of icons. | Dev Tricks を翻訳しました。

Sencha に同梱されている FontAwesome フォントパッケージについて解説された記事です。どうぞご覧ください。

Ext JS 6 には font-awesome アイコンフォントが同梱されています。
昔あった Windowngs フォント(*) を覚えてますか？ アイコンフォントはなんかそんな感じのフォントです。 アイコンフォントのそれぞれのキャラクター (unicode) にはアイコンがマップされています。 アイコンフォントの素晴らしいところは、ベクターデータであるという点です。 そのため、簡単に色や大きさが変更でき、常に最高の品質を保ちます。 Retina ディスプレイでは完璧です。 もうPhotoShop を開いてアイコンを変更する必要はありません。 なぜなら、それはテキストであり、影をつけたり色や背景や大きさをを変えたりするのは全部 CSS でできるからです。 (ただ、3D やフルカラーのアイコンは作れません、だってテキストなんですもん) また、アイコンフォントは、スクリーンリーダーに影響しません。

FontAwesome

Ext JS 6 では font-awesome アイコンフォントは SDK に組み込まれたコードパッケージで、自由に使えます。バージョン 4.4 には 585 ものベクターアイコンがあります。

フォントパッケージを使うには、font-awsome を app.json ファイルで有効にします。
(Sencha Cmd を使ってアプリケーションを生成した場合は、すでに記述されています)

[code language=”js”] "requires": [ "font-awesome" ], [/code]

これでコンポーネントの iconCls プロパティでフォントを使うことができるようになります。 次のように…

[code language=”js”] { xtype: ‘button’, iconCls: ‘x-fa fa-globe’ } [/code]

iconCls はボタン、パネルのタイトル、メニュー、ツリーのノード、グリッドのアクション、セパレーターやステータスバーでサポートされています。 (おそらくアイコンを配置したいと思うような所のほとんどを網羅していますが、テンプレートなどでアイコンを使いたければ、手動で後で説明するトリックを使うこともできます)

大きな問題は、どんなアイコンが同梱されているか？を知る方法です。 簡単な答えは、font-awesome チートシート http://fontawesome.io/cheatsheet/ を使うということです。

しかし、最善の答えは、パッケージをリバースエンジニアリングすることです。
myapp/ext/packages/font-awesome/sass/etc/ を見てみましょう。

Location

Let’s first dive into: _variables.scss. This Sass file, shows the font version number, and the CSS prefix. For Ext JS 6.2 this is:

では最初に _variables.scss を見てみます。 この SASS ファイルはフォントのバージョンと CSS プリフィクスが記述されています。 Ext JS 6.2 用のものは次のようになっています。

$fa-version: "4.4.0" !default;
$fa-css-prefix: fa !default;

_variables.scss ファイルには、それぞれのアイコンの変数名があります。 しかし探しているのがどのアイコンなのかはまだわかりません。 ですから、ブラウザーを開いて Icomoon フォントアプリを使いましょう。

https://icomoon.io/app/#/select

Import Icons ボタンをクリックします。 myapp/ext/packages/font-awesome/resources/fonts/ に移動して、 fontawesome-webfont.svg を選択します。

これで Ext JS の font-awesome アイコンがインポートされました。 Icomoon アプリの中で、すべての font-awesome アイコンを選択します。 (最初を選択肢、シフトキーを押したまま最後を選択します) (訳注: この方法だと選択しにくいので、画面右上のハンバーガーメニューから Select All を選択します) 次に 画面の下にある Generate Font ボタンを押します。 画面にはすべてのアイコンとその unicode が表示されます。

はいこれでフォントがどこにあってその文字コードが何かがわかるようになりました。 リストを見て、好きなアイコンを選ぶことができます。 文字コードをコピーして、_variables.scss の変数名を参照します。 例えば、二つの音符のアイコンのタイトルは uniF001 ですので、 *\f001* というコードに一致する SASS 変数は $fa-var-music です。

_icons.scss を開きます。 変数名をこのファイルの中で探します。 $fa-var-music のある部分は次のようなものです。

[code language=”css”] .#{$fa-css-prefix}-music:before { content: $fa-var-music !important; } [/code]

これは、次のような CSS にコンパイルされます。

[css] .fa-music:before { content: $fa-var-music !important; } [/css]

みての通り、fa-music という CSS クラスでは、HTML DOM 内のこの CSS クラスを持つエレメントの前に中身が音符のアイコンになっている別のノードが生成されます。 iconCls は DOM ツリーにこのノードを追加します。

では、アイコンをスタイリングする方法はどうなっているのでしょうか。 (例えば、色とかフォントサイズとか) それは、x-fa クラスです。

注: x-fa クラスは Ext JS アプリケーションで font-awesome.com からフォントパッケージをダウンロードする fa の代わりに使います。 fa クラスのいくつかのプロパティは Sencha のテーマのプロパティと衝突します。 一方、x-fa フォントファミリーだけを設定しています。

[code language=”css”] .#{$prefix}fa:before { font-family: FontAwesome !important; } [/code]

The default font-size and colors are set in _variables.scss:

デフォルトのフォントサイズや色は _variables.scss で設定されています。

[code language=”css”] $fa-font-path: "../fonts" !default; $fa-font-size-base: 14px !default; $fa-line-height-base: 1 !default; $fa-version: "4.4.0" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default; $fa-li-width: (30em / 14) !default; [/code]

* Wingdings フォントは 1990 年に Microsoft によって提供された、実際にはまぬけな (プリンターキャラクターが植字に使われている) フォントです。 以前はユニコードにマッピングされておらず、(古い) Microsoft プラットフォームでのみ有効ですから、Windings を Web で使ってはいけません。

Cartoon