iOSでアプリケーションアイコンの作成とプロジェクトへの適用

2017/01/16現在 ストアに公開しようと思ったらアイコンを17+1個 作成する必要があります。
はっきりってめんどくさすぎるので対応方法を考えます。





iOSアプリへ自前のアイコンを適用する


Assets.xcassets → AppIcon
から対応しているサイズの画像ファイルを17回ドラッグ&ドロップすることによってアイコンを適用することができます。
......めんどくさい

Assets.xcassets → AppIcon




iOSアプリのアイコンの構成を確認してみる


Assets.xcassets 以下を確認して見ます。
直下に AppIcon.appiconsetディレクトリがありさらにその下がアイコン画像ファイル群とContents.jsonで構成されています。
Contents.json はサイズ、iPhoneかiPadか、スケールによって分けられているようです(サイズだけじゃダメ?被ってるのあるし)
画像を生成してContents.json を加工すればどうにかできそうです。




必要なアイコンを半自動生成してみる



事前に 1024*1024 のアイコン画像(icon.png)を用意しておきます(申請用に必要になります)
透過画像にせず背景は塗りつぶすようにします。(角丸で切り取られます)



以下のようなスクリプトファイルを用意します(実行権限を付与すること)
createIcon.command

cd `dirname $0`
echo "iOS用のアイコンを作成します。当該ディレクトリに変換する画像icon.pngを配置します"
sips -Z 120 icon.png --out Icon-60@2x.png
sips -Z 180 icon.png --out Icon-60@3x.png
sips -Z 76 icon.png --out Icon-76@.png
sips -Z 152 icon.png --out Icon-76@2x.png
sips -Z 167 icon.png --out Icon-83.5@2x.png
sips -Z 29 icon.png --out Icon-29@.png
sips -Z 58 icon.png --out Icon-29@2x.png
sips -Z 87 icon.png --out Icon-29@3x.png
sips -Z 40 icon.png --out Icon-Small-40@.png
sips -Z 80 icon.png --out Icon-Small-40@2x.png
sips -Z 120 icon.png --out Icon-Small-40@3x.png
sips -Z 40 icon.png --out iPhone-20@2x.png
sips -Z 60 icon.png --out iPhone-20@3x.png
sips -Z 20 icon.png --out iPad-20@1x.png
sips -Z 40 icon.png --out iPad-20@2x.png
sips はMac固有の画像処理のコマンドです。



Contents.jsonを以下のように書き換えます。

{
  "images" : [
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "iPhone-20@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "iPhone-20@3x.png",
      "scale" : "3x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "Icon-29@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "Icon-29@3x.png",
      "scale" : "3x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "Icon-Small-40@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "Icon-Small-40@3x.png",
      "scale" : "3x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "Icon-60@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "Icon-60@3x.png",
      "scale" : "3x"
    },
    {
      "size" : "20x20",
      "idiom" : "ipad",
      "filename" : "iPad-20@1x.png",
      "scale" : "1x"
    },
    {
      "size" : "20x20",
      "idiom" : "ipad",
      "filename" : "iPad-20@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "Icon-29@.png",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "Icon-29@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "Icon-Small-40@.png",
      "scale" : "1x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "Icon-Small-40@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "Icon-76@.png",
      "scale" : "1x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "Icon-76@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "83.5x83.5",
      "idiom" : "ipad",
      "filename" : "Icon-83.5@2x.png",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}


サイズ被りは同じファイルを指定するように変更してもいいかも。
Contents.jsonのfilenameはプロジェクト作成時は存在せず、ドラッグ&ドロップした時に追記されます。
追記済みのContents.jsonで置き換えて対応する画像を配置すればやりたいことが実現できるという寸法です。



ディレクトリ構成は以下のようになります。

AppIcon.appiconset


Xcodeから
Assets.xcassets → AppIcon
を確認してみるとアイコン画像で全て埋まっているはずです。



新しい機種が出たらContents.jsonも適宜変更する必要があるはず。
json を解析してそれっぽい画像を用意してContents.jsonへfileNameを追記するようなツールを誰か作ってください。


2017年1月16日月曜日

0 件のコメント:

コメントを投稿