※ 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
を参照のこと。
