.sketchをOS Xアプリのアイコン(.icns)に変換するGulpプラグインをつくった

はじめに

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

一般的に、.icns を作るには、様々なサイズのアイコン画像を格納した iconset をつくり、それを iconutil に渡せばいい。ここで面倒なのは iconset だ。作成には16x16, 32x32, 64x64, 128x128, 256x256, 512x512の6種類のサイズのアイコンと、さらにそれぞれのRetina用のアイコンも加えて、計12種類ものサイズの画像が必要である。唯一の救いは、最大サイズの画像だけ用意しておけば、不足している小さいサイズの画像はiconutilが自動で生成するということだ。

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

アイコンをデザインする

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

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が生成される。

あとはこのアイコンファイルをOS X向けビルドにそのまま使える。

まとめ

デザインデータのポストプロセスの自動化がGulpとsketchtoolのおかげでやりやすくなった。良い時代だ。

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