Gulp をつかって .sketch から .icns を生成するために、gulp-sketch の出力結果を.icns へ変換する gulp-iconutil というプラグインを作りました。

はじめに

.icns を作るには様々なサイズのアイコン画像を格納した iconset をつくり、それを iconutil に渡します。ここで面倒なのは iconset です。

iconset の作成には 16×16 ... 512×512 の 6 種類のサイズのアイコンと、さらにそれぞれの Retina 用のアイコンも加えて、計 12 種類ものサイズの画像が必要です。

唯一の救いは、最大サイズの画像だけ用意しておけば、不足している小さいサイズの画像はiconutilが自動で生成するということでしょう。

今回作った gulp-iconutil は、Gulp からこのiconutilコマンドへの橋渡しをしてくれます。

アイコンをデザインする

Sketch 上に 512×512 サイズのアートボードを作成し、アプリのアイコンをデザインします。

Dock 上でアイコンの見栄えをチェックするために、sketch-dockpreviewを使っています。これは本当に便利なプラグインです。

.sketch から .icns へ

.sketch から iconset を作成するために、gulp-sketch を、そして iconset から .icns へ変換するために今回作った gulp-iconutil を使います。npm からインストール出来ます。

Gulp タスクは以下のように書きます。

gulp     = require 'gulp'
sketch   = require 'gulp-sketch'
iconutil = require 'gulp-iconutil'

gulp.task 'icons', ->
  gulp.src 'icons/sketch/*.sketch'
    .pipe sketch
      export: 'artboards'
      formats: 'png'
      scales: '1.0,2.0'
    .pipe iconutil('app.icns')
    .pipe gulp.dest 'icons/'

icons タスクを実行すると、icons フォルダの中にapp.icnsが生成されます。

Electron アプリ開発者はこのアイコンファイルを OS X 向けビルドにそのまま使えます。

まとめ

デザインデータのポストプロセスの自動化が Gulp と sketchtool のおかげでやりやすくなりました。

gulp-iconutil は今週リリースしたばかりで若干不安定なので、もしバグを見つけたらIssueを作るか、PRを投げてください!