※ 175%, 260%, 275%, 280% スケーリングは MakeAppX が受け付けないようです。
WinRT apps であまりに多いスケーリングに対応するために作りました。
WinRT apps は
- UWP: (80%), 100%, 125%, (140%), 150%, 160%,
175%, (180%), 200%, (220%), (240%), 225%, 250%,275%, 300%, 400% - Windows ストア アプリ: (80%), 100%, 140%, 180%
- Windows Phone ストア アプリ: 100%, 120%, 140%, 160%, 180%, 200%, 220%, 240%
に対応する必要があるので、これらに対応した画像リソースを作らねばなりません。しかし、ハイコントラスト対応含め、このスケーリング画像を生成するとなると組み合わせがやばいぐらい… そこで Inkscape と PowerShell を使って自動で生成するやつを作ります。
$inkscape = "C:\Program Files\Inkscape\inkscape.com" $items = (Get-Content settings.json -Encoding UTF8 | ConvertFrom-Json) foreach ($item in $items) { for ($i = 0; $i -lt $item.size.length; ++$i) { $option = "-z" $width = "-w" + $item.size[$i][1] $export = "--export-png=" + ($item.output_filename -F $item.size[$i][0], $item.size[$i][1]) & $inkscape $item.input_filename $option $width $export } }
設定は json から
[ { "input_filename": "SmallLogo.svg", "output_filename": "../Tile70x70.scale-{0}.png", "size": [ [80, 56], [100, 70], [140, 98], [180, 126] ] }, { "input_filename": "SmallLogo.svg", "output_filename": "../Tile70x70.scale-{0}_contrast-black.png", "size": [ [80, 56], [100, 70], [140, 98], [180, 126] ] }, { "input_filename": "SmallLogo_contrast-white.svg", "output_filename": "../Tile70x70.scale-{0}_contrast-white.png", "size": [ [80, 56], [100, 70], [140, 98], [180, 126] ] }, { "input_filename": "SmallLogo.svg", "output_filename": "../Tile71x71.scale-{0}.png", "size": [ [80, 57], [100, 71], [125, 89], [140, 99], [150, 107], [160, 114], [175, 124], [180, 128], [200, 142], [220, 156], [225, 160], [240, 170], [250, 178], [260, 185], [280, 199], [300, 213], [400, 284] ] }, { "input_filename": "SmallLogo.svg", "output_filename": "../Tile71x71.scale-{0}_contrast-black.png", "size": [ [80, 57], [100, 71], [125, 89], [140, 99], [150, 107], [160, 114], [175, 124], [180, 128], [200, 142], [220, 156], [225, 160], [240, 170], [250, 178], [260, 185], [280, 199], [300, 213], [400, 284] ] }, { "input_filename": "SmallLogo_contrast-white.svg", "output_filename": "../Tile71x71.scale-{0}_contrast-white.png", "size": [ [80, 57], [100, 71], [125, 89], [140, 99], [150, 107], [160, 114], [175, 124], [180, 128], [200, 142], [220, 156], [225, 160], [240, 170], [250, 178], [260, 185], [280, 199], [300, 213], [400, 284] ] }, { "input_filename": "SquareLogo.svg", "output_filename": "../Tile150x150.scale-{0}.png", "size": [ [80, 120], [100, 150], [125, 188], [140, 210], [150, 225], [160, 240], [175, 263], [180, 270], [200, 300], [220, 330], [225, 338], [240, 360], [250, 375], [260, 490], [280, 420], [300, 450], [400, 600] ] }, { "input_filename": "SquareLogo.svg", "output_filename": "../Tile150x150.scale-{0}_contrast-black.png", "size": [ [80, 120], [100, 150], [125, 188], [140, 210], [150, 225], [160, 240], [175, 263], [180, 270], [200, 300], [220, 330], [225, 338], [240, 360], [250, 375], [260, 490], [280, 420], [300, 450], [400, 600] ] }, { "input_filename": "SquareLogo_contrast-white.svg", "output_filename": "../Tile150x150.scale-{0}_contrast-white.png", "size": [ [80, 120], [100, 150], [125, 188], [140, 210], [150, 225], [160, 240], [175, 263], [180, 270], [200, 300], [220, 330], [225, 338], [240, 360], [250, 375], [260, 490], [280, 420], [300, 450], [400, 600] ] }, { "input_filename": "WideLogo.svg", "output_filename": "../Tile310x150.scale-{0}.png", "size": [ [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543], [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806], [280, 868], [300, 930], [400, 1240] ] }, { "input_filename": "WideLogo.svg", "output_filename": "../Tile310x150.scale-{0}_contrast-black.png", "size": [ [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543], [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806], [280, 868], [300, 930], [400, 1240] ] }, { "input_filename": "WideLogo_contrast-white.svg", "output_filename": "../Tile310x150.scale-{0}_contrast-white.png", "size": [ [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543], [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806], [280, 868], [300, 930], [400, 1240] ] }, { "input_filename": "SquareLogo.svg", "output_filename": "../Tile310x310.scale-{0}.png", "size": [ [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543], [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806], [280, 868], [300, 930], [400, 1240] ] }, { "input_filename": "SquareLogo.svg", "output_filename": "../Tile310x310.scale-{0}_contrast-black.png", "size": [ [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543], [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806], [280, 868], [300, 930], [400, 1240] ] }, { "input_filename": "SquareLogo_contrast-white.svg", "output_filename": "../Tile310x310.scale-{0}_contrast-white.png", "size": [ [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543], [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806], [280, 868], [300, 930], [400, 1240] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList30x30.scale-{0}.png", "size": [ [80, 24], [100, 30], [140, 42], [180, 54] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList30x30.targetsize-{0}.png", "size": [ [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42], [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108], [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384], [448, 448], [512, 512], [576, 576], [640, 640] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList30x30.scale-{0}_contrast-black.png", "size": [ [80, 24], [100, 30], [140, 42], [180, 54] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList30x30.targetsize-{0}_contrast-black.png", "size": [ [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42], [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108], [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384], [448, 448], [512, 512], [576, 576], [640, 640] ] }, { "input_filename": "AppList_contrast-white.svg", "output_filename": "../AppList30x30.scale-{0}_contrast-white.png", "size": [ [80, 24], [100, 30], [140, 42], [180, 54] ] }, { "input_filename": "AppList_contrast-white.svg", "output_filename": "../AppList30x30.targetsize-{0}_contrast-white.png", "size": [ [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42], [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108], [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384], [448, 448], [512, 512], [576, 576], [640, 640] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList44x44.scale-{0}.png", "size": [ [80, 35], [100, 44], [125, 55], [140, 62], [150, 66], [160, 70], [175, 77], [180, 79], [200, 88], [220, 97], [225, 99], [240, 106], [250, 110], [260, 114], [280, 123], [300, 264], [400, 176] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList44x44.targetsize-{0}.png", "size": [ [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42], [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108], [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384], [448, 448], [512, 512], [576, 576], [640, 640] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList44x44.scale-{0}_contrast-black.png", "size": [ [80, 35], [100, 44], [125, 55], [140, 62], [150, 66], [160, 70], [175, 77], [180, 79], [200, 88], [220, 97], [225, 99], [240, 106], [250, 110], [260, 114], [280, 123], [300, 264], [400, 176] ] }, { "input_filename": "AppList.svg", "output_filename": "../AppList44x44.targetsize-{0}_contrast-black.png", "size": [ [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42], [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108], [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384], [448, 448], [512, 512], [576, 576], [640, 640] ] }, { "input_filename": "AppList_contrast-white.svg", "output_filename": "../AppList44x44.scale-{0}_contrast-white.png", "size": [ [80, 35], [100, 44], [125, 55], [140, 62], [150, 66], [160, 70], [175, 77], [180, 79], [200, 88], [220, 97], [225, 99], [240, 106], [250, 110], [260, 114], [280, 123], [300, 264], [400, 176] ] }, { "input_filename": "AppList_contrast-white.svg", "output_filename": "../AppList44x44.targetsize-{0}_contrast-white.png", "size": [ [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42], [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108], [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384], [448, 448], [512, 512], [576, 576], [640, 640] ] }, { "input_filename": "AppList.svg", "output_filename": "../StoreLogo.scale-{0}.png", "size": [ [100, 50], [125, 63], [140, 70], [150, 75], [160, 80], [175, 88], [180, 90], [200, 100], [220, 110], [225, 113], [240, 120], [250, 125], [260, 130], [280, 140], [300, 150], [400, 200] ] }, { "input_filename": "AppList.svg", "output_filename": "../StoreLogo.scale-{0}_contrast-black.png", "size": [ [100, 50], [125, 63], [140, 70], [150, 75], [160, 80], [175, 88], [180, 90], [200, 100], [220, 110], [225, 113], [240, 120], [250, 125], [260, 130], [280, 140], [300, 150], [400, 200] ] }, { "input_filename": "AppList_contrast-white.svg", "output_filename": "../StoreLogo.scale-{0}_contrast-white.png", "size": [ [100, 50], [125, 63], [140, 70], [150, 75], [160, 80], [175, 88], [180, 90], [200, 100], [220, 110], [225, 113], [240, 120], [250, 125], [260, 130], [280, 140], [300, 150], [400, 200] ] }, { "input_filename": "AppList.svg", "output_filename": "../BadgeLogo.scale-{0}.png", "size": [ [100, 24], [125, 30], [140, 33], [150, 36], [160, 38], [175, 42], [180, 43], [200, 48], [220, 53], [225, 54], [240, 58], [250, 60], [260, 62], [280, 67], [300, 72], [400, 96] ] }, { "input_filename": "AppList.svg", "output_filename": "../BadgeLogo.scale-{0}_contrast-black.png", "size": [ [100, 24], [125, 30], [140, 33], [150, 36], [160, 38], [175, 42], [180, 43], [200, 48], [220, 53], [225, 54], [240, 58], [250, 60], [260, 62], [280, 67], [300, 72], [400, 96] ] }, { "input_filename": "AppList_contrast-white.svg", "output_filename": "../BadgeLogo.scale-{0}_contrast-white.png", "size": [ [100, 24], [125, 30], [140, 33], [150, 36], [160, 38], [175, 42], [180, 43], [200, 48], [220, 53], [225, 54], [240, 58], [250, 60], [260, 62], [280, 67], [300, 72], [400, 96] ] }, { "input_filename": "WideLogo.svg", "output_filename": "../SplashScreen.scale-{0}.png", "size": [ [100, 620], [125, 775], [140, 868], [150, 930], [160, 992], [175, 1085], [180, 1116], [200, 1240], [220, 1364], [225, 1395], [240, 1488], [250, 1550], [260, 1612], [280, 1736], [300, 1860], [400, 2480] ] }, { "input_filename": "WideLogo.svg", "output_filename": "../SplashScreen.scale-{0}_contrast-black.png", "size": [ [100, 620], [125, 775], [140, 868], [150, 930], [160, 992], [175, 1085], [180, 1116], [200, 1240], [220, 1364], [225, 1395], [240, 1488], [250, 1550], [260, 1612], [280, 1736], [300, 1860], [400, 2480] ] }, { "input_filename": "WideLogo_contrast-white.svg", "output_filename": "../SplashScreen.scale-{0}_contrast-white.png", "size": [ [100, 620], [125, 775], [140, 868], [150, 930], [160, 992], [175, 1085], [180, 1116], [200, 1240], [220, 1364], [225, 1395], [240, 1488], [250, 1550], [260, 1612], [280, 1736], [300, 1860], [400, 2480] ] }, { "input_filename": "SplashScreenPhone.svg", "output_filename": "../SplashScreenPhone.scale-{0}.png", "size": [ [100, 480], [140, 672], [160, 768], [180, 864], [200, 960], [220, 1056], [240, 1152] ] }, { "input_filename": "SplashScreenPhone.svg", "output_filename": "../SplashScreenPhone.scale-{0}_contrast-black.png", "size": [ [100, 480], [140, 672], [160, 768], [180, 864], [200, 960], [220, 1056], [240, 1152] ] }, { "input_filename": "SplashScreenPhone_contrast-white.svg", "output_filename": "../SplashScreenPhone.scale-{0}_contrast-white.png", "size": [ [100, 480], [140, 672], [160, 768], [180, 864], [200, 960], [220, 1056], [240, 1152] ] } ]
出力ファイル名には C# の string.Format のようなことができるようになっています。
推奨以外のサイズもあるのでかなり多いです。むしろ推奨だけじゃ足りてないので、これぐらいは最低必要だと思います。特に開発ドキュメントに書いてあるのは PC の 175% は無視されているので、あったほうがいい気がします。
以上です。
追記:
詳細仕様です。
- Small なタイル: 71x71 (Windows 8.1 は 70x70)
- Medium なタイル: 150x150
- Wide なタイル: 310x150
- Large なタイル: 310x310 (UWP でも PC only)
- List アイコン: 44x44 (Windows 8.1 は 30x30)
- Store アイコン: 50x50
- Badge アイコン: 24x24
- Splash スクリーン: 620x300 (Windows Phone 8.1 は 480x800)
基本的に Windows Phone 由来のサイズが多い。ただし、スプラッシュスクリーンのみ、Windows 8.1 から輸入されている。
また、上にあるように List, Small, Square, Wide という 4 種類のアイコンが必要でそれぞれ、
- List: 一辺 75% で描画。(短辺は 75% 以下でもよい)
- Small: 一辺 50% で描画。ただし、長方形の場合、長辺が 66%。
- Square: 一辺 33% で描画。ただし、横長の長方形の場合、長辺が 66%、縦長の長方形の場合、長辺が 50%。
- Wide: 横の辺が 16%、縦の辺が 33%。ただし、横長の長方形の場合、長辺が 66%、縦長の長方形の場合、長辺が 50%。
となる。ただし、ブランドロゴ (いわゆる淡色のシンプルなアイコンでなくそれで製品を表すようなやつ) の場合、
- List: 12.5% の Margin
- その他: 16% の Margin
を設けて配置する。
詳細は
https://msdn.microsoft.com/en-us/library/windows/apps/mt412102.aspx
を参照のこと。