1. h5y1m141@github

    No comment

    h5y1m141@github
Changes in body
Source | HTML | Preview
@@ -1,212 +1,302 @@
## 前置き
今朝、[Node.jsで複数の画像ファイルをリサイズする方法](http://qiita.com/h5y1m141@github/items/94eb7c05563c96ec79dc)を書いた時に
> 高解像度の画像データをベースにしてiPhone用のアイコンをまとめて出力する処理が今欲しい処理だったりします
と書きましたが、その後に[iOSのアプリに必要なアイコンをコマンドラインで一発で生成する方法](http://qiita.com/gm_kou/items/967ea850859eda3748c0)を見てたら割りと簡単に出来そうな気がしたので作りました。
## 想定してる読者イメージ
Node.jsを普段から使ってる人ではなく、Titanium で開発しててiOSのアプリに必要なアイコン画像をまとめて生成するのが面倒だなぁと思ってる人を割りとイメージしてます。
Titaniumで開発されてる方だと、最近は必然的にNode.js環境整えてるはずなので、その環境をうまく活用するとこういう面倒なこともサクッと処理できるようになって、本来の開発により専念できるんじゃないかと思います
## 自分の環境
- OS X
- 10.9.5
- Node.js
- v0.10.13
+- npm
+ - 1.3.2
## 利用するための準備
-[Node.jsで複数の画像ファイルをリサイズする方法](http://qiita.com/h5y1m141@github/items/94eb7c05563c96ec79dc)を書いた時にを参考にしてください。
+以下簡単に準備をまとめます
-## 生成するアイコン画像の解像度とファイル名について
+### プロジェクト用のフォルダを作る
+
+現在ホームディレクトリにいるとして、ターミナル上で
+
+```shell-session
+mkdir iconexporter
+cd iconexporter
+```
+
+という感じでプロジェクト用のフォルダを作っておきます
+
+※ちょっとした注意点
+
+Googleグループの[Error: Invalid name](https://groups.google.com/forum/#!msg/npm-/LXXgFyLZBPQ/EYT80KzYo90J)という2013年7月の情報ですが
+
+> Names must be all lowercase as of npm 1.3. This has been the rule for NEW packages for well over a year now
+
+とあり、フォルダ名を必ず全部小文字にしないとハマります。(私、これで30分位無駄に時間使ったかも・・・)
+
+### ImageMagickインストール(インストールしてある方は読み飛ばしてください)
+
+ドキュメントにも書いてありますが、このたぐいの画像処理なモジュールはImageMagickを利用して処理するようで、まずそれがインストールされてるのが前提とのこと。以前自分は別の処理するのにこれインストール済でしたが、Mac使っててbrew 経由でインストール出来る環境作ってるので
+
+```sh
+brew install imagemagick
+```
+
+として、少し時間かかりますが、インストール出来ます。
+
+### easyimageのインストール
+
+```sh
+npm init
+npm install easyimage --save-dev
+```
+という感じでインストールしました。
+
+### 画像が置いてあるディレクトリと出力先のディレクトリを準備
+
+画像置いてる場所と別の場所にリサイズしたファイルを置きたかったので「img」[out」というディレクトリを作り、imgに変換元画像を置いたので、こんな感じになりました。
+
+```shell-session
+├── img
+│   └── sample.png
+├── index.js
+├── node_modules
+│   └── easyimage
+├── out
+└── package.json
+```
-Titaniumでアプリを作っててiOSのアプリに必要なアイコン画像がまとめてほしくなったというすごく個人的な事情もあって、生成するアイコン画像の解像度とファイル名についてはTitaniumの公式サイトの[Icons and Splash Screens](http://docs.appcelerator.com/titanium/3.0/#!/guide/Icons_and_Splash_Screens)にある一覧情報をベースにして作ってます。
## ソースコード
+### index.jsの中身
```js
var easyimg = require('easyimage'),
fs = require('fs'),path = require('path'),
imgPath = path.resolve(__dirname, 'img'),
outPath = path.resolve(__dirname, 'out'),
iconFileNameList,target,dist;
iconFileNameList = [
{
"iOS Device": "iPhone 4/4S/5/5C/5S/6 iPod touch 5th generation",
"Purpose": "App icon",
"Dimensions": "120",
"DPI": "72",
"Filename": "appicon-60@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPhone 6 Plus",
"Purpose": "App Icon",
"Dimensions": "180",
"DPI": "72",
"Filename": "appicon-60@3x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPad non-retina",
"Purpose": "App icon",
"Dimensions": "76",
"DPI": "72",
"Filename": "appicon-76.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPad retina",
"Purpose": "App icon",
"Dimensions": "152",
"DPI": "72",
"Filename": "appicon-76@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "Universal non-retina",
"Purpose": "Spotlight",
"Dimensions": "40",
"DPI": "72",
"Filename": "appicon-Small-40.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "Universal retina",
"Purpose": "Spotlight",
"Dimensions": "80",
"DPI": "72",
"Filename": "appicon-Small-40@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "Universal non-retina",
"Purpose": "Settings",
"Dimensions": "29",
"DPI": "72",
"Filename": "appicon-Small.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "Universal retina",
"Purpose": "Settings",
"Dimensions": "58",
"DPI": "72",
"Filename": "appicon-Small@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPhone 6 Plus",
"Purpose": "Settings",
"Dimensions": "87",
"DPI": "72",
"Filename": "appicon-Small@3x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPhone/iPod non-retina",
"Purpose": "App icon",
"Dimensions": "57",
"DPI": "72",
"Filename": "appicon.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPhone/iPod retina (iOS 6 and prior)",
"Purpose": "App icon",
"Dimensions": "114",
"DPI": "72",
"Filename": "appicon@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPad 1 & 2 (iOS 6 and prior)",
"Purpose": "App icon",
"Dimensions": "72",
"DPI": "72",
"Filename": "appicon-72.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPad 3 (iOS 6 and prior)",
"Purpose": "App icon",
"Dimensions": "144",
"DPI": "72",
"Filename": "appicon-72@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPhone/iPod non-retina",
"Purpose": "Spotlight & settings",
"Dimensions": "29",
"DPI": "72",
"Filename": "appicon-Small.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPhone/iPod retina (iOS 6 and prior)",
"Purpose": "Spotlight & settings",
"Dimensions": "58",
"DPI": "72",
"Filename": "appicon-Small@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPad 1 & 2 (iOS 6 and prior)",
"Purpose": "Spotlight & settings",
"Dimensions": "50",
"DPI": "72",
"Filename": "appicon-Small-50.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPad Retina (iOS 6 and prior)",
"Purpose": "Spotlight",
"Dimensions": "100",
"DPI": "72",
"Filename": "appicon-Small-50@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
},
{
"iOS Device": "iPad Retina (iOS 6 and prior)",
"Purpose": "Settings",
"Dimensions": "58",
"DPI": "72",
"Filename": "appicon-Small@2x.png",
"Titanium folder location": "Resources or Resources/iphone"
}
];
fs.readdir(imgPath, function(err, files){
if (err) console.log(err);
files.filter(function(file){
var f, _i, _len;
for (_i = 0, _len = iconFileNameList.length; _i < _len; _i++) {
f = iconFileNameList[_i];
target = imgPath + "/" + file;
dist = outPath + "/" + f.Filename;
easyimg.resize({
src:target,
dst:dist,
width:f.Dimensions
}, function(err, image) {
if (err) throw err;
console.log('Resized ' + image.width + ' x ' + image.height);
});
}
});
});
```
+### 生成するアイコン画像の解像度とファイル名について
+
+Titaniumでアプリを作っててiOSのアプリに必要なアイコン画像がまとめてほしくなったというすごく個人的な事情もあって、生成するアイコン画像の解像度とファイル名についてはTitaniumの公式サイトの[Icons and Splash Screens](http://docs.appcelerator.com/titanium/3.0/#!/guide/Icons_and_Splash_Screens)にある一覧情報をベースにして作ってます。
+
+### 実行する
+
+ターミナル上で
+
+```shell-session
+node ./index.js
+```
+
+とします。マシンスペック次第ですがすぐに終わってしまうと思いますがoutフォルダにはこんな感じで意図通りのものができてるはずです
+
+```shell-session
+.
+├── img
+│   └── sample.png
+├── index.js
+├── node_modules
+│   └── easyimage
+├── out
+│   ├── appicon-60@2x.png
+│   ├── appicon-60@3x.png
+│   ├── appicon-72.png
+│   ├── appicon-72@2x.png
+│   ├── appicon-76.png
+│   ├── appicon-76@2x.png
+│   ├── appicon-Small-40.png
+│   ├── appicon-Small-40@2x.png
+│   ├── appicon-Small-50.png
+│   ├── appicon-Small-50@2x.png
+│   ├── appicon-Small.png
+│   ├── appicon-Small@2x.png
+│   ├── appicon-Small@3x.png
+│   ├── appicon.png
+│   └── appicon@2x.png
+└── package.json
+```