デスクトップアプリのスタート画面のタイルをカスタマイズする方法 (Windows ランタイムアプリ)

[アーティクル]
12/22/2015

[ この記事は、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 で同じ既定のタイルがどのように表示されるかを示しています。

Windows 8 と Windows 8.1 用に表示された Microsoft Office のタイル

タイルをさらにカスタマイズする場合は、特殊な 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 など) が必要です。

コマンド引数	定義
/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=&quot;[^&lt;&gt;&quot;:%\|\?\*]+&quot;/>  
        </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>

デスクトップアプリのスタート画面のタイルをカスタマイズする方法 (Windows ランタイムアプリ)

必要条件

手順

ステップ 1: カスタマイズ XML ファイルを作成する

ステップ 2: 背景色を宣言する

ステップ 3: アプリの名前をタイルに表示するかどうかを宣言する

ステップ 4: 前景のテキストの色を宣言する

ステップ 5: 画像を指定する

ステップ 6: スケーリング、ローカライズ、ハイコントラストの各画像を指定する

ステップ 7: 重要!ショートカットファイルを更新する

注釈

リソース管理システムを操作する

デスクトップアプリのタイルのカスタマイズ XSD

関連トピック

その他のリソース

デスクトップ アプリのスタート画面のタイルをカスタマイズする方法 (Windows ランタイム アプリ)

必要条件

手順

ステップ 1: カスタマイズ XML ファイルを作成する

ステップ 2: 背景色を宣言する

ステップ 3: アプリの名前をタイルに表示するかどうかを宣言する

ステップ 4: 前景のテキストの色を宣言する

ステップ 5: 画像を指定する

ステップ 6: スケーリング、ローカライズ、ハイ コントラストの各画像を指定する

ステップ 7: 重要!ショートカット ファイルを更新する

注釈

リソース管理システムを操作する

デスクトップ アプリのタイルのカスタマイズ XSD

関連トピック

その他のリソース

デスクトップアプリのスタート画面のタイルをカスタマイズする方法 (Windows ランタイムアプリ)

ステップ 6: スケーリング、ローカライズ、ハイコントラストの各画像を指定する

ステップ 7: 重要!ショートカットファイルを更新する

デスクトップアプリのタイルのカスタマイズ XSD