Node.jsでiOSのアプリに必要なアイコン画像をまとめて生成する

前置き

今朝、Node.jsで複数の画像ファイルをリサイズする方法を書いた時に

高解像度の画像データをベースにしてiPhone用のアイコンをまとめて出力する処理が今欲しい処理だったりします

と書きましたが、その後にiOSのアプリに必要なアイコンをコマンドラインで一発で生成する方法を見てたら割りと簡単に出来そうな気がしたので作りました。

想定してる読者イメージ

Node.jsを普段から使ってる人ではなく、Titanium で開発しててiOSのアプリに必要なアイコン画像をまとめて生成するのが面倒だなぁと思ってる人を割りとイメージしてます。

Titaniumで開発されてる方だと、最近は必然的にNode.js環境整えてるはずなので、その環境をうまく活用するとこういう面倒なこともサクッと処理できるようになって、本来の開発により専念できるんじゃないかと思います

自分の環境

• OS X
  • 10.9.5
• Node.js
  • v0.10.13
• npm
  • 1.3.2

利用するための準備

以下簡単に準備をまとめます

プロジェクト用のフォルダを作る

現在ホームディレクトリにいるとして、ターミナル上で

mkdir iconexporter
cd iconexporter

という感じでプロジェクト用のフォルダを作っておきます

※ちょっとした注意点

GoogleグループのError: Invalid nameという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 経由でインストール出来る環境作ってるので

brew install imagemagick

として、少し時間かかりますが、インストール出来ます。

easyimageのインストール

npm init
npm install easyimage --save-dev

という感じでインストールしました。

画像が置いてあるディレクトリと出力先のディレクトリを準備

画像置いてる場所と別の場所にリサイズしたファイルを置きたかったので「img」[out」というディレクトリを作り、imgに変換元画像を置いたので、こんな感じになりました。

├── img
│   └── sample.png
├── index.js
├── node_modules
│   └── easyimage
├── out
└── package.json

ソースコード

index.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": "[e-mail]",
        "Titanium folder location": "Resources or Resources/iphone"
    },
    {
        "iOS Device": "iPhone 6 Plus",
        "Purpose": "App Icon",
        "Dimensions": "180",
        "DPI": "72",
        "Filename": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "Titanium folder location": "Resources or Resources/iphone"
    },
    {
        "iOS Device": "iPhone 6 Plus",
        "Purpose": "Settings",
        "Dimensions": "87",
        "DPI": "72",
        "Filename": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "Titanium folder location": "Resources or Resources/iphone"
    },
    {
        "iOS Device": "iPad Retina (iOS 6 and prior)",
        "Purpose": "Settings",
        "Dimensions": "58",
        "DPI": "72",
        "Filename": "[e-mail]",
        "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にある一覧情報をベースにして作ってます。

実行する

ターミナル上で

node ./index.js

とします。マシンスペック次第ですがすぐに終わってしまうと思いますがoutフォルダにはこんな感じで意図通りのものができてるはずです

.
├── img
│   └── sample.png
├── index.js
├── node_modules
│   └── easyimage
├── out
│   ├── [e-mail]
│   ├── [e-mail]
│   ├── appicon-72.png
│   ├── [e-mail]
│   ├── appicon-76.png
│   ├── [e-mail]
│   ├── appicon-Small-40.png
│   ├── [e-mail]
│   ├── appicon-Small-50.png
│   ├── [e-mail]
│   ├── appicon-Small.png
│   ├── [e-mail]
│   ├── [e-mail]
│   ├── appicon.png
│   └── [e-mail]
└── package.json