アプリのスケーリング対応アセットについて

  • Article

TechSummit では、「デスクトップ アプリを Windows ストアで公開するには」というお話をさせていただきました。この話では、Desktop App Converter (以降は、DAC と略します)を使用して、インストーラを Appx に変換したり、変換できるアプリの条件などを色々と説明しました。色々な作業を得てから、最終的なアプリに仕上げる時に必要になるタイル アイコンなどを説明するのが、今回の話題になります。

タイルなどのアセットの詳細は、「タイルとアイコン アセットのガイドライン」に詳しく説明があります。内容を読むと、スケール ベースとターゲット ベースのアセットがあることが理解できます。

  • スケール ベース
    xxxxxx.scale-100.png など、スケーリングの倍率(100、200、400、etc)に応じて切り替えるアセット。
  • ターゲットベース
    xxxxxx.targetseize-16.png など、ターゲット サイズに応じて切り替えるアセット(正方形)で、エクスプローラなどの Windows のシステム側で使用するものになります。

Visual Studio 2015 で UWP アプリのプロジェクトを作成すると、自動的にスケール ベースのアセットなどが使用できる状態になっていますので、使用するアセットをプロジェクトに追加していくことで、ターゲット サイズのアセットなども使えるようになります。ちなみに、UWP プロジェクトを新規で作成した時に、テンプレートが作成するアセットは次のものになっています。

  • LockScreenLogo.scale-200.png
  • SplashScreen.scale-200.png
  • Square44x44Logo.scale-200.png
  • Squrae44x44Logo.targetsize-24_altform.png
  • Square150x150Logo.scale-200.png
  • StoreLogo.png
  • Wide310x150Logo.scale-200.png

つまり、ロックスクリーン、スプラッシュ スクリーン、小さいタイル、正方形タイル、ワイドタイルと システム用のターゲット サイズのアセット、ストア ロゴの 7 つが含まれています。一方で、DAC で作成した アプリに含まれているのは、次のようなアセットになります。

  • SampleAppx.44x44.png (44px x 44px)
  • SampleAppx.50x50.png (50px x 50px)
  • SampleAppx.150x150.png (300px x 300px)

正方形の 150x150タイルが、スケール 200%のサイズである、300ピクセルの正方形で用意されており、この3種類が DAC で自動的に追加されるサンプル アセットとなります。では、スケーリングに応じた以下のようなタイル アセットを使用したいとすれば、どうしたら良いでしょうか。

  • SampleAppx150x150.scale-100.png
  • SampleAppx150x150.scale-200.png

このようなスケーリングに対応したアセットをアプリが使用するためには、パッケージ リソース インデックス (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を使用します。

  • 「makepri.exe  new /pr Appxレイアウトのフォルダ /cf priconfig.xml」

このコマンドで、カレント フォルダに「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」オプションを使用します。

  • 「makeappx.exe /d Appxレイアウトのフォルダ /l /p appx名.appx」

このように適切にパッケージ リソース インデックス(PRI) を作成することで、スケーリングに応じたアセットを切り替えることができるようになります。特に、DAC で変換した Appx レイアウトは、Visual Studio と違って自動的にはスケーリングに対応していないので、自分で適切な作業をする必要があるのです。特に、ファイルの拡張子の関連付けをされる場合は、パッケージ リソース インデックスの作成は必須だと考えてください。何故なら、システム側がターゲット ベースのアセットを使用する必要があるからです。

追記:リソース ファイル(.resw)を使って、言語リソースを追加するには、言語用のリソース(.resw)を定義します。たとえば

  • 「ApplicationDescription」 キーに値を設定します

このようなリソース ファイル(.resw)を作成した場合は、makepriの構成ファイルに、リソース ファイル用のエントリーを追加します。

  • 先に示した index 要素のコピーを作成します。
  • 「layout.resfiles」 を 「resources.resfiles」に変更します
  • Type="RESFILES"の行に次の二行を追加します。
  • <indexer-config Type="RESW" convertDotsSlashes="true" />
  • <indexer-config Type="RESJSON" />

resources.resfilesは、layout.resfiles と同じで、作成したリソース ファイル(.resw)に対するパスを記述します。作成した「ApplicationDescription」文字列にアクセスするには、「ms-resources:Resources/ApplicationDescription」と記述します。
ちなみに、説明のために layout.resfiles などをパッケージ ルートに配置するとして説明していますが、makepriの構成ファイルがパッケージ ルート(\)を基準にしているので、パッケージ ルートからの相対パスで記述すれば、パッケージ内に配置しないことも可能です。リソース ファイル(.resw)は、makepri で pri ファイルを作成すると、pri ファイルの中に定義したリソース情報がマージされて、リソース マネージャからアクセスできるようになります。