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

Electronさわってみました :tada:

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/45314/285bbcb7-e315-12ff-9326-af8a778369ce.png)

github: [svg2webfont](https://github.com/tokimari/svg2webfont) に置いてます。



ツールとしては、ブラウザ上で使える[IcoMoon](https://icomoon.io/) や [fontello](http://fontello.com/) に近いものです。

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

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

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

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


## 使い方

### 1. install

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

```bash:versions
$ node -v
v4.2.3

$ npm -v
3.5.3
```

#### Electronのinstallについて

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

また、[svg2webfont](https://github.com/tokimari/svg2webfont)を使う場合は、package.jsonに追加しているため、globalにinstallする必要はありませんでした:bow:

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

```bash
$ npm i -g electron
```
でokです。

#### 必要なパッケージのinstall

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

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

### 2. buildとパッケージング

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

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

**起動できたらこんな感じ :tada:**
![image](https://qiita-image-store.s3.amazonaws.com/0/45314/df85fec2-367b-b4f2-c5d9-42c5ee9036fa.png)

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

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

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

```bash: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ディレクトリに、アプリの入ったフォルダができる（はず）。
![image](https://qiita-image-store.s3.amazonaws.com/0/45314/65c76550-27ca-4eb5-3353-f07abc374266.png)

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


### 3. SVGからwebfontに変換する

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

![image1.gif](https://qiita-image-store.s3.amazonaws.com/0/45314/c655414f-a4df-3d98-0808-38b04db431f6.gif)

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

![image2.gif](https://qiita-image-store.s3.amazonaws.com/0/45314/5e7f4bd0-af7b-a78d-33a1-e4514f92568f.gif)  
4. DownloadボタンでアイコンとサンプルリソースをDL


**:cat2: オプション**

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

**:dog2: DLされるもの**

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

### :warning: 注意

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

* 各SVGファイルは、一辺500px以上のサイズで作成する（詳しくは[こちら](https://github.com/nfroidure/gulp-iconfont#preparing-svgs)）
* ファイル名の形式は ```u{unicode}-{iconName}.svg```
    * 例: ```uF000-home.svg```, ```uF001-arrow.svg```
    * この形式に沿うことで、unicodeとフォント名をひも付けています。
    * unicodeは[wiki](https://ja.wikipedia.org/wiki/Unicode%E4%B8%80%E8%A6%A7_F000-FFFF)によると、F000-FFFFが私用領域なので、アイコンには丁度良いのではという感じ


## おわりに

感想です

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

つくるのたのしい :tada: 

---

## 追記

ちょっとフォントの話。
![image](https://qiita-image-store.s3.amazonaws.com/0/45314/32b7abc9-e9f4-4b88-2483-b13caa96fd93.png)

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

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

という経緯で、[この記事](https://html5experts.jp/takazudo/13339/)のサンプルの文字列（ ```xAhy鈴``` ）が特徴的だったので真似しました :cat2:

**参考:**

* [理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）](https://html5experts.jp/takazudo/13339/)
* [Glossary](http://fmstudio.jpn.org/font/glossary)