アイコンフォントFontAwesome 5はKitで管理する

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
FontAwesome
by 写真AC一部筆者加工

アイコンフォントのFontAwesomeはアカウント作成が必要になりました。

かんたんにできたCDNのCSS配信をやめて『Font Awesome Kits』というJavaScript配信に変えます。

アカウント作成から『Kit』をつかった方法をかんたんに説明します。

Font Awesome Kitsってなんだ?

Font Awesome Kitsは

バージョン変更やアイコンフォントのベース変更(Web Fonts, SVG)を自動化するために、アカウントの管理システムで設定するようにした

ものです。そのため、アカウントの作成が必要になりました。

アカウントを作成すると『Kit』というコードが発行されて、Kit専用のJavaScriptがCDNに公開されます。

CDN (Content Delivery Network)

テキスト・動画・画像などあらゆる形式のファイルを大量に速く配信する仕組み。

以前は、必要なコンテンツ(ファイル)を、いったん自サーバへ置いて配信する形が主流だったが、近年は、必要なコンテンツを自サーバーに置かず、ネットワークを通じてコンテンツの配信先とつないで、かんたんにコンテンツを配信できる。

コンテンツ配信サービスをする側にとっては、自サーバーにコンテンツを集める必要がないので、ストレージが小さくできコストが安くなる。

またコンテンツを配布している方は、キャッシュや近くにあるサーバーから配信する仕組みになっているので、サービスを提供する側はあたかも自分がコンテンツをもっているかのようにふるまう。

最近はCSSやJavaScriptファイルも、CDNを使って自サーバーには置かないことが多い。

このjsファイルを自分のサイトのHTMLに実装すれば、アイコンフォントが使えます。

CDNから読んでいたcssファイルをKitのjsファイルに変えるだけですね?

ただ、アカウント作成という手間がひとつ増えましたが。

jsファイルの中身

ちょっと中身をみてみると、いまのSVG用JavaScriptに、Web Fonts(CDNのCSS)をJavaScriptで展開するものを追加したみたいです。

Web Fonts + SVG = Font Awesome Kits

仕様を知っているわけではないので予想ですが。

これまでは、Web FontsとSVGでは実装方法がちがいます。

Web FontsHTMLの<head>に<style>でCSSを追加
SVGHTMLの<head>に<script>でJavaScriptを追加

Font Awesome Kitsはこれを統合したんですね?

Font Awesome KitsHTMLの<head>に<script>でJavaScriptを追加

jsファイルの変更は不要

これまでのFont Awesomeは、HTMLの<head>の部分を修正する場面がありました。

  • バージョンを変更する。
  • Web Fonts ←→ SVGを変更する。

Font Awesome Kitsではこの修正が不要です。これらの変更はアカウントのKitの設定で行ないます。

Font Awesomeのアカウント管理システムが、設定内容からjsファイルを再生成してくれます。

jsファイル名は変わりません。

いままで手作業でしていたことを設定だけで行うために、アカウント作成が必要になったんですね?

Font Awesome Kitsはバージョン5の機能です。

バージョン4はFont Awesome CDNというサービスがはじまりました。

バージョン4もアカウントを作成して、jsファイルを実装する方法に変わっています。

ただし、Beta版なので今後どうなるかわかりません。

バージョン4のラッパーもKitの設定で用意されているので、バージョン4から5へ移行しても大丈夫です。

というか、Font Awesomeは移行を推奨しています。

Font Awesome 4 Usage

アカウントを作成する

さっそく新しいFont Awesomeの使い方をはじめましょう。

まずはFontAwesomeのスタートアップページからアカウントを作成します。

Font Awesome 5 アカウント作成
Font Awesome 5 アカウント作成

メールアドレスを入力して『Send My Kit Code </>』を押してください。

メールを確認。

メール本文のボタンをおしてアカウント作成をつづける。

パスワード入力してボタンを押す。

氏名、かんたんなアンケート入力をしてボタンを押す。

がおわると、アカウントが作成されます。

CDN配信ファイルを管理するKit

アカウント作成がおわると、自動的にサインインして、Kitの管理ページがひらきます。

Font Awesome Kit detail
Kitの詳細ページ

