Share via

アプリの高DPI(High DPI)対応について 第1回 ～ 高DPIとは ～

  • Article

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

====================
2014/12/22 追記
de:code 2014というカンファレンスにて、高DPIの話をしています。

以下のサイトでセッションの様子を公開していますので、ご参照ください。
https://www.microsoftvirtualacademy.com/training-courses/decode-track1
「既存デスクトップ アプリの最新 OS への対応」というセッションの、20分40秒くらいから45分くらいまでが高DPIに関する話です。
====================

[高DPIとは]
Surface Pro 3をはじめ、最近発売されるPCの解像度は高くなっています。
Surface Pro 3の場合は、12インチのディスプレイで解像度は2160x1440です。
Surface Pro 2でも、10インチのディスプレイで解像度は1920x1080です。
解像度がこれだけ高いと画像イメージは鮮明になりますが、文字は拡大しないと小さく表示され、読みにくくなってしまいます。

今までの解像度の場合、96DPIが標準でした。そのため、96DPIを前提として作成されているアプリが数多く存在します。
96DPIとは、1インチの中に96ドットが含まれるという意味です。DPIとはDot Per Inchの略です。

高解像度ディスプレイで96DPIを想定して作成されたアプリを表示した場合、テキストなどのUI要素は小さく表示されてしまいます。
そのため、デフォルトで125%や150%に拡大するという処理をOS側で行っています。
ディスプレイの解像度を150%に変更すると、UI要素が1.5倍に拡大されて、文字が読みやすくなります。

以下の図は、Windowsフォームで作成したアプリとWPFで作成したアプリを150%という拡大率に設定したディスプレイ上で表示した例です。

Windowsフォームで作成したアプリ

WPFで作成したアプリ

Windowsフォームで作成したアプリは、文字の輪郭が少しぼやけています。
WPFで作成したアプリは、文字の輪郭がはっきりしています。

実は、テクノロジによって高DPIに対応しているものと対応していないものがあります。
WPFは高DPIに対応していますので、拡大率が大きいディスプレイで表示してもきれいに表示できます。
Windowsフォームは高DPIには対応せず、一部のコントロールのみ高DPIに対応しています。
ただし、Windowsフォームの一部のコントロールを高DPIに対応させるには、最新の.NET Frameworkである4.5.1または4.5.2を使う必要があります。
高DPIに対応していないアプリの場合は、DPIの拡大率に応じてOS側が自動的にアプリを拡大して表示させます。
そのため、このWindowsフォームのようにUI要素がぼやけてしまうことがあります。

もし手元に高DPIに対応していないWindowsフォームのアプリがある場合は、なるべく早めに高DPIへの対応を進めることをお勧めします。
本連載では、その方法を順次説明します。

[DPIの変更方法]
DPIを変更するには、画面上の何もない場所を右クリックして、以下のコンテキストメニューを表示させます。
ここで画面の解像度を選択します。

そして、下のほうにある[テキストやその他の項目の大きさの変更]を選択します。

以下の例では、100%すなわち96DPIが既定となっているディスプレイで、150%を選択しています。
ディスプレイの性能によって、どこまで拡大率を上げられるかが変わります。
例えば「大」の次に「特大」や、さらに「超特大」が表示されるディスプレイもあります。「大」が表示されないこともあります。
その下の[カスタム サイズ変更オプション]を選択すると、任意の倍率に変更できます。

Windows 8.1以降のOSの場合は、複数のディスプレイを選択しているときに、ディスプレイごとに拡大率を変えることができます。
これを英語ではPer Monitor DPIと呼びます。
WindowsフォームやWPFで作られたアプリをPer Monitor DPIに対応させるには、専用のコードを追加する必要があります。
Windowsストアアプリは、Per Monitor DPIにも対応しています。

[次の記事]
第2回 アプリケーションの高DPIへの対応レベル
第3回 マニフェストでアプリのDPI対応レベルを変更する

マイクロソフト
田中達彦

Comments

  • Anonymous
    August 19, 2014
    Windows Form デザイナーでの「AutoScaleMode」(Font/dpi など)との関連はどうなっているのでしょう？

  • Anonymous
    August 21, 2014
    連載中においおい書いていきますので、しばしお待ちいただけないでしょうか。

  • Anonymous
    August 23, 2014
    Tatsuhiko Tanaka　様 リプライしていただき、ありがとうございました。 後続の連載を楽しみにしております。どうぞよろしくお願いいたします。