読者です 読者をやめる 読者になる 読者になる

書くことないです。

ayamadoriが独り言を呟く日記。

こんなこともやってます。(が、もはやあまりやる気は無かったりする)

【Nothing to release./携帯電話向けSoftware】

UWPアプリのタイルアイコンを作るのは苦行。

Windows 10 Programming

公式ガイドラインを見てみる

基本的には、以下のサイトにすべて書いてある、と思う。

Tile and icon assets

それに加えて、拡張子の関連付けをしたい場合にはこちらも対応しなければいけない*1

Handle file activation

さまざまなフォームファクタに対応するためか、必要な画像ファイルの種類がとても多い。
さらにネックになるのが、
『画像サイズだけでなく、画像に占めるアイコンの割合がアイコンの種類によって異なる』
という点。画像の高さ基準で100%/75%/66%/50%/33%の割合にアイコンサイズを調整しなければならない*2。画像サイズだけなら単純な拡大/縮小で対応できるのだけど、アイコンサイズを考え始めるとトリミングする必要もあって、作成に非常に手間がかかる。

拡張子の関連付け用のアイコンについては

Match the look of the app tile logo and use your app's background color rather than making the icon transparent. Have the logo extend to the edge without padding it. Test your icons on white backgrounds.

とあるけど、正直言ってることがよく分からない。エクスプローラで確認する限り、アイコンの背景は透過でも問題ない*3し、パディング無し(すなわちアイコン割合100%)だと、他のアイコンと比較して大きくなりすぎる。
というわけで結論として自分は『背景白色、前景ダークグレー、アイコン割合75%』とした。これが正解かはわからない。

タイルアイコンを作る

上記したようにサイズとアイコン割合の異なる非常に多くの種類の画像を用意する必要があるので、そういうのが自動で行えそうなソフトを探した。
その結果、もともとアイコン作成が面倒でSyncfusion Metro Studioを使っていたということもあり、Xamarin Logo Makerを使うことにした。
www.microsoft.com
もともとはXamarin用にiOSAndroidをも含めたアイコン画像を自動生成するソフトのようだけど、Metro StudioからエクスポートしたXamlファイルをそのまま読み込めるので、UWP用だけで使ってもとても便利。
ただし使用にあたっていくつか注意点というか、自分がつまづいたところがあるので覚書。

  • ディスプレイスケーリング100%の環境で使用すること。
    • アプリ上でプレビューされているアイコン画像をそのまま出力するようで、ディスプレイスケーリングが100%でないとそれに合わせてアイコン画像の出力サイズが変わってしまう。
  • 設定可能なアイコン割合は3種類。
    • 上記したように、ガイドライン上では100%/75%/66%/50%/33%の5種類のアイコン割合が必要だが、このアプリでは3種類しか設定できないので、一部のアイコンはガイドラインに適合しない。僕の場合は基本的に100%/75%/33%で設定している。別途調整・出力しなおせばもちろんガイドラインに厳密に一致させることは可能だがめんどくさい。

詳細は上記リンクを参照するとして、とりあえずこの設定で小タイルが75%になる(正しくは50%)以外はガイドラインに適合するはず。
f:id:ayamadori:20160216001942p:plain

チラシの裏

ホント、もうちょっと何とかならなかったんですかね。。。表示されるアイコン割合の種類自体を減らすか、自動トリミング使うとかしてもう少し種類を減らしてほしい。まあ今更変わってもそれはそれで面倒なことになりそうだけど。。。

Visual Studio 拡張機能編(完結編)を追記。
ayamadori.hatenablog.com

*1:しなくても一応動作はする

*2:100%と66%はどちらもターゲットベースのアセットに必要で、いずれか一方があれば良いのかもしれない

*3:もちろん背景透過+前景1色だとアプリ側の背景によってはアイコンが見えなくなることがあるので、最低2色使用するなどの調整は必要