アプリの高DPI(High DPI)対応について 第4回 ～ 高DPIへの対応例 : Windowsストアアプリの対応方法 ～

マイクロソフトの田中達彦です。
本連載では、今後3年以内に避けて通れないと予測される高DPI(High DPI)への対応について連載します。

[高DPIへの対応]
前回までの記事で、アプリの高DPIへの対応レベルについて説明しました。
アプリに設定した対応レベルに応じて、OS側の動作が変わってきます。また、テクノロジごとにデフォルトの対応レベルが違います。
注意しないといけないことは、マニフェストで設定した対応レベルはあくまでもOS側に対応レベルを通知する役割を持っているだけで、マニフェストを変更してもアプリ自体が高DPIに対応するわけではありません。
また、WPFを使用したアプリはSystem DPI Awareにはなるものの、注意しないといけない点があります。
以下の図は、DPIスケールが150%のモニターでVisual Studio 2013を起動させている画面の一部です。

「スタート ページ」や「Microsoft Visual Studio」と書かれている文字や、メニューの文字、ツールバーに表示されている「アタッチ」という文字は、くっきりと表示されています。
しかしよく見ると、ツールバーに表示されている各種アイコンの画像がぼやけています。

文字のようなテキストデータはベクターグラフィックスで表現されているため、拡大したときもくっきりと表示されます。
アイコンの画像はピクセル単位で画像を表すビットマップのため、拡大したり縮小すると画像がぼやけたりすることがあります。
同じ画像でも、タイトルバーの左側にあるVisual Studioのロゴはくっきり表示されています。
これは、以下のように複数の大きさのロゴのデータが用意されており、表示させる大きさに合わせて使用するデータを変えているためです。

画像がベクターグラフィックスで用意されているときは、DPIスケールを意識しなくても画像がきれいに表示されます。

[Windowsストア アプリでの高DPI対応]
高DPIに対応するアプリを開発するには、既に高DPIに対応しているテクノロジがどのような仕組みを実装しているかを知ることが近道です。
Windowsストア アプリは高DPIに対応していますので、どのような方法で対応しているかを説明します。

Windowsストア アプリでは、DPIスケールが大きなときに、そのDPIスケールに適した画像データを使用する仕組みが組み込まれています。

以下の図は、Visual Studioでアプリのタイルを設定している画面です。

ここでは、150x150の正方形のタイルを3種類の大きさで設定しています。
150x150以外に、210x210、270x270の画像を用意しているのです。
その下には、スケール180、スケール140、スケール100、スケール80という文字が見えます。
モニターのDPIスケールによって、表示する画像を変えているのです。

Windowsストアアプリでは、タイル以外の画像のデータもスケールごとに用意できます。
例えばsamplebmp.jpgという画像ファイルを表示させたいときは、スケールごとに以下の画像ファイルを用意します。

DPIスケール100%用 : samplebmp.scale-100.jpg
DPIスケール140%用 : samplebmp.scale-140.jpg
DPIスケール180%用 : samplebmp.scale-180.jpg

このように画像を用意しておけば、プログラムからはsamplebmp.jpgを呼び出すことにより、モニターのDPIスケールに合わせた画像が自動的に選択されて表示されます。

詳細は、以下の記事をご参照ください。
ピクセル密度に合わせたスケーリングのガイドライン
https://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh465362.aspx
クイック スタート: ファイルまたは画像リソースの使用 (XAML)
https://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh965325.aspx

[高DPIに対応していないテクノロジでの対応]
高DPIに自動的に対応しないテクノロジを使用しているときは、画面のDPIスケールに合わせて文字の大きさを変更したり、表示に使用する画像ファイルを変更するなどのコードを実装することで、高DPIに対応できます。
画像ファイルに関しては、少し大きめの画像を用意しておき、DPIスケールが100%のときに縮小して表示させる方法もあります。
ただ、そのときは実行可能ファイルの大きさがその分だけ大きくなります。

Windowsストアアプリでは、100%、140%、180%の3種類の画像ファイルを用意することができます。
それぞれのスケールの画像ファイルが別のリソースとして用意され、Windowsストアからインストールする際に必要なスケールのリソースのみを実行可能ファイルとは別にインストールする仕組みになっています。

[次回]
次回以降は、テクノロジごとの対応方法を説明します。

[前後の回]
第1回 高DPIとは
https://blogs.msdn.com/b/ttanaka/archive/2014/07/16/dpi-high-dpi-1-dpi.aspx
第2回 アプリケーションの高DPIへの対応レベル
https://blogs.msdn.com/b/ttanaka/archive/2014/07/24/dpi-high-dpi-2-dpi.aspx
第3回 マニフェストでアプリのDPI対応レベルを変更する
https://blogs.msdn.com/b/ttanaka/archive/2014/08/22/dpi-high-dpi-3-dpi.aspx

マイクロソフト
田中達彦