Font Awesome5にアップグレードした結果困ったことになっている方へ

Font Awesome5にアップグレードした結果困ったことになっている方へ

webのあれこれ
2018/02/25
0
vanillaice (Akira)
vanillaice (Akira)
FontAwesomeTipsトラブル対処

まぁ、今回も私のテンプレートとの絡みですよね。web一般ではなく (´・ω・`)

先日4から5へ大規模なアップグレードが行われた Font Awesome ですが、既存テンプレート内容については

  • 現在メンテナンス作業進行中のものについては 5へのアップグレード及びJSを利用
  • 既にメンテ終了済みのものは次回以降のメンテナンスまで アップグレード保留

とお伝えしてあります。
「次回以降のメンテナンス」というのは「Font Awesomeをアップグレードするためのメンテンス」ではありません。
テンプレート全体で某かの調整を加えることがあればそのついでに、という意味です。
ところがそういうわけにもいかないのかなぁー ( ̄∀ ̄;)
これ製作者サイドとしてもかなりの悩みどころなんだけど、どうしましょうね ←

とりあえず、なんかもう待ちきれなくて自分でやっちゃった! という方もいらっしゃると思います。
その結果 うぇーん (;ωq`) どうちよう という方も(笑)

そんなせっかちな貴方はとりあえず shim を使ってください。

* Shim = 【読み方】シム 【意味】詰め物, 繋ぎ, 隙間埋め

一時的救済処置としてShimが提供されています

これはFont Awesome(以下 FA と称す)運営側が準備してくれてます。
「一時的」というのは私が勝手に付けましたけども、いわゆる 後方互換 ですのでいつまでも頼らない方が良いですね。
移行完了するまでの間のそれこそ「繋ぎ」に利用するべきで、いつまでも依存しない (´・ω・`)

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/v4-shims.js"></script>

上のファイルが バージョン5メインJS です。
下のファイルが 「バージョン5」で使うための「バージョン4互換」JSファイル です。
現在の最新バージョンが「5.0.6」ですので、双方に v.5.0.6 という文字列が入ります。
利用するメインJSと同じバージョンを指定します。Shimの方もバージョン名は 4.7.0 みたいな「これまで使っていた4」のソレではなく「現在利用している5」のバージョンを記してください。じゃないと機能しません。
defer属性付いてますのでhead内でOKです。

Shimを利用する場合には5のリンクの選択をCSSではなくJSに。

今回からファイル参照がCSSまたはJSのいずれか二択になってます。
FA運営の推奨はJSです。
移行までの間、Shimがどうしても必要という場合にはJS一択。

JSかCSSかの選択によって、参考にする内容も異なります

いわゆる「指南書」的なページをみなさん参照されると思うんですよね。
その際に そのページ内容はCSSのものなのかJSなのか をしっかり確認してください。何故なら CSSかJSかでスタイリングの仕方が全く違うから です。

そもそも表示の形態からして異なります。
CSSのFAを選んだ場合には アイコンフォント = フォントの仲間 で表示されます。
JSのFAを選んだ場合には SVG = 画像の仲間 で表示されます。

これで具体的に何が違ってくるかというと、CSSによるスタイリング内容が違う。
例えばアイコンフォントに影をつけるには text-shadow を利用します。
SVGにtext-shadowは通用しません。SVGに影をつけるには filter drop-shadow が必要です。

こんな感じで参考書・お手本サイトを間違えると自分が思ったことができないですよ (´・ω・`)
そして私がテンプレート内のFAをアップグレードする際には CSSリンクは選びません。
ですから参考サイトは「JSのFA」について書かれているものにしてください。

Shimを利用しても完璧な表示にはなりません

例えば記事内で旧書式による記載を行なっていた場合。
これはShimが「有効」と言えるかと思います。
大抵の場合、そんなに複雑なことはしていなと思いますので。まぁその辺はわからんけど ^^;
特に SNSブランドアイコン はアップグレードと同時に表示が行われなくなります。
各社ブランドアイコン・ロゴなどは旧来の fa プリフィックス(クラス名)から fab プリフィックスとしてまとめられています。例えば

<i class="fa fa-facebook"></i>
<i class="fab fa-facebook"></i>

こうして旧htmlと新htmlとを同時掲載してみます。
両者共 i要素 として記しますが、異なるのは最初のクラス名が .fa か .fab かだけ。後は全部同じです。

Shim無し ShimなしFont Awesome表示 Shim有り ShimありFont Awesome表示

Shimを入れたことにより旧来の .fa でも表示されるようになりました。
がしかし 見た目が違う
これだけでも「完璧でない」理由に十分足りますが、こういう単純な掲載は一時的になんとかなるとしても テンプレートデザインに含まれているもの はそういうわけに行きません。
こちらについては製作者が整形し直さないことにはにっちもさっちも。
もちろん腕に覚えありの方はチャチャッとやって頂いて構いません。

Shimを入れて表示はされたがデザインがめちゃくちゃ、という場面になったとしても、私が個々の手助けに逐一応じるわけにはいきませんので、もうやっちゃった方々は頑張って自分でなんとかしてもらう方向で(すみません)
まぁ、テンプレートも早めに切り替えた方が良いのかなぁとは思ってます。
ただ考えるべき点が色々ありまして、すぐにはできないや (´・ω・`)

どっちにしても書き換えは必須だと思った方が良い

心構え的に(笑)
テンプレートの方は私が全部やるので良いのですが、記事内容の方ですよね。問題は。
どこまでのことをしているかにもよりますけども、複雑なことをしている方は修正がより大変になると思います。
そんでもって今の私がそうですが、
チェックがすげーめんどくさい
割りと頻繁に使ってる場合なんて結局 全部のページで表示チェック しなきゃなんないわけよ。
使ってないページももちろんたくさんありますよ。
でもその「使ってる」「使ってない」を知るためには結局全ページチェックじゃん。
うっぎゃぁぁあぁーー からの〜 おぇぇえぇぇぇ… orz
って感じ

まとめ

自己責任でアップグレードした方はShimを利用しながら少しづつ修正を行われると良いと思います。
先にお伝えしたようにShimを入れたからといって全て解決するわけではありませんが、何も表示されない状態よりはずっと良いはずです。
閲覧する方へも「只今修正作業中です」と記しておけばよっぽど理解してくれるはず。

まだ何もしていないという方はテンプレートの修正をお待ち頂ければ、と思います。

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)