アプリの高DPI(High DPI)対応について第2回～アプリケーションの高DPIへの対応レベル～

Article
07/24/2014

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

[DPI対応アプリケーションの種類]
アプリケーションが高DPIに対応しているかどうかは、以下の3つのレベルで示されます。

Not DPI Aware : 高DPIに対応していないアプリケーション
System DPI Aware : 高DPIに対応しているアプリケーション。ただし、モニターごとのDPIには対応していません。
Per monitor DPI Aware : Windows 8.1でサポートされたモニターごとのDPIの設定にも対応しています。

Not DPI Awareアプリは、96DPIのモニターで表示されることを前提にしたアプリです。
もしこのアプリを、144DPI相当すなわち150%のDPIスケールのモニターで表示させると、OS側が自動的にアプリを拡大して表示します。
この自動的に拡大する機能は、Windows Vista以降でサポートされています。
アプリを自動的に拡大する場合は、一旦96DPI相当で描画した後に150%に拡大します。
そのため、Not DPI Awareアプリを150%などに設定しているモニターで表示させると、文字などのUI要素がぼやけてしまうことがあります。
アプリケーションの設定によっては、自動的に拡大しないようにもできます。
この方法は後述します。

System DPI Awareアプリは、システムで設定したDPIのスケールに対応したアプリです。System DPI Awareアプリの場合は、OSによって自動的に拡大/縮小されずに表示されます。
ただし、DPIが動的に変わることに対しては対応していません。

Per Monitor DPI-Awareアプリは、DPIのスケールが動的に変わることに対応したアプリです。
DPIが動的に変わることは、モニターごとに異なるDPIを設定していて、アプリがモニター間を移動するときに発生します。
例えばプライマリモニターが100%、セカンダリモニターが150%に設定されているとき、プライマリモニターに表示しているアプリをセカンダリモニターに移動させると、その途中でDPIのスケールが100%から150%に変わります。
モニターごとのDPIに対応していないWindows 8以前のOSでは、DPIスケールが動的に変わることはありません。

[各テクノロジの高DPIへの対応]
UIを構築するテクノロジは、それぞれデフォルトで以下のような高DPIの対応レベルになっています。

Windowsフォーム : Not DPI Aware
WPF : System DPI Aware
MFC : System DPI Aware
Windowsストアアプリ : Per Monitor DPI Aware

これらは、最新のバージョン(現段階でVisual Studio 2013に搭載されているライブラリ)を使用したときの対応レベルです。
例えばVisual Studio 2008でMFCを使って作られたアプリケーションは、System-DPI Awareにはなっていません。

[自動拡大をオフにする]
Windowsフォームを使用したアプリなどNot DPI Awareアプリは、100%以外のDPIスケールのモニターで表示させたときに以下のようにUI要素がぼやけてしまい、くっきりと表示されない場合があります。

前述したように、OSが自動的に拡大/縮小させているからです。
この拡大/縮小は、互換性のプロパティを変更することによって自動的に動作しないようにできます。
エクスプローラー上で該当する.exeファイルを右クリックし、表示されたコンテキストメニューのプロパティを選択します。
ダイアログが表示されたら、互換性のタブをクリックします。
下のほうにある、[高DPI設定では画面のスケーリングを無効にする]にチェックを入れます。

このようにすると、OSが自動的に拡大/縮小を行わなくなりますので、以下のように文字がくっきりと表示されます。

ただし、UIのレイアウトが崩れてしまうことがあります。
今回使用したアプリの例でも、タイトルバーに表示されている「Form1」という文字の位置が少しずれています。
よく見ると、各コントロールの幅も微妙に違っています。

このように、互換性のプロパティを変更することは手軽ですが、レイアウトが崩れていないかどうかなどを確認する必要があります。

[Webアプリの場合]
Webアプリの場合は、それを動かしているWebブラウザに依存します。
Webブラウザが高DPIに対応していないと、その中に表示されるコンテンツがぼやけてしまうからです。
有名なWebブラウザのDPI対応レベルは、それぞれ最新版で以下のようになっています。
それぞれのブラウザの画像は、上がシングルモニターの150%スケールで動作させたとき、下の画像がマルチモニタでプライマリ100%、セカンダリ150%に設定しているときのセカンダリモニターでの画像です。

Internet Explorer : Per Monitor DPI Aware
(シングルモニターの150%スケール)