見出し画像

FontAwesomeブログ:「FontAwesome Desktop Subsetterの紹介」(私家版・和訳版)

元記事はFontAwesomeブログの「Introducing the Font Awesome Desktop Subsetter」(2020-06-24)。

デスクトップ、モバイル/タブレット/スマートウォッチ、webアプリ、webサイトの全てで、Tone&Mannerが統一され、軽くてナイスなアイコンフォントは、とても重要です。それをビルドできる有償ツールが、FontAwesomeですね。

2020-06-26現在、スタンダードプランが初年度$79、以後$99ですね(無償プランだとFontAwesome 6は含まず)。2020-08-02以降は、価格が変化する模様。

Desktop Subsetter(β)とFontAwesome 5 Proのすべての機能にすぐにアクセスでき、バージョン6への早期アクセスと、リリースされた暁にはすべての機能にアクセスできる…との触れ込みです

以下、本文です。


これは11まで出せるんだぜ。

※訳者注:架空バンドのRockumentary映画『Spinal Tap』(1984)のセリフで、使ってるアンプが、目盛り11迄出せる事を自慢してるシーンのものだそうな。

サイトの為に、最速のFontAwesomeアイコンが欲しいですか? 弊社のSVGアイコン付きProキットは、通常、使い易さ(ファイルの管理や移動が不要)とスピード(サイトで使用するアイコンだけが、必要な時に読み込まれる!)のバランスが最も良いものです。

が、11迄出せる様な物が欲しくなるエッジケースがあるかもしれないし、少し手間をかけても気にしない様なケースもあります:

サイト上のFontAwesome Proアイコンを最速でロードしたいと考えていて、それらを自身でホストしても構わない。

FontAwesome Proを使ったモバイルアプリを開発していて、アプリのバンドルを可能な限り小さくしたい。

Desktop Subsetter(現在β版)で、アイコンをスリム化しよう

新しいFontAwesome Pro Desktop Subsetterを使用すると、必要なアイコンだけを選択できます。WebフォントサブセットとすべてのCSSファイル(そう、SVG付きの自動サブセット化Proキットよりも、通常、 Webフォントサブセットは、少し高速)を構築するので、それらを使用してサイトやアプリをこれまで以上に高速化できます!

0. セットアップ

Desktop Subsetter(β)を使用するには、アクティブなFontAwesome Proのサブスクリプションを持っているか、Kickstarterバッカーまたはv6のプレオーダー・バッカーである必要があります。

画像1

まずアカウント詳細でβ機能を有効にしてください!

fontawesome.comにログインしてβ機能を有効にする(上記)と、FontAwesomeダウンロードページにFA Pro Desktop Subsetterが表示されます。ダウンロードしてインストールし、FontAwesomeのアカウント情報でログインします。

1. 必要アイコンの追加

設定後、すべてのProアイコンとスタイルが表示されます。Subsetterでは、すべてのシンボルを検索したり、スタイルでフィルタリングしたり、リストを参照したりできます。

画像2

プロジェクトにちょっとしたアイコン(fa-magic)を見つけたら、それを選択すると、アプリがサブセットに入れたいアイコンの1つとしてメモしてくれます。気が変わった? アイコンリストまたはサブセットリストから再度選択するだけで、自動的にアイコンが消えていきます – fa-hat-wizardsやfa-book-spellsは必要ありません。

画像3

2. サブセットの保存

プロジェクトに必要なアイコンを全て選択したら、サブセットを保存することをお勧めします。「ファイル」メニューから「プロジェクトを保存」を選択するだけです。保存すると、このサブセットに固有のYAMLファイルが作成され、すでに追加したアイコンのタブが保持されます。

Pro-Tip:作業中のプロジェクトが複数ある場合、個別のサブセットと、各々に対応するYAMLファイルをセットアップするのは良いアイデアです。そして、私たちがYAMLを選んだのは、手動で編集したいLeetなハッカーの為の、非常に読み易く編集可能なフォーマットだからです。

3. サブセットのビルド

サブセットを処理し、スリム化したファイルを取得して使用する準備ができたら、「アイコン・サブセットをビルド」ボタンを選択します。

Desktop Subsetterは、あなたのサブセットをクラウド(つまり、FontAwesome API)にfa-rocket-launchして、ビルドし、FontAwesomeで慣れ親しんだ使い易いアセットを作成します。完了すると、好きな場所にZipファイルを保存するように促されます。

4. サイトやアプリでの利用

サブセットをビルドしてダウンロードしたら、FontAwesomeのドキュメントを見て、プロジェクトでの使用方法に関する詳細を確認してください。サイトで自身でホストすることも、ネイティブアプリでバンドルすることもできます。

この記事が気に入ったらサポートをしてみませんか?