デスクトップアプリのスタート画面用タイルを登録する1(タイルのカスタマイズとは)

2018年4月にインストーラーやファイルを一つの自己展開型EXEにパッケージするアプリ(File Package App)を公開しました。そのEXEファイルにはアプリアイコンは埋め込みましましたが、Windows 8.1/10などのスタート画面にアプリをピン留した時のタイルアイコンの登録を忘れていました。そこで、タイルアイコンのカスタマイズ登録に挑戦します。

デスクトップアプリのタイルアイコン

デスクトップアプリのタイルアイコンは、デフォルトではアプリのEXEに埋め込まれたアイコンからタイルが生成されます。ただし、アプリのEXEアイコンはもともとタイル用でないため、バランスや色が適切でない場合があります。このデフォルトタイルを置き換えるために、デスクトップアプリでもWindowsストアアプリのようにタイル専用の画像と登録することができます。

タイル専用の画像をを登録すると、自動生成されるデフォルトのタイルをカスタマイズしたタイル(画像および背景色)に変更することができます。

カスタマイズ方法

まずは、デスクトップアプリ用のタイルアイコンのカスタマイズ方法を調べます。

How to customize Start screen tiles for desktop apps (Windows Runtime apps) (英語)

この開発者向けドキュメントによると、スタート画面はWindows 8.0で導入されましたが、デスクトップアプリ向けのタイルアイコンのカスタマイズはWindows 8.1からできるようになったとのことです。

その方法は、Windows ストアアプリ(Windows 8.1におけるモダンアプリ)と同様のマニフェストファイルとアイコンファイルを用意すればよいことがわかりました。

日本語のサイトでデスクトップアプリのタイルアイコンの登録をする方法を解説しているサイトはいくつかありますが、高DPIやハイコントラストに対応した登録方法の解説は日本語では少ないようです。ここでは、一つのサイズのアイコンを登録するのではなく、高DPIやハイコントラストに対応した登録方法を解説したいと思います。

FilePackageApp.exe というファイル名のデスクトップアプリのタイルの登録をするものとします。そのため、説明の中で「FilePackageApp.exe」というEXE名が何度も登場します。実際にタイルアイコンを登録したいEXE名に置き換えてください。

デスクトップアプリのタイル登録の基本

まずは、高DPIやハイコントラストに対応しない場合のシンプルな登録方法の確認です。必要なファイルは以下の通りとなります。

タイルのカスタマイズ指定ファイル (*.VisualElementsManifest.xml)
小サイズのタイル用のアイコンファイル(70ピクセル x 70ピクセル)
中サイズのタイル用のアイコンファイル(150ピクセル x 150ピクセル)

それぞれについて説明します。

タイルのカスタマイズ指定ファイル (*.VisualElementsManifest.xml)

アプリタイルのカスタマイズ情報をこのファイルに指定します。このファイルは、EXEファイルと同じフォルダーに配置します。ファイル名は、EXEファイルの拡張子EXEを除いたファイル名の後ろに「.VisualElementsManifest.xml」という名前を追加したファイル名にします。たとえば、EXEファイル名が「FilePackageApp.exe」の場合、カスタマイズ指定ファイル名は「FilePackageApp.VisualElementsManifest.xml」となります。xmlファイルの中は以下のようにします。

<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#daa520"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\Tiles\FilePackageApp_150x150Logo.png"
        Square70x70Logo="Assets\Tiles\FilePackageApp_70x70Logo.png"/>
</Application>

それぞれの属性について説明します。

BackgroundColor属性

タイルの背景色を指定します。この属性は必須パラメータなので必ず設定します。設定方法は＃RGBの形式でRGB値を直接指定するか、事前定義された色名を使用します。

上記の例では、RGB値として 0xda, 0xa5, 0x20 を指定しています。

事前定義された色は、

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua

などがあります。これらは一例で、もっとたくさん定義されています。

ShowNameOnSquare150x150Logo属性

