1. Qiita
  2. Items
  3. Electron

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

  • 42
    Like
  • 2
    Comment

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

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

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

image

github: svg2webfont に置いてます。

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

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

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

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

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

使い方

1. install

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

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する必要はありませんでした:bow:

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起動

起動できたらこんな感じ :tada:
image

ただ、このままだと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ディレクトリに、アプリの入ったフォルダができる(はず)。
image

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

3. SVGからwebfontに変換する

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

image1.gif

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

image2.gif

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

:cat2: オプション

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

:dog2: DLされるもの

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

:warning: 注意

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: デザインガイド作ってみる

つくるのたのしい :tada:


追記

ちょっとフォントの話。
image

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

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

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

参考: