デスクトップ アプリのスタート画面のタイルをカスタマイズする方法 (Windows ランタイム アプリ)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
Windows 8.1 以降では、Win32 アプリ開発者は、スタート画面のデスクトップ アプリ タイルの外観をカスタマイズできます。 Windows 8 では、これらのタイルはシステムによってのみ提供されるため、開発者がカスタマイズできるオプションはありませんでした。このようなアプリのアイコンは、スタート画面の背景色に基づいてタイルに表示されていました。Windows 8.1 では、既定のタイルの外観がより多彩になっていますが、独自の色と画像を使うことでタイルのブランド設定を強化することもできます。
デスクトップ アプリのタイルでは、次のカスタマイズを行うことができます。
- カスタムのフルブリード画像
- 指定された背景色
- タイルでのアプリ名の表示または非表示のオプション
- アプリ名を表示する場合は、テキストの薄い色または濃い色を指定
タイルは全面的にカスタマイズできますが、既定のタイルの外観への変更についても認識する必要があります。Windows によってアプリに割り当てられる既定のタイルは、アプリ名とアプリのアイコンが表示される普通サイズのタイルのままです。ただし、Windows 8.1 では、レイアウトが変更され、Windows はアプリのアイコンの色に基づき、類似または補完的な背景色をそのアイコンの周囲に提供します。
次の画像は、同じスタート画面の背景色に対して、Windows 8 と Windows 8.1 で同じ既定のタイルがどのように表示されるかを示しています。
タイルをさらにカスタマイズする場合は、特殊な XML ファイルを使います。このファイルで使われるスキーマは、Windows ストア アプリのタイルに使われるタイル スキーマに似ていますが、これらを入れ替えることはできないため、混同しないでください。このトピックでは、次のサンプル ファイルの作成について説明します。ここでは、Square150x150Logo 属性と Square70x70Logo 属性は省略できますが、その他は必須です。
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"
ForegroundText="light"
Square150x150Logo="Assets\150x150Logo.png"
Square70x70Logo="Assets\70x70Logo.png"/>
</Application>
必要条件
- XML の理解
- コマンド ライン パラメーターの理解
- 画像のスケーリング、ハイ コントラスト、ローカライズの各バージョンのリソースの命名とパッケージ化の理解。詳しくは、「修飾子を使ってリソースに名前を付ける方法」をご覧ください。
手順
ステップ 1: カスタマイズ XML ファイルを作成する
- タイルのカスタマイズを指定する
- 実行可能ファイルと同じディレクトリに配置する
- "VisualElementsManifest.xml" という拡張子を使って、実行可能ファイルと同じ名前を付ける。たとえば、実行可能ファイルが "contoso.exe" である場合、付随する XML ファイルは "contoso.visualelementsmanifest.xml" という名前です。
作成した XML ファイルに次のコードを追加します。
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements/>
</Application>
ステップ 2: 背景色を宣言する
- 必須
- 任意の RGB 16 進数値か、次の定義済みの値のいずれかとして指定します。
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua
次に、色の値を表現する両方の方法の例を示します。
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"/>
</Application>
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="red"/>
</Application>
ステップ 3: アプリの名前をタイルに表示するかどうかを宣言する
- 必須
- ShowNameOnSquare150x150Logo 属性では 2 つの値を指定できます。
- "on" で名前を表示
- "off" で名前を非表示
- 普通サイズ (150 x 150) のタイルのみがアプリ名を表示できます。
アプリ名は、アプリの [スタート] メニューのショートカット ファイルの名前、または (ショートカット ファイルが存在しない場合は) アプリの実行可能ファイルの名前です。
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"/>
</Application>
ステップ 4: 前景のテキストの色を宣言する
- ShowNameOnSquare150x150Logo="off" の場合でも必須
- タイル上のアプリの名前を参照します。
- ForegroundText 属性では 2 つの値を指定できます。
- 白色のテキストには "light"
- 黒いテキストには "dark"
宣言した背景色に最適な値を選んでください。可視性とアクセシビリティを最大限に高めるためには、テキストの色と背景色の輝度の比率が少なくとも 4.5 対 1 になるようにします。詳しくは、W3C アクセシビリティ標準 G18: テキスト (および画像化された文字) とテキストの背景のコントラスト比を 4.5:1 以上にすることに関するページをご覧ください。
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"
ForegroundText="light"/>
</Application>
ステップ 5: 画像を指定する
- 省略可能
- 既定のアプリ アイコンと背景を置き換えるために、フルブリード画像を提供する
- 普通サイズのタイル (150 x 150) と小さいタイル (70 x 70) のみがサポートされる
- 標準のタイルの画像の制限が適用される:
- 1,024 x 1,024 ピクセル以下のサイズ
- 200 KB 以下のファイル サイズ
- ファイルの種類は .png、.jpg、.jpeg、.gif
重要 カスタム画像を選ぶ場合は、Square150x150Logo 属性と Square70x70Logo 属性の両方に画像を指定する必要があります。これらの属性の 1 つのみを指定した場合、この XML ファイル全体が無視され、既定のスタイル (アプリ アイコンと背景) がタイルに適用されます。
タイル デザインのベスト プラクティスでは、タイルがライブ タイルではない場合に、ワイド (310x150) および大サイズ (310x310) タイルに必要なより大きな画面領域を要求しないように求めています。デスクトップ アプリのタイルは常に静的であり、ライブにはならないために、このスキーマではこうした追加タイル サイズはサポートされません。
この例では、YourAppName.VisualElementsManifest.xml ファイルの兄弟である "Assets" という名前のフォルダーに画像が格納されています。これらのファイル名には、実際のファイル名、または手順 6. の説明にあるようにスケーリング、ハイ コントラスト、ローカライズが適用されたファイルの汎用的な名前を指定できます。画像アセットの命名については、「注釈」セクションをご覧ください。
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"
ForegroundText="light"
Square150x150Logo="Assets\150x150Logo.png"
Square70x70Logo="Assets\70x70Logo.png"/>
</Application>
完成した .VisualElementsManifest.xml は次のようになります。アプリの実行可能ファイルの兄弟として、アプリのインストールにこのファイルを追加します。
ステップ 6: スケーリング、ローカライズ、ハイ コントラストの各画像を指定する
- 推奨 (省略可)
- スケーリング、ローカライズ、ハイ コントラストの各画像を指定しない場合は、この手順を省略できます
- 表示の品質を最良にするためには、手順 5. で指定した各画像のスケーリングされたアセットの完全なセットを用意する。詳しくは、「注釈」セクションをご覧ください。
- 標準のリソース管理システムの命名規則と Resource.pri ファイルを使う
注 スケーリングされたアセットの完全なセットを指定しない場合は、必要に応じて指定できるように Windows によってアセットがスケーリングされます。通常、スケーリング ダウンはスケーリング アップよりも良い結果が得られるため、より大きいサイズ (140% や 180%) のいずれかを含めることをお勧めします。
タイルが更新されたときにアクティブなシステム設定に基づき、Windows では Resources.pri ファイルを使って対象のセットから適切な画像アセットを選びます。そのファイルはこの手順で作成します。
**作業フォルダーを作成する。**このフォルダーは、アプリのインストールには含まれず、Resources.pri ファイルの作成中にのみ使われます。この例では、"CreateResources" とします。
md %USERPROFILE%\Documents\CreateResources
**画像ファイルを格納するために CreateResources のサブディレクトリを作成する。**この例では、"Assets" とします。
md %USERPROFILE%\Documents\CreateResources\Assets
スケーリング、ハイ コントラスト、ローカライズの各画像を "Assets" フォルダーに配置します。 画像は、均一な一覧として、または構造化された一覧としてサブディレクトリに含めることができます。ただし、所定の名前付け規則と構造の規則に従う必要があります。この例で使えるように、次のスケーリングされたハイ コントラストのアセットを均一な一覧として提供します。
- 150x150Logo.scale-80.png
- 150x150Logo.scale-100.png
- 150x150Logo.scale-140.png
- 150x150Logo.scale-180.png
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 150x150Logo.scale-80_contrast-white.png
- 150x150Logo.scale-100_contrast-white.png
- 150x150Logo.scale-140_contrast-white.png
- 150x150Logo.scale-180_contrast-white.png
- 150x150Logo.scale-80_contrast-black.png
- 150x150Logo.scale-100_contrast-black.png
- 150x150Logo.scale-140_contrast-black.png
- 150x150Logo.scale-180_contrast-black.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png
**MakePRI の構成ファイルを作成する。**これは、Resources.pri でどの画像をインデックス化するかを指定する MakePRI.exe で使われる XML ファイルです。次のコマンドを使って、"TestAppConfig.xml" という名前の構成ファイルを作ります。そのファイルを格納するフォルダーが CreateResources フォルダーではないことに注意してください。これにより、構成ファイル自体がインデックスに含まれないようにします。
重要 MakePRI.exe コマンド ライン ツールは、無料でダウンロードできる Windows SDK に含まれています。Microsoft Visual Studio を使っている場合は、MakePRI.exe がインストールの一部として既にシステムに存在する可能性があります。
このコマンドと次のコマンドでは、MakePRI.exe の場所がパス内に存在していることを前提としています。それ以外の場合は、"Program Files\Windows Kits" で検索し、完全なパスを次のコマンドに含めます。
makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high
コマンド引数 定義 /cf 作成している構成ファイルのパスと名前 /dq 既定の修飾子。少なくとも 1 個の修飾子 (lang、scale など) が必要です。 Resources.pri ファイルを作成します。 次のコマンドを実行します。このコマンドでは、先に作成した TestAppConfig.xml 構成ファイルを使って CreateResources ディレクトリに Resources.pri ファイルが生成されます。
makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri
コマンド引数 定義 /pr プロジェクト ファイルのルートの場所 /cf 構成 XML ファイルのパス /in Resources.pri ファイル内のリソースのインデックスの名前。一般的には、アプリの名前に一致します。 /of Resources.pri ファイルの出力先。省略すると、/pr 引数で指定されたプロジェクト ルートが使われます。 **Resources.pri ファイルをアプリのインストールに含める。**アプリの実行可能ファイルおよびその .VisualElementsManifest.xml ファイルと同じディレクトリに配置します。インストール中には、アプリのショートカット ファイルをインストールする前に .VisualElementsManifest.xml を所定の場所に配置します。
ステップ 7: 重要!ショートカット ファイルを更新する
アプリが既にインストールされている場合は、ショートカットを微調整する前に新規または更新済みの .VisualElementsManifest.xml を所定の場所に配置しておかないと、無視されます。次に示す架空の Contoso アプリ用の Windows PowerShell コマンドの例は、これを行う方法を示す 1 つのモデルに過ぎず、ほかにも多くの方法があります。
(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date
注釈
重要 .VisualElementsManifest.xml ファイルに何か問題がある場合、タイルは Windows の提供する既定値に戻ります。考え得るファイル エラーには、XML ファイルが無効である、必要な属性が指定されていない、属性値が無効である、画像が見つからないなどがあります。
MakePRI.exe ファイルを dump コマンド オプションで使うことで、Resources.pri ファイルの内容を調べることができます。これはトラブルシューティングに役立ちます。MakePRI.exe ツールについて詳しくは、「MakePRI.exe 構成」と「MakePRI.exe のコマンド オプション」をご覧ください。
トラブルシューティングを行うときに、イベント ビューアーのアプリケーションとサービス ログ\Microsoft\Windows\Shell-Core\Operational ログに、28032 イベントが記録されていないか調べることもできます。このイベントの詳細データには、.VisualElementsManifest.xml ファイルのパス、HRESULT エラー コード、エラー文字列 (利用可能な場合) が含まれます。
リソース管理システムを操作する
このトピックでは、リソース管理システムの詳細には触れずに、簡単な概要のみ説明します。詳しくは、「リソース管理システム」をご覧ください。
リソース画像の完全なセットには以下が含まれます。
- 各 DPI 表示スケール プラトー (80%、100%、140%、180%) の別個の画像
- 各画像のハイ コントラスト バージョン (黒地に白、白地に黒)
- システムの言語に基づいてタイルで異なる画像を使う場合 (画像にテキストが含まれている場合など) のローカライズされた画像。
これらの画像のすべて、またはサブセットのみを提供できます。
ファイル名は、name.scale-100.ext、name.scale-100_contrast-black.ext などのパターンに従います。また、ファイル名ではなくディレクトリ構造を使って修飾子を指定することもできます。ただし、.VisualElementsManifest.xml ファイルでは、ファイルのルート name のみを参照します。たとえば、普通サイズのタイルに対して次のファイルを提供することがあります。
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png
ただし、.VisualElementsManifest.xml ファイルでは、例と同じように "70x70Logo.png" のみを参照します。現在のシステム設定に基づき、Windows では Resources.pri ファイルを使って、一覧表示されたすべてのオプションから適切なバージョンの 70x70Logo ファイルを選びます。このシステムを機能させるための名前付け規則の完全なチュートリアルについては、「クイック スタート: ファイルまたは画像リソースの使用」をご覧ください。
デスクトップ アプリのタイルのカスタマイズ XSD
デスクトップ アプリ用のタイルのカスタマイズで使われるスキーマの XSD を次に示します。
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:simpleType name="st_nonemptystring">
<xs:restriction base="xs:string">
<xs:minLength value="1"/>
<xs:maxLength value="32767"/>
<xs:pattern value="[^\s]|([^\s].*[^\s])"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_filenamecharset">
<xs:restriction base="st_nonemptystring">
<xs:pattern value="[^<>":%\|\?\*]+"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_filename">
<xs:restriction base="st_filenamecharset">
<xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>
<xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>
<xs:maxLength value="256"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_imagefile">
<xs:restriction base="st_filename">
<xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_color">
<xs:restriction base="xs:string">
<xs:pattern value="#[\da-fA-F]{6}"/>
<xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_foregroundtext">
<xs:restriction base="xs:string">
<xs:enumeration value="light"/>
<xs:enumeration value="dark"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_showname">
<xs:restriction base="xs:string">
<xs:enumeration value="on"/>
<xs:enumeration value="off"/>
</xs:restriction>
</xs:simpleType>
<xs:complexType name="ct_visualelements">
<xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>
<xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
<xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>
<xs:attribute name="BackgroundColor" type="st_color" use="required"/>
<xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>
</xs:complexType>
<xs:complexType name="ct_application">
<xs:all>
<xs:element name="VisualElements" type="ct_visualelements" />
</xs:all>
</xs:complexType>
<xs:element name="Application" type="ct_application" />
</xs:schema>