中サイズのタイルのときに、下部に名前を表示するかしないかを “on” または “off” で指定します。この属性は必須パラメータなので必ず設定します。

上記のファイルの中の例では、名前を表示する設定です。

ForegroundText属性

タイルの上に表示するアプリ名のテキストの色を指定します。指定できる値は、”light” または “dark” のどちらかです。この属性は必須パラメータなので必ず設定します。ShowNameOnSquare150x150Logo属性が “off” の場合でも必ず設定します。

“light” は、白系のテキストを使用するときに設定します。”dark” は、黒系のテキストを使用するときに設定します。どちらを指定するかは、BackgroundColor属性に設定した背景色、および、画像の背景色を考慮してテキストが見やすくなる値を指定します。

Square150x150Logo属性とSquare70x70Logo属性

これらの属性は、このファイルからの相対パスで画像ファイルを指定します。この属性は任意パラメータなので必ずしも設定しなくて問題ありません。しかし、希望のタイルにするために極力設定しましょう。

上記の例では、Assets\Tiles フォルダーにある画像ファイルを指定しています。

指定できる画像ファイルの形式などには以下の制限があります。

ファイルの形式は、 .png / .jpg / .jpeg / .gif のいずれか。
ファイルのサイズは200KB以下
画像のサイズは1024×1024以下

画像の一部を透過させたい場合は、png形式またはgif形式を使用します。

タイルの背景とタイルアイコンの関係は以下の図のようになります。

アイコンまたはロゴを外側に空間を設けて中央に配置 (出典: Windows Dev Center)

これら二つの違いは以下の通りです。

画像は中央にアイコンまたはロゴを配置し、それ以外の部分を透過させる
画像は透過部分を持たず、タイル全体に配置する

小サイズのタイル用のアイコンファイル(70ピクセル x 70ピクセル)

Square70x70Logo属性に設定する小サイズ用のファイルです。小サイズのタイルではアプリ名は表示されません。そのため、画像の下部にアプリ名を表示する領域を確保する必要はありません。

Guidelines for tile and icon assets (英語) の Tile Assets (英語)によると、小サイズのタイルとアイコンのバランスは以下のように縦・横ともに50％にするのが標準とのこと。

縦横比が異なるようなアイコンのアイコン部分の縦・横の最大サイズ(割合)は縦・横ともに66％が良いとこのと。

小サイズアイコンのアイコン部分の縦横の最大割合 (出典: Windows Dev Center)

中サイズのタイル用のアイコンファイル(150ピクセル x 150ピクセル)

Square150x150Logo属性に設定する中サイズ用のファイルです。中サイズのタイルでは下部にアプリ名を表示することができます。そのため、画像の下部にアプリ名を表示する領域を確保する必要があります。

Guidelines for tile and icon assets (英語) の Tile Assets (英語)によると、小サイズのタイルとアイコンのバランスは以下のように縦・横ともに33％にするのが標準とのこと。

縦横比が異なるようなアイコンのアイコン部分の縦・横の最大サイズ(割合)は横66％、縦50%が良いとこのと。縦方向は、アプリ名を表示する領域があるので、割合が若干小さくなっています。

中サイズアイコンのアイコン部分の縦横の最大割合 (出典: Windows Dev Center)

ファイルの配置

これらの三つのファイルについて、FilePackageApp.VisualElementsManifest.xmlは、FilePackageApp.exeと同じフォルダに、小サイズと中サイズのアイコンファイルは、xmlファイルに指定した場所に配置します。

この状態で、EXEファイルをコンテキストメニュー(エクスプローラーでEXEファイルをマウスの右クリック)でスタート画面にピン留すると、カスタマイズしたアイコンが表示されます。

この投稿の冒頭のスタート画面の画像は、中サイズのタイルの例でした。ここには、小サイズのタイルのアイコンの場合の実現例を示します。

小サイズの場合も背景色が独自の色に設定できるので、デフォルトで自動作成されるタイルとはだいぶイメージが異なると思います。

次回は、高DPIやハイコントラストに対応する方法を説明します。