ビザスクWebチームエンジニアの小柳(@mascii_k)です。
先日、ビザスクのサービス上で利用しているアイコンセットである Font Awesome のバージョンを4系から5系にアップデートしました。
デザイナーによると、Font Awesome 4 はアイコンによって大きさがまちまちだったり、使い勝手が悪いことがあったそうです。
今回実施したアップデートの手順を簡単に紹介したいと思います。
アップデート方針
まずは、公式ドキュメント(Upgrading from Version 4)を読みました。
一時的に後方互換性を維持するアップデート方法(v4-shims)の誘惑に負けそうになりますが、無視して "Icon Name Changes Between Version 4 and 5" を見ます。
ドキュメントを読んでいくと、4では <i class="fa fa-file-text"></i> や <i class="fa fa-file-text-o"></i> のように指定していたアイコンを、5ではそれぞれ <i class="fas fa-file-alt"></i>, <i class="far fa-file-alt"></i> に対応させれば良いことがわかりました。地道に置換えしていけば良さそうです。
置換手順
"Icon Name Changes Between Version 4 and 5" に書いてあった "Old Icon Name or Alias (Version 4)" の表の名前に "fa-" を付けて、対象リポジトリ下で git grep します:
git grep -E '(fa-500px|fa-address-book-o|........|fa-youtube-square)'実行すると以下のような出力がされるはずです(一部加工しています):
template001.html: <li><a href=""><i class="fa fa-facebook"></i>Facebookで登録</a></li>
template002.html: <li><a href=""><i class="fa fa-linkedin"></i>linkedinで登録</a></li>
template003.html: <a href=""><i class="fa fa-linkedin"></i>LinkedIn Signin</a>
template004.html: <i class="fa fa-close"></i>候補から外す
template005.html: <i class="fa fa-close"></i>候補から外すパイプで | grep -o -E 'fa-[a-z-]+' | sort | uniq を繋いで、"fa-xxxx" の部分だけを抽出してみます:
fa-calendar
fa-close
fa-comment-o
fa-credit-card
fa-external-link
fa-eye
fa-facebook
fa-file-text
fa-file-text-o
fa-fw
fa-google-plus
fa-lg
fa-linkedin
fa-map-marker
fa-mobile
fa-pencil
fa-twitter
fa-yen上記のうち "fa-fw" (等幅にする), "fa-lg" (サイズを大きくする)はアイコンのクラスと組み合わせて使うクラスのため、 grep -o によって抽出されたノイズでした。
"fa-fw", "fa-lg" を除いてどんなアイコンが使われているか可視化してみます。
弊社では esa.io をドキュメントツールとして利用していますが、esa.io では Font Awesome 4 が導入されているため、iタグで <i class="fa fa-file-text"></i> のように指定すればアイコンを表示することができました。
デザイナーと「あー！こんなアイコン使っているページあったあった〜」と会話しつつ、各アイコンがどのページで使われているか整理しました。
これがなかなかの苦行で、先程の git grep の結果をいい感じに Markdown に変換したり、各テンプレートファイルがどのURLと対応しているか調べたりで大変でした。
ここまでが事前調査で、実際の置換えは git grep と sed を使用しました:
git grep -l 'fa fa-linkedin' | xargs sed -i '' -e 's/fa fa-linkedin/fab fa-linkedin-in/g'
git grep -l 'fa fa-map-marker' | xargs sed -i '' -e 's/fa fa-map-marker/fas fa-map-marker-alt/g'
git grep -l 'fa fa-file-text' | xargs sed -i '' -e 's/fa fa-file-text/fas fa-file-alt/g'
git grep -l 'fa fa-file-text-o' | xargs sed -i '' -e 's/fa fa-file-text-o/far fa-file-alt/g'こんな感じで置換え、事前調査したページたちで問題なくアイコンが表示されているか確認します。
ほとんど問題なく置換えできたのですが、3つ問題が発生してしまいました:
- 置換えコマンドの実施時に、
fa fa-file-text->fas fa-file-alt,fa fa-file-text-o->far fa-file-altの順番で実施したためにfa fa-file-text-o->fas fa-file-alt-oという置換え結果が生じてしまい、元々fa fa-file-text-oだったアイコンが表示されなくなってしまった - 一部、CSSによる16進形式(
\fxxx)でのアイコン指定があり、対応が漏れていた - Font Awesome 4 でのアイコンサイズに合わせてアイコンを拡大・縮小をしていたために、極端に大きくなったり小さくなったりしたアイコンが見受けられた
これらの問題も対処し、QAに各画面のチェックをしてもらって本アップデートのリリースとなりました。
まとめ
想像以上に大変な作業でしたが、きっとデザイナーは喜んでくれたはずです…!
実は本アップデートはMeguro.es #21 の会場提供をしましたでも紹介した「デザイン / フロントエンド環境のリニューアル」の一環だったりします。
まだ「デザイン / フロントエンド環境のリニューアル」はすべてリリースできていないですが、リニューアルの全容についてもテックブログに書けたらと思っています！
一緒に働くエンジニアを募集中！
ビザスクではエンジニアを大募集中です！
ビザスクに少しでも興味のあるWebエンジニアの方がいたら、ぜひお話を聞かせてください！詳しい募集要項は下記リンクからアクセスしてください。