アカウントを作成した最初のサインインでは、Kitがひとつ生成され、その詳細ページがひらきます。

コピーボタンもあるし、HTMLへの貼りつけ方もあるのでかんたんですね?

Kitの設定変更

Kit詳細ページの右上の『Settings』から設定の変更ができます。

アイコン

Font Awesome Kit Settings Icons

Free(無料版)、Pro(有料版)をえらびます。Freeでも十分使えるのでよほど困らないかぎりそのままでいいでしょう。

フォントをつくっている技術

Webフォントか、SVGをえらびます。

Webフォントは、いままでCSSファイルで配信されていたのものです。使い方も同じです。

バージョン

Font Awesomeのバージョンをえらびます。

Latestにすると、Font Awesomeの最新バージョンをつねに使います。バージョンアップを気にする必要がありません。

いままで、バージョンアップのたびにHTMLを修正していたのが自動化されたんですね?

バージョンを指定することもできます。もちろんHTMLの修正は不要です。

その他細かい設定

オートアクセシビリティ

アクセシビリティは

サービスへのアクセスのしやすさ

です。どのような環境でもだれでも(高齢者や身障者など)サービスが使えることです。

ここでのアクセシビリティの自動化はよくわかりません。

アクセシビリティを意識してください。アイコンに意味のあるタイトルをつけるだけで、ユーザー補助のベストプラクティスが自動的にアイコンに適用されます。

本文訳

アイコンにタイトルがつくのかな?

アイコンが表示できないときの代替テキスト?

とも思いましたが、とくに変化はありませんでした。

とりあえずチェックをつけておきましょう。

アイコンの非同期

ページの読み込みがおわってからアイコンを表示します。ページの表示速度に悪影響を与えないためのものです。

チェックをつけたほうがいいでしょう。

バージョン4のラッパー

バージョン5で4のアイコンを使えるようにします。

バージョン4から使っている人はチェックしましょう。

バージョン5から使っている人はつけないほうがいいです。ムダなJavaScriptの処理が入るので。

(つけても動作に問題ありません。)



下にある保存ボタンをおしたら設定変更の完了です。

Kitの管理ページ

Kitの詳細ページに戻ります。

左上に『Your Kits』というリンクがあります。管理しているKitのリストページに移動します。

Font Awesome Kit List
Kitリストのページ

Pro版でないと追加できません。free版で使えるKitはひとつだけです。

Pro版は有料です。

FontAwesome 5の使い方

バージョン5の使い方は前と同じです。こちらをどうぞ。

新しいFont Awesome 5の問題点

2019年7月12日現在、使えなくなった機能があります。

ぼくが対応してほしいと思うものは2つです。

(調べたかぎり、ほかには不都合なことはありません。)

WebフォントのCSS疑似要素が使えない

CSSでつくる疑似要素は、KitのWebフォントでは使えません。

疑似要素のサンプル
::before
<div>sample</div>

疑似要素は::before, ::afterです。

これが、CSSを展開するJavaScriptファイルでは使えません。

ぼくは、けっこう使っているのでKitは使っていません。

SVGでは使えます。でもSVGはHTMLをJavaScriptで動的に変更します。

疑似要素から変換されたSVG
::before
<svg>...</svg>
<div>sample</div>

JavaScriptが疑似要素::beforeの下に<svg>タグを追加します。

Webフォントから変更するとCSSの変更が必要です。

(::beforeのスタイルをsvgに適用する。)

まえは使えたので、すぐ対応してくれるような気がします。SVGは疑似要素が使えるし。

というか、やってもらわないと困ります。

AMPが対応できない

AMPはTwitter社とGoogle社が共同開発した、3Gなどの通信環境がよくないところでも、Webページを速く表示するカスタムのHTML技術です。

AMPは外部のJavaScriptを読み込めません。

Font Awesome 5のWebフォントがCDNのJavaScript配信になったので、AMPでは使えなくなります。

これどうなるのか?

どうにかしてほしいものです。

前のページ
アイコンフォントFontAwesomeはアカウントが必要になった
アイコンフォントFontAwesome 4の新しい使い方
次のページ
SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!