--- title: Create .icns from .sketch date: 2015-03-10 09:00:00 +09:00 --- ![](/uploads/create-icns-from-sketch/intro.png) Gulp をつかって .sketch から .icns を生成するために、[gulp-sketch](https://github.com/cognitom/gulp-sketch) の出力結果を.icns へ変換する [gulp-iconutil](https://github.com/uetchy/gulp-iconutil) というプラグインを作りました。 # はじめに .icns を作るには様々なサイズのアイコン画像を格納した **iconset** をつくり、それを `iconutil` に渡します。ここで面倒なのは iconset です。 iconset の作成には 16×16 ... 512×512 の 6 種類のサイズのアイコンと、さらにそれぞれの Retina 用のアイコンも加えて、計 12 種類ものサイズの画像が必要です。 唯一の救いは、最大サイズの画像だけ用意しておけば、不足している小さいサイズの画像は`iconutil`が自動で生成するということでしょう。 今回作った [gulp-iconutil](https://www.npmjs.com/package/gulp-iconutil) は、Gulp からこの`iconutil`コマンドへの橋渡しをしてくれます。 # アイコンをデザインする Sketch 上に 512×512 サイズのアートボードを作成し、アプリのアイコンをデザインします。 ![](/uploads/create-icns-from-sketch/dock.png) > Dock 上でアイコンの見栄えをチェックするために、[sketch-dockpreview](https://github.com/fnky/sketch-dockpreview)を使っています。これは本当に便利なプラグインです。 # .sketch から .icns へ .sketch から iconset を作成するために、[gulp-sketch](https://github.com/cognitom/gulp-sketch) を、そして iconset から .icns へ変換するために今回作った [gulp-iconutil](https://www.npmjs.com/package/gulp-iconutil) を使います。npm からインストール出来ます。 Gulp タスクは以下のように書きます。 ```coffee 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**が生成されます。 ![](/uploads/create-icns-from-sketch/result.png) Electron アプリ開発者はこのアイコンファイルを OS X 向けビルドにそのまま使えます。 # まとめ デザインデータのポストプロセスの自動化が Gulp と sketchtool のおかげでやりやすくなりました。 [gulp-iconutil](https://github.com/uetchy/gulp-iconutil) は今週リリースしたばかりで若干不安定なので、もしバグを見つけたら[Issue](https://github.com/uetchy/gulp-iconutil/issues)を作るか、[PR](https://github.com/uetchy/gulp-iconutil/pulls)を投げてください!