Ask Learn
Preview
Ask Learn is an AI assistant that can answer questions, clarify concepts, and define terms using trusted Microsoft documentation.
Please sign in to use Ask Learn.
Sign inThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
TechSummit では、「デスクトップ アプリを Windows ストアで公開するには」というお話をさせていただきました。この話では、Desktop App Converter (以降は、DAC と略します)を使用して、インストーラを Appx に変換したり、変換できるアプリの条件などを色々と説明しました。色々な作業を得てから、最終的なアプリに仕上げる時に必要になるタイル アイコンなどを説明するのが、今回の話題になります。
タイルなどのアセットの詳細は、「タイルとアイコン アセットのガイドライン」に詳しく説明があります。内容を読むと、スケール ベースとターゲット ベースのアセットがあることが理解できます。
Visual Studio 2015 で UWP アプリのプロジェクトを作成すると、自動的にスケール ベースのアセットなどが使用できる状態になっていますので、使用するアセットをプロジェクトに追加していくことで、ターゲット サイズのアセットなども使えるようになります。ちなみに、UWP プロジェクトを新規で作成した時に、テンプレートが作成するアセットは次のものになっています。
つまり、ロックスクリーン、スプラッシュ スクリーン、小さいタイル、正方形タイル、ワイドタイルと システム用のターゲット サイズのアセット、ストア ロゴの 7 つが含まれています。一方で、DAC で作成した アプリに含まれているのは、次のようなアセットになります。
正方形の 150x150タイルが、スケール 200%のサイズである、300ピクセルの正方形で用意されており、この3種類が DAC で自動的に追加されるサンプル アセットとなります。では、スケーリングに応じた以下のようなタイル アセットを使用したいとすれば、どうしたら良いでしょうか。
このようなスケーリングに対応したアセットをアプリが使用するためには、パッケージ リソース インデックス (Package Resource Index) 情報を作成する必要があります。そして、scale-xxx や targetsize-xxx などをリソース修飾子と呼び、どのように使用するかを説明したドキュメントもあります。PRI (パッケージ リソース インデックス) を作成するには、Windows SDK で提供される「makepri.exe」ユーティリティを使用する必要があります。Visual Studio の UWP プロジェクトでは、ビルド プロセスの中で PRI 情報を自動的に作成するようになっていますので、通常は意識することがないユーティリティの 1 つでもあるのが makepri.exe になります。ドキュメントを読むと、makepri.exe は構成ファイルを必要としています。この構成ファイルに何を記述するかと言えば、何の修飾子を使用するかという情報などになります。そこで、参考に私が作成した構成ファイルを以下に示します。
<?xml version="1.0" encoding="utf-8"?>
<resources targetOsVersion="10.0.0" majorVersion="1">
<index root="\" startIndexAt="assetslayout.resfiles">
<default>
<qualifier name="Language" value="ja-JP" />
<qualifier name="Contrast" value="standard" />
<qualifier name="Scale" value="200" />
<qualifier name="HomeRegion" value="001" />
<qualifier name="TargetSize" value="256" />
<qualifier name="LayoutDirection" value="LTR" />
<qualifier name="DXFeatureLevel" value="DX9" />
<qualifier name="Configuration" value="" />
<qualifier name="AlternateForm" value="" />
<qualifier name="Platform" value="UAP" />
</default>
<indexer-config type="RESFILES" qualifierDelimiter="." />
</index>
</resources>
この構成ファイルは、Visual Studio の UWP プロジェクトのビルド プロセスで作成されたものをベースに作成しました。仮に、この構成ファイルを「priconfig.xml」とします。root属性に「\」を指定しているのは、Appxレイアウトのフォルダを意味しており、startAtIndexAt属性に指定している「assetslayout.resfiles」はリソースに含めるファイルの一覧を記述したテキスト ファイルで、root 属性に指定したフォルダ内に配置する必要があることを意味します。このため、assetslayout.resfiles の中身は、以下のようになります。
assets\SampleAppx.44x44.png
assets\SampleAppx.50x50.png
assets\SampleAppx150x150.scale-100.png
assets\SampleAppx150x150.scale-200.png
このファイル「assetslayout.resfiles」 を Appx レイアウトのフォルダ直下(AppxManifest.xml と同じ場所)に配置します。そして、AppxManifest.xml を編集します。具体的には、「SampleAppx.150x150.png」を「SampleAppx150x150.png」に変更します。この変更によって、SampleAppx150x150.png は、スケーリングに応じたアセットが使われるようになるわけです。この準備ができたら、makepriを使用します。
このコマンドで、カレント フォルダに「resources.pri」が出力されます。カレント フォルダは、Appxレイアウトのフォルダを配置した作業フォルダを想定していて、このフォルダに priconfig.xml を配置していることを想定しています。
resources.pri が作成できたら、Appxレイアウト フォルダ(AppxManifest.xml を配置したフォルダ)に resources.pri をコピーします。これで、アプリがパッケージ リソース インデックス(pri) を使用できるようになります。resources.pri を作成する時の注意点は、AppxManifest.xml の Square44x44Logo 属性に指定するファイルが正しくなるようにすることです。これが間違っていると、正しいリソースが選択されない原因になります。また、resources.pri には、パッケージ名やアプリ名などが含まれているバイナリ ファイルになりますので、Windows ストアと関連付けるために AppxManifest.xml を編集したら、必ず resources.pri を作成しなおしてください。
最後にAppxパッケージを作成する場合に、「makeappx.exe」を使用しますが、この時のコマンドにも注意が必要です。何故なら、デフォルトのオプションでは、AppxManifest.xml に指定したリソースの存在チェックが行われるからです。この理由から、以下のように 「/l」オプションを使用します。
このように適切にパッケージ リソース インデックス(PRI) を作成することで、スケーリングに応じたアセットを切り替えることができるようになります。特に、DAC で変換した Appx レイアウトは、Visual Studio と違って自動的にはスケーリングに対応していないので、自分で適切な作業をする必要があるのです。特に、ファイルの拡張子の関連付けをされる場合は、パッケージ リソース インデックスの作成は必須だと考えてください。何故なら、システム側がターゲット ベースのアセットを使用する必要があるからです。
追記:リソース ファイル(.resw)を使って、言語リソースを追加するには、言語用のリソース(.resw)を定義します。たとえば
このようなリソース ファイル(.resw)を作成した場合は、makepriの構成ファイルに、リソース ファイル用のエントリーを追加します。
resources.resfilesは、layout.resfiles と同じで、作成したリソース ファイル(.resw)に対するパスを記述します。作成した「ApplicationDescription」文字列にアクセスするには、「ms-resources:Resources/ApplicationDescription」と記述します。
ちなみに、説明のために layout.resfiles などをパッケージ ルートに配置するとして説明していますが、makepriの構成ファイルがパッケージ ルート(\)を基準にしているので、パッケージ ルートからの相対パスで記述すれば、パッケージ内に配置しないことも可能です。リソース ファイル(.resw)は、makepri で pri ファイルを作成すると、pri ファイルの中に定義したリソース情報がマージされて、リソース マネージャからアクセスできるようになります。
Ask Learn is an AI assistant that can answer questions, clarify concepts, and define terms using trusted Microsoft documentation.
Please sign in to use Ask Learn.
Sign in