#5177

小粒でも看板


web制作


以前もちらっと紹介したことのあるアイコンフォントライブラリ、
『Font Awesome』(フォントオーサム)がいつの間にかver.5になっていたので、
この機能を随所で使っている特設サイトに新バージョンを組み込もうと
いろいろと試行錯誤していたのですが、結論から言って失敗しました。
個人的にFont Awesomeの仕組みは大好きなのでただの失敗談で終わらせたくないのですが、
反省を兼ねて今回の更新作業について書き残しておきます。

Font Awesomeとは、(とJavaScript)だけでWebページにアイコンを組み込む仕組み。
要は独自の絵文字をヘッダーで読み込んでCSSの文字装飾プロパティでいじれるというもので、
ユーザーは中身が空のiタグのクラスに定義されたアイコン名を書くだけで、
空タグのある場所にアイコンを表示することができるようになります。
実体としては文字なので、CSSが文字に対して適用できるいろんなことができます。
大きさや色を変更したりといったことはもちろん、
影を付けたり背景色を設定したり、その気になればグラデーションもかけたりもできます。

さらにFont Awesomeの凄いところは、
専用クラスを別に指定することでアイコンに回転アニメーションを加えたり、縦横比を統一したり、
アイコンの表示角度を変えたり、さらには異なるアイコン同士を自由自在に重ね合わせたりできます。
文字列も重ね合わせられるので、
例えばメールアイコン上に未読件数を表示したりといったことも画像を一切使わずに完結できると。
これらの機能は以前から同じようなものがありましたが、
今回の大型アップデートですべて刷新され、機能も大幅に強化されているようです。

アイコンフォントの機能強化でさらに更新作業が捗りそうだということで
ワクワクしてver.5専用のCDNを読み込んで、
とりあえず余計なことはせずにアップデートしてみたのですが、
更新告知をするよりも早くユーザーから不具合報告が届き、何のことかと検証してみたら、
Font Awesome 5は読み込みする際に内部ソースのアイコンを表示する部分を
SVGというHTMLタグに書き換えているらしく、
これが別のTooltip表示ライブラリの動作を阻害しているために表示不具合が起こっていました。
しかも、自分が普段使っているFirefoxでは無事に表示されるのに、
Microsoft Edge、Google Chromeでのみ発現するという厄介な不具合。
ちょっと粘ってみましたが新バージョンを活かしたまま改善することはできなかったので、
仕方なくFont Awesomeのバージョンを下げて事なきを得ました。

普段も携帯版とPC版の両対応で四苦八苦することはありますが、
こんな感じで動作環境確認しているブラウザ以外のブラウザで不具合が出ると困ったもの。
Google Analyticsのサマリーを見てみれば自分のサイトへのアクセスは
iOSのSafariが首位となっていますが
それにかなり迫る形でGoogle ChromeがPCブラウザの中では圧倒的なシェアだったりして、
FirefoxはAndroidブラウザよりも大きく下回るマイナーブラウザに過ぎないようです。
今週は何故かCSS周りのモチベが高かったのでいろいろいじっていましたが、
それが結果的にブラウザ間の見え方の違いを意識せざるを得ないことになり、
Webデザインの難しさを改めて噛みしめました。
とりあえず、今後は少なくともChromeからの確認は必須ですかね。Androidは……どうしよう。

余談ですが、この動作確認中に六年半ぶりにOperaを起動してみたのですが、
物凄く表示速度が速い上に使い勝手も良くなっていて、一瞬乗り換えようか迷いました。
FirefoxもQuantum以降にアップデートできていないし、プラグインの対応次第ではアリかも。

コメントを残す