2014年7月23日水曜日

アイコンフォント利用のお供に - Symbol Imagine の紹介


アイコンフォントの利用をより便利にするユーティリティ Symbol Imagine の紹介。


アイコンフォントについて


アイコンフォントとは、文字の代わりにアイコンがグリフとして納められているフォントであり、以下のような特徴のため Web サイトやモバイル等の開発素材として使われています。

  • 1ファイルに納められているため、ディスクアクセス(リクエスト数)を減らせる
  • ベクターデータなので、高解像度対応も容易
  • 文字として描画するので、画像で表示するよりも軽い

私のような絵心に乏しい開発者には非常にありがたい存在です。
しかしこのアイコンフォント、プログラムの中で使うには若干の面倒さがあります。

使用するアイコンの指定方法が微妙
意味を持たないアルファベットや Unicode でアイコン指定しなければなりません。
この欠点をリガチャを使って解決しているフォントもあります。

表示するまでの微調整が面倒
フォントなので、プログラムでは属性付き文字として構築&描画することになります。
テーマや状態に合わせて、表示位置やサイズ、色の調整が必要です。

フォントファイルをパッケージにバンドルしなければならない
使用するフォントは、ユーザのマシン内にインストールされているとは限らないので、フォントファイルはアプリケーションが持ちます。


このような手間のため、開発時には画像であった方が便利だった、というケースがありました。もしかすると、アイコンフォントをプログラムの中で実行時に画像化してから描画している開発者もいるのではないでしょうか。

というわけで、これら開発時の手間を解決するため、
このたび Symbol Imagine というユーティリティアプリケーションをリリースしました。


Symbol Imagine とは


以下の機能を持っています。
  • アイコンフォントに登録されているシンボルレパートリーの一覧を表示
  • 大きさ・色を変更してプレビュー
  • プレビュー結果を画像化して書き出し

アイコンフォントの特徴により、表示を確認するまでには手間あり、さくっとモックアップを作るにはいささか不便です。
ふんだんに存在するアイコンフォントの中から、自分のアプリケーションとマッチしたテイストのアイコンを選定し、色、位置、サイズの調整するまでに、この手間は小さからぬ問題となります。

Symbol Imagine では色、サイズをカスタマイズできますので、実際に使用する前にアイコンのプレビューを確認することが出来ます。



アイコンフォントを使用する際に困るのが、アイコン指定が(リガチャが入っているフォントを除き)アルファベットや Unicode であることです。
割り当てられているアイコンがフォント毎にそれぞれ異なっているし、1フォント内にもたくさんのアイコンが入っているので、とても覚えられるようなものではなく、各フォント毎にチートシートが必須です。

Symbol Imagine は Unicode とグリフの一覧を出しますので、フォントのチートシート代わりにも使えます。
Unicode スカラ値やグリフ名で絞り込むこともできます。


インストールしていないフォントも表示可能

OS X 付属の純正アプリケーション Font Book では、フォント内レパートリー一覧を表示することができますが、フォントはインストールする必要があります。


Symbol Imagine は、インストールしていないフォントファイルを指定してプレビューすることが出来ます。特定のプログラムからしか使わないフォントファイルを自分のコンピュータにインストールする必要はありません。
様々なアイコンフォントを見比べて、どのアイコンを使うか吟味することが出来ます。

ライセンスにはご注意

それぞれのフォントにはライセンスが存在します。
Symbol Imagine の出力結果を実際の配布物に含める際には、使用するフォントのライセンスに従ってご利用ください。

フリー / オープンソースで配布されているフォントには OFL や MIT が多くあるので、それらであれば問題ないと思います。



ダウンロードはこちらから。