Electronでwebfont変換ツールを作ってみた話 #Design

Electronさわってみました

アイコンフォントを作り直す案件があり、位置調整やサイズ感の確認のたびにコマンド叩くのも、（リモートの）デザイナーさんとやりとりするのも大変だなということで、デザイナーさん向けの検証用のツールを作りました。

ゴール: GUIでSVGからwebfontに変換できるようにする

github: svg2webfont に置いてます。

ツールとしては、ブラウザ上で使えるIcoMoon や fontello に近いものです。

もちろんこれで不便なければこちらを使えば良いのですが、

unicodeとアイコン名が対応しているjsonファイルが欲しい
web上のサービスに依存するのが怖い（手元でやりたい）
一度作ってしまえばどのプロジェクトでも使いまわせそう
Electronで何か作ってみたかった（重要）

ということで、お試しでつくってみました。

Electronを使う利点は、内部でnodeを実行できるので、フロントエンドの業務の知識だけで色々できてしまえるお手軽さ。
ということで、webfontの生成には、ちょっとズルして gulp-iconfont を使っています。

使い方

1. install

とりあえず私の環境はこれ。（足りなかったら追記します）

versions

$ node -v
v4.2.3

$ npm -v
3.5.3

Electronのinstallについて

~~まずはElectronのinstall。 electron-prebuiltを使います。~~
[追記] electron-prebuiltからelectronに名前が変更され、prebuiltが既にdeprecatedになっているため、package.jsonを修正しました。（@warashiさんご指摘ありがとうございます。）

また、svg2webfontを使う場合は、package.jsonに追加しているため、globalにinstallする必要はありませんでした

Electronをglobalにもinstallしておきたいという場合は

$ npm i -g electron

でokです。

必要なパッケージのinstall

svg2webfontsリポジトリをcloneしてきて、必要なパッケージをinstallします。（Electronも入ります）

$ git@github.com:tokimari/svg2webfont.git
$ npm i

2. buildとパッケージング

リソースをbuildしてElectronを起動します。

$ gulp build   # アプリのresource
$ npm run build  # Electron起動

起動できたらこんな感じ

ただ、このままだとElectronを使える人でないと使えません。

パッケージングすると、Electronやらnodeやらを気にすることなく、いろんな人が使えるようになります。
パッケージングにはelectron-packagerを使うととても簡単でした。

デザイナーさんにはパッケージ化したものを渡して、使ってもらいました。

package_app

$ npm run package

> svg2webfonts@1.0.0 package /hoge/svg2webfont
> gulp clean && gulp build && electron-packager . svg2webfonts --platform=darwin --arch=x64 --overwrite

# 略。buildし直してからパッケージ化しています

Packaging app for platform darwin x64 using electron v1.3.3
Wrote new app to /hoge/svg2webfont/svg2webfonts-darwin-x64

リポジトリのrootディレクトリに、アプリの入ったフォルダができる（はず）。

このsvg2webfontsというファイルを渡せばok。

3. SVGからwebfontに変換する

SVGアイコンをアップロード
Convertボタンでアイコンを変換

3. BuildボタンでサンプルのHTML, CSSファイルを生成

4. DownloadボタンでアイコンとサンプルリソースをDL

オプション

フォント名（font family）
フォント形式（eot, ttf, woff, woff2, svg）
サンプルテキスト文
サンプルフォントサイズ

DLされるもの

各種フォント
フォントデータをdumpしたjson
サンプルHTML,CSS

注意

SVGファイルについて、一部制限があります。

各SVGファイルは、一辺500px以上のサイズで作成する（詳しくはこちら）
ファイル名の形式は u{unicode}-{iconName}.svg
- 例: uF000-home.svg, uF001-arrow.svg
- この形式に沿うことで、unicodeとフォント名をひも付けています。
- unicodeはwikiによると、F000-FFFFが私用領域なので、アイコンには丁度良いのではという感じ

おわりに

感想です

Electronすごい
- gulpも実行できるとか、なんでもあり感すごい
- ブラウザで動くものしか作ったことなかったから新鮮
- 各種ブラウザ対応しなくていいとか神？
- Electronらしいことはあんまりやっていないので、またいじってみたい
Riotたのしい
- シンプルなのでとっつきやすい
- いまいちcomponentをうまく使えてない気がする
- scoped cssは私には難しかった
- component毎に影響範囲を抑えられる代わりに、comonent間でのデザイン（実装含む）の統一が難しそう。作りを工夫してカバーなのかな
Fluxむずいけど流れは分かりやすい
jsのbuildまわりを作るのに時間かかった（妥協した。。手直ししたい。。。）
FLOCSSわかりやすい
formを作ると途端にUIが複雑になる
TODO: デザインガイド作ってみる

つくるのたのしい

追記

ちょっとフォントの話。

サンプルテキストの初期値が xAhyq鈴 の理由:

アイコンとテキストを並べて上下中央になるようなアイコンとbaselineを考えたい
アルファベットと日本語だと、baselineも上端・下端も異なる
- x に合わせると小さい＋下すぎる
- 鈴 に合わせると英字とズレる
日本のサービスの場合、どちらも考慮しておかないと、意図せずズレる（少なくとも把握して対応したい）

という経緯で、この記事のサンプルの文字列（ xAhy鈴 ）が特徴的だったので真似しました

参考: