DPI 対応の Win32 アプリケーションを記述する

更新日: 2009 年 4 月 28 日

ダウンロード

PDC08_Writing_DPI_Aware_Applications_JPN.docx (Word 形式、609 KB)

目次:

1. はじめに
2. Windows の高 DPI 関連機能
1. コントロール パネルを使用して DPI を設定する
2. DPI 仮想化
3. DPI 関連の API
3. 高 DPI 関連の一般的な問題
1. UI 要素やテキストが切れる
2. フォント サイズが不適切になる
3. レイアウトが不適切になる
4. UI 要素がぼやける
5. テキストがピクセル化する
6. ドラッグ アンド ドロップなどの入力に関する問題
7. 全画面表示のアプリケーションが部分的にしかレンダリングされない
8. 有効解像度が間違って使用される
4. DPI 互換性を評価する
1. 高 DPI 関連の問題のチェックリスト
2. DPI 互換性をテストする
3. ステップ バイ ステップ ガイド
1. 既存の Win32 アプリケーション
2. 新しい Win32 アプリケーション

5. 高 DPI 関連の問題に対処する
1. DPI 対応であることを宣言する
1. アプリケーション マニフェストを使用する
2. SetProcessDPIAware 関数
2. システム情報を取得する
1. GetDeviceCaps 関数
2. GetSystemMetrics 関数
3. SystemParametersInfo 関数
3. DPI スケール率を求める
4. テキストのサイズを変更する
1. CreateFont 関数
2. GetTextExtent 関数
3. フォントを選択する
5. グラフィックのサイズを変更する
1. 複数解像度のサポート
2. ふさわしいものに最も近いものを使う
3. アイコン
6. レイアウトのサイズを変更する
1. DPI 仮想化が有効になっている場合のレイアウト
7. 最低有効解像度に対処する

6. まとめ
7. 詳細情報
8. 付録 A: Windows で高 DPI を設定する
1. Windows XP で高 DPI を設定する
2. Windows Vista で高 DPI を設定する
9. 付録 B: DPI サンプル コード
10. 付録 C: 最適な DPI 構成の例

Ryan Haveson、Ken Sykes
Microsoft Corporation
2008 年 10 月

対象:

Windows® XP

Windows Vista®

要約:

Win32 アプリケーションを DPI 対応にする方法と、そうすべき理由を説明します。このドキュメントでは、Windows XP と Windows Vista の高 DPI 関連の機能を使用して UI をより一貫性があり、魅力的で、読みやすいものにする方法を紹介します。また、DPI 関連の一般的な問題を特定して修正する方法について説明し、マニフェストを使用して、アプリケーションが DPI 対応であることを宣言する方法についても説明します。

法的通知:

このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマイクロソフトの見解を反映したものです。変化する市場状況に対応する必要があるため、このドキュメントは、記載された内容の実現に関するマイクロソフトの確約とはみなされないものとします。また、発行以降に発表される情報の正確性に関して、マイクロソフトはいかなる保証もいたしません。
このホワイト ペーパーに記載された内容は情報の提供のみを目的としており、明示、黙示または法律の規定にかかわらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。
お客様ご自身の責任において、適用されるすべての著作権関連法規に従ったご使用を願います。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることなく、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上のお客様の権利を制限するものではありません。
マイクロソフトは、このドキュメントに記載されている内容に関し、特許、特許申請、商標、著作権、またはその他の無体財産権を有する場合があります。別途マイクロソフトのライセンス契約上に明示の規定のない限り、このドキュメントはこれらの特許、商標、著作権、またはその他の無体財産権をお客様に許諾するものではありません。
© 2008 Microsoft Corporation. All rights reserved.
Microsoft、MS-DOS、Windows、Windows NT、Windows Server、Windows Vista、Active Directory、ActiveSync、ActiveX、Direct3D、DirectDraw、DirectInput、DirectMusic、DirectPlay、DirectShow、DirectSound、DirectX、Expression、FrontPage、HighMAT、Internet Explorer、JScript、Microsoft Press、MSN、Outlook、PowerPoint、SideShow、Silverlight、Visual Basic、Visual C++、Visual InterDev、Visual J++、Visual Studio、WebTV、Windows Media、Win32、Win32s、および Zune は米国 Microsoft Corporation の米国またはその他の国における登録商標または商標です。
記載されている会社名、製品名には、各社の商標のものもあります。

1. はじめに

このホワイト ペーパーは、既存の Win32® アプリケーションと新しい Win32® アプリケーションを DPI 対応にする方法を示す実用的なガイドです。DPI 対応のアプリケーションを記述することは、さまざまな高 DPI のディスプレイ設定で一貫してユーザー インターフェイス (UI) の見栄えをよくするための鍵です。DPI 対応でないアプリケーションを高 DPI のディスプレイ設定で実行すると、多くの視覚的アーティファクトが発生するおそれがあります (UI 要素のサイズが不適切に変更される、テキストが切れる、イメージがぼやけるなど)。アプリケーションを DPI 対応にすると、アプリケーションの UI の見た目を確実により予測可能なものにすることができます。これにより、アプリケーションの UI はユーザーにとって視覚的により魅力のあるものになります。

Windows Vista® が登場してから、ユーザーは、高 DPI のディスプレイでテキストや UI 要素のサイズを拡大する方法として DPI 設定を変更するという推奨アドバイスに従うことが以前よりも多くなっています。高解像度のディスプレイを販売するメーカーも、このようなディスプレイの販売台数も増えているので、既定の 96 DPI の設定を前提にアプリケーションを記述できなくなっています。最適な DPI 構成の例の一覧については、付録 C を参照してください。最良のユーザー エクスペリエンスの提供を推進するには、開発者はアプリケーションを DPI 対応にする必要があります。

このドキュメントでは、DPI 関連の機能について説明し、Windows® XP と Windows Vista における高 DPI 関連の問題について考察します。また、DPI 対応性を評価するための一連のガイドラインや、アプリケーションの DPI 対応に関する問題に対処するのに役立ついくつかの解決策も紹介します。このドキュメントには、次のセクションがあります。

• Windows の高 DPI 関連機能
  

  Windows XP と Windows Vista における高 DPI のサポートの概要について説明します。

• 高 DPI 関連の一般的な問題
  

  高 DPI 設定でアプリケーションに影響を与える、主な視覚的アーティファクトやユーザビリティに関する問題について説明します。

• DPI 互換性を評価する
  

  DPI 互換性の評価テストに使用する設定の表とテスト戦略に関する推奨事項を紹介します。

• 高 DPI 関連の問題に対処する
  

  アプリケーションにおける高 DPI 関連の問題を解決するための、コーディングに関する推奨事項を紹介します。

ページのトップへ

2. Windows の高 DPI 関連機能

このセクションでは、Windows® XP と Windows Vista® でサポートされている高 DPI 関連機能の概要について説明します。次の表に、各プラットフォームでサポートされている高 DPI 関連の機能を示します。

a. コントロール パネルを使用して DPI を設定する

Windows XP と Windows Vista のどちらでも、高 DPI のディスプレイ設定を変更することができます。Windows XP と Windows Vista で高 DPI を設定する方法については、「付録 A: Windows で高 DPI を設定する」を参照してください。

DPI 設定を変更すると、システム フォントとシステム UI 要素のサイズが変わります。これが、アプリケーションのレンダリングやレイアウトに関するコードでシステム DPI 設定を考慮する必要がある主な理由です。DPI 対応でないアプリケーションでは、フォント サイズにばらつきがある、テキストが切れる、UI 要素が切れるなど、いくつかの視覚的アーティファクトが発生する可能性があります。

b. DPI 仮想化

Windows Vista には、DPI 仮想化と呼ばれる機能が導入されています。この機能は、DPI 対応でないアプリケーションに、ある程度の自動サイズ変更のサポートを提供します。この機能がなければ、高 DPI 設定では、DPI 対応でないアプリケーションのテキストや UI 要素のサイズがシステムの他の部分よりも小さくなることが多く、その結果、ユーザビリティや読みやすさの問題が生じる可能性があります。

この機能では、アプリケーションが 96 DPI で実行されているかのように、"仮想化された" システム メトリックと UI 要素をアプリケーションに提供することでサポートを提供しています。続いて、アプリケーションは 96 DPI で画面表示領域外にレンダリングされ、デスクトップ ウィンドウ マネージャ (DWM) により、表示されるアプリケーション ウィンドウのサイズが DPI 設定に合わせて変更されます。たとえば、ディスプレイの DPI 設定が 144 の場合は、DWM によってアプリケーション ウィンドウのサイズは 150% (144/96 倍) に拡大されます。DPI 仮想化で使用されるサイズ変更は、ピクセルの引き伸ばしに基づくタイプのものです。その結果、引き伸ばされたピクセルが原因でぼやけが発生します。次のスクリーン ショットは、DPI 仮想化によって引き伸ばされたピクセルが原因で発生するタイプの視覚的アーティファクトの一例です。

DPI 仮想化機能の目標は、DPI 対応でないアプリケーションのテキスト サイズを拡大することです。しかし、仮想化インフラストラクチャを使用すると、重大な互換性の問題が発生する場合があります。DPI 仮想化が原因で、アプリケーションを Windows Vista で実行すると問題が発生する場合、ユーザーは、他のアプリケーションに影響を与えることなく、そのアプリケーションでの DPI 仮想化を無効にすることができます。特定のアプリケーションで DPI 仮想化を無効にするには、アプリケーションの実行可能ファイルを右クリックし、[プロパティ] をクリックし、[互換性] タブをクリックし、[高 DPI 設定では画面のスケーリングを無効にする] チェック ボックスをオンにします。

注: ユーザーは、[カスタム DPI 設定] ダイアログ ボックスの [WindowsXP 形式の DPI スケーリングを使用する] チェック ボックスをオンにして、システム規模で DPI 仮想化を無効にすることができます。詳細については、「付録 A: Windows で高 DPI を設定する」を参照してください。

DPI 仮想化の詳細については、Greg Schechter のブログの「High DPI Support in Windows Vista Aero」(英語) という記事を参照してください。 Windows Vista の互換性設定の詳細については、「Windows ヘルプと使い方」の「このバージョンのWindows で古いプログラムを実行する方法」を参照してください。

c. DPI 関連の API

Win32® API には、アプリケーションを DPI 対応にすることができる関数が用意されています。アプリケーションを DPI 対応にすることを宣言する方法については、「DPI 対応であることを宣言する」を参照してください。DPI 対応性に関連するシステム情報やメトリックを取得する方法については、「システム情報を取得する」を参照してください。

ページのトップへ

3. 高 DPI 関連の一般的な問題

システム DPI 設定のチェックが行われず、大きなフォントや UI のサイズに合わせた調整が行われないアプリケーションでは、さまざまな種類の問題が発生する可能性があります。このセクションでは、問題の最も一般的なカテゴリについて説明し、各カテゴリの例を紹介します。高 DPI 関連の問題のカテゴリには、次のようなものがあります。

• UI 要素やテキストが切れる
• フォント サイズが不適切になる
• レイアウトが不適切になる
• UI 要素がぼやける
• テキストやビットマップがピクセル化する
• 座標空間の位置調整が不適切で、入力に影響する
• 全画面表示のアプリケーションが部分的にしかレンダリングされない
• 仮想解像度が間違って使用される

「DPI 互換性を評価する」セクションでは、高 DPI 関連の問題の概要、それぞれの問題の考えられる根本原因、およびそれぞれの問題を解決するために使用できる手法が紹介されています。

a. UI 要素やテキストが切れる

DPI 対応でないアプリケーションでは、UI 要素やテキストが切れる場合があります。次のスクリーン ショットでは、ボタン上の "Print this page" というテキストの下部が切れています。

これは、テキストのサイズが変更されたにもかかわらず、テキストが含まれている他の UI 要素 (リスト ボックス項目やボタンなど) のサイズが変更されないために発生する問題です。この場合、アプリケーションでは、大きなテキストに合わせて UI レイアウトのサイズを変更することができなかったため、テキストが切れています。

UI 要素やテキストが切れるシナリオには、他にも次のようなものがあります。

• テキストやコントロールのサイズが大きくなることにより、UI 要素がアプリケーション ウィンドウに収まらなくなる。
• システム メトリックに応じてアプリケーションのサイズが部分的に変更されるが、全面的には変更されない。たとえば、新しいテキスト フォントに応じてボタンのサイズは変更されるが、ボタンが含まれている子ウィンドウのサイズは大きくならない。

b. フォント サイズが不適切になる

DPI 対応でないアプリケーションでは、表示されるテキストのフォント サイズが不適切になることがよくあります。次のスクリーン ショットでは、アプリケーションの UI のフォント サイズに一貫性がありません。

この種のアーティファクトは、一般に、アプリケーションが不適切にフォントを作成して使用する場合に発生します。Windows アプリケーションでは、さまざまな方法でフォントが作成および使用されます。フォント API には、DPI 設定の変更に応じてアプリケーションのテキストのサイズを動的に変更できるものもあれば、そうでないものもあります。アプリケーションでフォント サイズの表示に一貫性がなくなるのを防ぐには、DPI に依存しない方法でフォントを作成して使用するようにします。フォントを作成および使用する方法の詳細については、「テキストのサイズを変更する」セクションを参照してください。

c. レイアウトが不適切になる

DPI 対応でないアプリケーションでは、レイアウトが不適切になる場合があります。その結果、いくつもの視覚的アーティファクトが発生したり、アプリケーションとの対話に問題が生じたりする場合があります。次のスクリーン ショットでは、UI レイアウトのサイズが変更されず、それが原因で UI 要素が切れており、一部が画面に収まっていない状態を示しています。また、使用できる画面領域は十分あるにもかかわらず、テキストの一部が右端で折り返されていることにも注目してください。

不適切なレイアウトは、多くの場合、システム メトリック (画面サイズなど) の計算間違いによって生じます。特定の UI 要素に関してはシステム メトリックが正しく計算されているが、計算が間違っているものもある、という場合もあります。

不適切なレイアウトの原因として他によくあるのは、低い "有効解像度" での実行です。"有効解像度" とは、物理的な解像度とディスプレイの DPI 設定の両方を考慮して計算した解像度のことです。レイアウトを計算する際は、正しい有効画面解像度を使用することが非常に重要です。有効解像度の詳細については、「最低有効解像度に対処する」を参照してください。

d. UI 要素がぼやける

Windows Vista® でアプリケーション全体がぼやけて見える場合、一般に、その原因は DPI 仮想化です。次のスクリーン ショットでは、ピクセルが引き伸ばされされており、その影響によりぼやけが発生しています。

DPI 仮想化の影響を受けないようにするには、アプリケーションを DPI 対応にします。必要な作業の量を理解するには、「DPI 互換性を評価する」また、最も一般的な DPI 構成でアプリケーションが期待どおりに動作するように、テストに関するガイドラインに従うこともお勧めします。

e. テキストがピクセル化する

アプリケーションで、テキストがピクセル化するがその他の視覚的な不自然さは発生しないという場合があります。テキストのピクセル化は、文字内の斜めの線において最も顕著に現れます。次のスクリーン ショットでは、Name というテキストはピクセル化していますが、Advanced Search というテキストはピクセル化していません。

この種の視覚的アーティファクトをもたらす可能性が最も高いのは、ビットマップ フォントを使用しているアプリケーションです。ビットマップ フォントのテキストを拡大すると、テキストは、より大きなポイント サイズのフォントを使用して再描画されるのではなく、引き伸ばされます。テキストが引き伸ばされると、ピクセル化が発生します。テキストのピクセル化を防ぐには、DPI 対応のアプリケーションで TrueType フォントを使用します。TrueType フォントはベクタ ベースであり、ディスプレイの DPI 設定の変更に応じてより大きなフォント サイズとして適切にサイズ変更されます。

フォントの詳細については、MSDN ライブラリの「About Fonts (英語)」を参照してください。テキストやフォントに関する Win32® API については、MSDN ライブラリの「Using the Font and Text-Output Functions (英語)」を参照してください。

f. ドラッグ アンド ドロップなどの入力に関する問題

DPI 仮想化に伴う軽微な悪影響の 1 つとして、入力に関する問題が発生することがあります。たとえば、スケーリング中にアプリケーションの座標空間がシステムの座標空間に再マップされる際にアプリケーションの座標空間の位置調整が不適切に行われたことが原因で、ドラッグ アンド ドロップ操作が機能しなくなる場合があります。

この問題は、デスクトップ ウィンドウ マネージャによってアプリケーションのサイズが拡大されると、それに起因する変換によってアプリケーションの座標空間がシステムの他の部分と異なるものに変わってしまうために発生しています。アプリケーションがオフセットのシステム座標をどのように使用するかを知ることはできないので、ドラッグ アンド ドロップ座標をある座標空間から別の座標空間に変えることはできません。

DPI 仮想化機能は、DPI 対応でないアプリケーションで、許容可能なレベルのユーザー エクスペリエンスを提供するために導入されました。しかし、アプリケーションに関する問題の中には、座標空間の変更など、DPI 仮想化では解決できないものもあります。

g. 全画面表示のアプリケーションが部分的にしかレンダリングされない

DPI 仮想化に伴う悪影響として、全画面表示のアプリケーションが部分的にしかレンダリングされないという現象が発生することがあります。ほとんどの場合、この現象は全画面表示のゲーム アプリケーションで見られます。こうしたアプリケーションでは、一般に、プログラムによって画面解像度のモード変更を行っているからです。この問題の影響を受けるのは、DPI 対応であることが宣言されていない Windows Vista アプリケーションだけです。問題は、一部のシステム メトリックが仮想化されていることをアプリケーションが考慮に入れていない可能性があるということです。 ゲームのような全画面表示のアプリケーションは、本来、解像度に依存しません。ほとんどの場合、これは、こうしたアプリケーションが本来 DPI にも依存しないということを意味します。この種のアプリケーションに対する推奨解決策は、こうしたアプリケーションが DPI 対応であることを宣言することです。 ウィンドウ モードのインストーラやアンインストーラを使用するアプリケーションもあるので、高 DPI でのアプリケーションの動作全体が適切なものになるように、DPI のテストに関するガイドラインに従ってアプリケーション テスト パスを実行することが重要です。

h. 有効解像度が間違って使用される

多くの場合、アプリケーションには、実行するために最低限必要なディスプレイ解像度というものがあります。たとえば、あるアプリケーションの解像度の最低要件が 1024x768 だとします。実行時に、アプリケーションでは、現在の画面解像度を特定するためにシステムへの照会を行います。画面解像度が最低要件に満たない場合、アプリケーションではユーザーに対して警告を表示します。

高 DPI 設定では、システムはより大きなフォントや UI 要素を使用することになります。そのため、アプリケーションで描画を行う際に、より多くのピクセルが必要になります。その結果、同じ UI をレンダリングするために必要となるピクセルの数が増えるため、有効解像度が低下します。有効解像度を計算するための公式は、"有効解像度 = リアル解像度/(DPI/96)" です。

たとえば、画面解像度が 1200x900 で、DPI 設定が 144 のディスプレイの有効解像度は 800x600 です。144/96 = 150% なので、有効画面面積は 50% 減少するからです。つまり、この設定では、UI やテキストのサイズは、画面解像度が 800x600 で、DPI の設定が 96 のディスプレイで実行している場合とほぼ同じだということです。有効解像度の詳細については、「最低有効解像度に対処する」を参照してください。

ページのトップへ

4. DPI 互換性を評価する

DPI 互換性を評価するには、次の 3 つの手順が必要です。

1. 高 DPI 関連の一般的な問題をよく理解します。
2. 推奨される高 DPI のディスプレイ設定と解像度でアプリケーションをテストします。
3. 「高 DPI 関連の問題に対処する」で説明されている手法を使用して、DPI 関連の問題に対処します。

a. 高 DPI 関連の問題のチェックリスト

次の表に、DPI 関連の主な問題とその最も一般的な原因および解決策を示します。

b. DPI 互換性をテストする

アプリケーションの DPI 互換性を評価するには、さまざまな解像度と高 DPI 設定の組み合わせでアプリケーションをテストする必要があります。また、Vista には XP に用意されていない DPI 関連の機能があるので、テストは Vista で行うことをお勧めします。

次の表に、テストで使用することをお勧めする DPI 設定と最低解像度を示します。

*注: 192 DPI というディスプレイ設定でのテストは必須ではありませんが、この設定でテストを行うと、アプリケーションがどの程度 "未来を保証された" ものになっているかを確認することができます。Windows Vista アプリケーションの場合、少なくとも 144 DPI 以下の構成で見つかった問題については、解決することをお勧めします。

こうした問題をバグ追跡システムに記録する際は、以下のデータ項目も記録しておくと、役に立つことがよくあります。

• 視覚的アーティファクトのスクリーン ショット
• DPI 構成 (DPI 仮想化が有効になっているかどうかを含む)
• 問題を再現する際に使用した画面解像度

このような情報を開発者が利用できるようにしておくと、問題を特定し、それに応じた修正をより容易に行うのに役立ちます。

c. ステップ バイ ステップ ガイド

以下の手順は、DPI 互換性に関する問題を修正し、アプリケーションが DPI 対応であることを宣言する方法を示しています。

ページのトップへ

5. 高 DPI 関連の問題に対処する

アプリケーションにおける高 DPI 関連の問題を解決するために使用できる手法はいくつかあります。このような手法には、次のようなものがあります。

• DPI 対応であることを宣言する
• システム メトリックの情報を使用してレイアウトを計算する
• DPI スケール率を求める
• テキストのサイズを変更する
• グラフィックのサイズを変更する
• レイアウトのサイズを変更する
• 最低有効解像度に対処する

a. DPI 対応であることを宣言する

アプリケーションが DPI 対応であることを宣言するというのは、アプリケーションが 200 DPI 以下の DPI 設定で適切に動作することを明示することです。Windows® XP では、DPI 対応性はアプリケーションやオペレーティング システムに影響を与えません。DPI 対応性が意味を持つのは、Windows Vista® だけです。Windows Vista では、DPI 仮想化が有効になっていると、DPI 対応でないアプリケーションのサイズが変更され、アプリケーションは仮想化されたデータを GetSystemMetric 関数などのシステム API から受け取ります。

注: 既定では、DPI 仮想化機能が有効になるのは、ディスプレイの DPI 設定が 144 以上の場合のみです。

Win32® API には、アプリケーションが DPI 対応であることを宣言する関数が用意されていますが、非常に特殊な状況を除いては、この関数の使用は推奨されていません。詳細については、「SetProcessDPIAware 関数」を参照してください。一般に、アプリケーションが DPI 対応であることを宣言する方法としては、アプリケーション マニフェストの使用をお勧めします。

<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0"

 xmlns:asmv3="urn:schemas-microsoft-com:asm.v3" >

  <asmv3:application>

    <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">

      <dpiAware>true</dpiAware>

    </asmv3:windowsSettings>

  </asmv3:application>

</assembly>

ページのトップへ

b. システム情報を取得する

次の Win32 API 関数は、現在のディスプレイ設定に関する情報を取得するのに役立ちます。

• GetDeviceCaps (英語): 指定されたデバイスに関するデバイス固有の情報を取得します。
• GetSystemMetrics (英語): 指定されたメトリックまたはシステムの構成設定を取得します。
• SystemParametersInfo (英語): システム規模のパラメータいずれかの値を取得または設定します。

// CDPI::_Init() より抜粋

HDC hdc = GetDC(NULL);

if (hdc)

{

    _dpiX = GetDeviceCaps(hdc, LOGPIXELSX);

    _dpiY = GetDeviceCaps(hdc, LOGPIXELSY);

    ReleaseDC(NULL, hdc);

}



// サンプル クラス CDPI を使用

CDPI g_metrics;



int dpiX = g_metrics.GetDPIX();

int dpiY = g_metrics.GetDPIY();

// 現在のディスプレイ設定における、水平方向および垂直方向の解像度を取得します。

int cxScreen = GetSystemMetrics(SM_CXSCREEN);

int cyScreen = GetSystemMetrics(SM_CYSCREEN);

CDPI g_metrics;

int cxScreen = g_metrics.ScaledScreenWidth();

int cyScreen = g_metrics.ScaledScreenHeight();

int g_ucScrollLines;



// マウス ホイールを上下に動かした際のスクロール行数を取得します。

SystemParametersInfo(SPI_GETWHEELSCROLLLINES, 0, &g_ucScrollLines, 0);

ページのトップへ

c. DPI スケール率を求める

アプリケーションを DPI 対応のアプリケーションとして定義する場合、高 DPI 設定でアプリケーションのサイズを適切に変更する必要があります。サイズ変更を適切に行うには、相対的な DPI スケール率を求める必要があります。この値を求める際には、基準となる設定として 96 DPI が使用されます。次のコード例は、DPI スケール率を求める方法を示しています。

int ScaleX(int x) { _Init(); return MulDiv(x, _dpiX, 96); }

int ScaleY(int y) { _Init(); return MulDiv(y, _dpiY, 96); }



// CDPI クラスを使用した例

int cxScaledWidth = g_metrics.ScaleX(100);

相対的な DPI スケール率を求めたら、アプリケーションでフォントの選択、イメージの読み込み、および UI 要素のレイアウトを行う際に、そのスケール率を適用する必要があります。

ページのトップへ

d. テキストのサイズを変更する

テキストのサイズ変更は、アプリケーションを DPI 対応にするために不可欠です。テキストのサイズを適切に変更するための推奨事項を以下にいくつか示します。

• 既定の Windows フォントや DC フォントはビットマップ フォントであり適切にサイズ変更されないので、使用しません。代わりに、TrueType フォントを使用します。
• ピクセル サイズに基づくカスタム フォントでは、DPI スケール率を利用する必要があります。
• さまざまな高 DPI 設定で UI レイアウトやテキストが適切にサイズ変更されることを確認します。

注: アプリケーションで使用されているのが TrueType フォント (.ttf) かどうか定かでない場合は、コントロール パネルにあるフォント定義ファイルを調べます (ファイルを右クリックし、それが .ttf ファイルかどうか確認します)。

// CDPI より抜粋: ポイント サイズ (1/72 インチ) を絶対ピクセルに変換します。

int PointsToPixels(int pt) { return MulDiv(pt, _dpiY, 72); }



LOGFONT lf;

lf.lfHeight = -g_metrics.PointsToPixels(12);

// 構造体の残りのメンバに値を設定します。

HFONT hfont = CreateFontIndirect(&lf);

static const TCHAR szString[] = TEXT("TEST");



// 指定された文字列の幅と高さを取得します。

SIZE size;

GetTextExtentPoint32(hdc, szString, lstrlen(szString), &size);



// サイズ変更された四角形を計算します。

RECT rcText;

SetRect(&rcText, 10, 10, 10 + size.cx, 10 + size.cy);

g_metrics.ScaleRect(&rcText);



// テキストを囲む四角形に基づいて枠線を計算します。

RECT rcBorder = rcText;

InflateRect(&rcBorder, g_metrics.ScaleX(4), g_metrics.ScaleY(4));



// (DPI スケール率に応じて調整された) 四角形を文字列の周りに描画します。

Rectangle(hdc, rcBorder.left, rcBorder.top, rcBorder.right, rcBorder.bottom);



// 四角形の中に文字列を描画します。

TextOut(hdc, rcText.left, rcText.top, szString, lstrlen(szString));

#include "commdlg.h"



CHOOSEFONT data = { sizeof(data) };

data.hwndOwner = hWnd;

// [フォント] ダイアログ ボックス内の一覧に TrueType のスクリーン フォントのみを表示します。

data.Flags = CF_TTONLY | CF_SCREENFONTS;

ChooseFont(&data);

HTHEME hTheme = OpenThemeData(hWnd, VSCLASS_TEXTSTYLE);

if (hTheme)

{

    DrawThemeText(hTheme, hdc, TEXT_BODYTEXT, 0, szText, -1, DT_SINGLELINE,0,&rcText);

    CloseThemeData(hTheme);

}

else

{

    // 視覚スタイルが有効になっていない場合

    DrawText(hdc, szText, -1, &rcText, DT_SINGLELINE);

}

ページのトップへ

e. グラフィックのサイズを変更する

グラフィックのサイズ変更がうまく行われないアプリケーションは、ユーザーにとっての視覚的魅力に欠けます。高 DPI のディスプレイ設定で UI の見栄えをよりよくするために、イメージ、ビットマップ、アイコン、ツール バーなどの主要な全グラフィック コンテンツに対して独自のサイズ変更機能を提供することをご検討ください。アプリケーションでグラフィックのサイズを変更する手法はたくさんありますが、さまざまな高 DPI のディスプレイ設定でグラフィックのサイズを変更するのに適した主な手法は 2 つあります。この 2 つの手法とは、複数解像度のサポート、およびふさわしいものに最も近いものを使うという手法です。

int destRectHeight = 20;

int destRectWidth = 20; 

int xStart = 40;

int yStart = 85; 

// この例では、96、120、144、192 という 4 つのバージョンのビットマップがあります。

// これらのビットマップのサイズは 20x20、25x25、30x30、40x40 で、

// それぞれ 96 DPI、120 DPI、144 DPI、192 DPI に対応します。



// GetDeviceCaps(hDC, LOGPIXELSX) を通じて既に設定されたグローバルな gDPI があるとします。

// まずは読み込むソース イメージを特定します。

int iSourceImageDPIToUse = 96; // 既定では 96 を想定します。



if (gDPI > 144) 

iSourceImageDPIToUse = 192;

else if (gDPI > 120) 

iSourceImageDPIToUse = 144;

else if (gDPI > 96) 

iSourceImageDPIToUse = 120;



LPCTSTR pBitmapResourceName = NULL;



// 読み込むのに適したリソースを選択します。

switch(iSourceImageDPIToUse)

{

    case 120: 

        pBitmapResourceName = MAKEINTRESOURCE(MY_RESOURCE_120DPI);

        break;

    case 144: 

        pBitmapResourceName = MAKEINTRESOURCE(MY_RESOURCE_144DPI);

        break;

    case 192: 

        pBitmapResourceName = MAKEINTRESOURCE(MY_RESOURCE_192DPI);

        break;						

    default: // 既定値の 96 DPI に設定します。

        pBitmapResourceName = MAKEINTRESOURCE(MY_RESOURCE_96DPI);

        break;

}// 適切なリソースを読み込みます。

HBITMAP hbmImage = (HBITMAP)LoadImage(hinst,

pBitmapResourceName, IMAGE_BITMAP, 0, 0, LR_DEFAULTCOLOR);

		

// 伸縮モードを設定します。hdcDest は表示先への DC ハンドルとします。

SetStretchBltMode(hdcDest, HALFTONE);



// hdcTargetWindow はビットマップの表示先となるウィンドウとします。

HDC hdcBitmap = CreateCompatibleDC(hDCDest);

HBITMAP hbmOld = (HBITMAP)SelectObject(hdcBitmap, hbmImage);

		

BITMAP bitmap;

GetObject(hbmImage, sizeof(bitmap), &bitmap);



// 変更された表示先サイズに合わせて拡大または縮小されたイメージを StretchBlt に渡します。

// DPI に基づいてレイアウトを変更する必要がある場合、x と y を調整する必要があるかもしれません。

// destRectWidth と destRectHeight はレイアウトの 96 DPI (既定の) サイズです。

// 注: 質を高めるには、GDI+ または WIC を質の高いスケール フィルタと共に使用します。

	

StretchBlt(hdcDest, g_metrics.ScaleX(xStart), g_metrics.ScaleY(yStart), 

g_metrics.ScaleX(destRectWidth), g_metrics.ScaleY(destRectHeight), 

hdcBitmap, 0, 0, bitmap.bmWidth, bitmap.bmHeight, SRCCOPY);	



	



// ハンドルは使い終わったら忘れずに削除します。

SelectObject(hdcBitmap, hbmOld);

DeleteDC(hdcBitmap);

DeleteObject(hbmImage);

ページのトップへ

f. レイアウトのサイズを変更する

多くのアプリケーション ウィンドウやダイアログ ボックスは、リソース ファイルで定義されたレイアウトに基づいて作成されています。リソース ファイルでは、DPI に依存しない論理単位でレイアウトが指定されます。一般に、このようなウィンドウを DPI 対応にするために特別な作業は必要ありません。

しかし、プログラムでカスタムの UI 要素を作成してレイアウトしなければならない場合があります。このような場合は、ウィンドウ全体のサイズを選択する際にも、また、各 UI 要素をウィンドウ内のどの位置にレイアウトするかを決める際にも、DPI を考慮に入れることが重要です。アプリケーションの次のコード例では、メイン ウィンドウと 3 つのボタンが作成されています。WM_PAINT メッセージ ハンドラ内では、画面へのテキストの描画も行われています。

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)

{

   static TCHAR szButton1Text[] = TEXT("Button 1");

   static TCHAR szButton2Text[] = TEXT("Button 2");

   static TCHAR szButton3Text[] = TEXT("Button 3");



   HWND hwndMainWindow;



   hInst = hInstance; // インスタンス ハンドルをグローバル変数に格納します。



   hwndMainWindow = CreateWindow(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,

      CW_USEDEFAULT, 0, 420, 200, NULL, NULL, hInstance, NULL);



   if (!hwndMainWindow) return FALSE;



      

   if (!CreateMyButton(10, 55, 60, 26, szButton1Text, hwndMainWindow, hInstance)) return FALSE;

   if (!CreateMyButton(85, 55, 60, 26, szButton2Text, hwndMainWindow, hInstance)) return FALSE;

   if (!CreateMyButton(160, 55, 60, 26, szButton3Text, hwndMainWindow, hInstance)) return FALSE;

   

   ShowWindow(hwndMainWindow, nCmdShow);

   UpdateWindow(hwndMainWindow);



   return TRUE;

}





// ボタンを作成するためのヘルパ関数です。

HWND CreateMyButton(int x, int y, int nWidth, int nHeight, LPCTSTR      

szButtonText, HWND hWndParent, HINSTANCE hInstance)

{

   DWORD dwFlags = WS_TABSTOP | WS_VISIBLE | WS_CHILD | BS_DEFPUSHBUTTON;

   HWND hwndButton = CreateWindow(L"BUTTON",szButtonText,

dwFlags, x, y, nWidth, nHeight,hWndParent,NULL, hInstance, NULL);

   return hwndButton ;

}



// WM_PAINT ハンドラからの抜粋です。

case WM_PAINT:

	hdc = BeginPaint(hWnd, &ps);		

	TextOut(hdc,8,8,szText,lstrlen(szText));

	EndPaint(hWnd, &ps);

	break;

次のスクリーン ショットは、上記のコード例のアプリケーションが 96 DPI のディスプレイ設定で表示されているようすを示しています。

この例では、アプリケーションの UI に視覚的アーティファクトは発生していません。96 DPI で適切に表示されるようにレイアウト座標が計算されているからです。すべての UI 要素は、アプリケーションのクライアント領域の左上隅を基準とする座標を使用して描画されます。

では、アプリケーションで、他のコンテンツを基準とするコンテンツをレイアウトする場合はどうなるでしょうか。たとえば、[Button 2] は [Button 1] よりも x ピクセル右にあります。DPI 仮想化を無効にして 144 DPI のディスプレイ設定でこの例を実行すると (これにより、DPI 対応にすることを宣言されているアプリケーションがシミュレートされます)、次のスクリーン ショットに示すように、いくつかの視覚的アーティファクトが発生します。

以下に示すように、このスクリーン ショットでは UI 関連の問題がいくつか見受けられます。

• 現在の DPI 設定に合わせてアプリケーションのサイズが変更されていないので、ウィンドウ枠のサイズが変更されていません。
• テキストのサイズは適切に変更されていますが、枠のサイズが変更されていないため、テキストが切れています。
• ボタンのテキストは適切にサイズ変更されていますが、ボタンのサイズは適切に変更されていないため、テキストが切れています。

こうした問題はどれも、アプリケーション レイアウトのサイズ変更が適切に行われていないことの表れです。この場合、ウィンドウ全体のサイズ、およびコントロール間のスペースを変更する必要があります。

// これは前述のサイズ変更ヘルパ関数です。

CDPI g_metrics;



// これは変更が加えられた InitInstance のコードです。変更された箇所は太字になっています。

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)

{

   static TCHAR szButton1Text[] = TEXT("Button 1");

   static TCHAR szButton2Text[] = TEXT("Button 2");

   static TCHAR szButton3Text[] = TEXT("Button 3");



   HWND hwndMainWindow;



   hInst = hInstance; // インスタンス ハンドルをグローバル変数に格納します。



hwndMainWindow = CreateWindow(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,

      CW_USEDEFAULT, 0, g_metrics.ScaleX(420), g_metrics.ScaleY(200), NULL, NULL, hInstance, NULL);



   if (!hwndMainWindow) return FALSE;



   if (!CreateMyButton(10, 55, 60, 26, szButton1Text, hwndMainWindow, hInstance)) return FALSE;

   if (!CreateMyButton(85, 55, 60, 26, szButton2Text, hwndMainWindow, hInstance)) return FALSE;

   if (!CreateMyButton(160, 55, 60, 26, szButton3Text, hwndMainWindow, hInstance)) return FALSE;

         

   ShowWindow(hwndMainWindow, nCmdShow);

   UpdateWindow(hwndMainWindow);



   return TRUE;

}



HWND CreateMyButton(int x, int y, int nWidth, int nHeight, LPCTSTR szButtonText, 

HWND hWndParent, HINSTANCE hInstance)

{

   HWND hwndButton = NULL;

   DWORD dwFlags = WS_TABSTOP | WS_VISIBLE | WS_CHILD | BS_DEFPUSHBUTTON;

   hwndButton = CreateWindow(L"BUTTON",szButtonText,dwFlags, 

       g_metrics.ScaleX(x), g_metrics.ScaleY(y), 

       g_metrics.ScaleX(nWidth), g_metrics.ScaleY(nHeight)

       ,hWndParent,NULL, hInstance, NULL);

   return hwndButton ;

}



#include <uxtheme.h>

#include <vsstyle.h>

#pragma comment(lib, "uxtheme.lib")

…



    case WM_PAINT:

        {

            hdc = BeginPaint(hWnd, &ps);		

            if (hdc)

            {

                RECT rcText;

                GetClientRect(hWnd, &rcText);

                OffsetRect(&rcText, g_metrics.ScaleX(8), g_metrics.ScaleY(8));



                HTHEME hTheme = OpenThemeData(hWnd, VSCLASS_TEXTSTYLE);

                if (hTheme)

                {

                    DrawThemeText(hTheme, hdc, TEXT_BODYTEXT, 0, szText, -1, DT_SINGLELINE,

                        0, &rcText);

                    CloseThemeData(hTheme);

                }

                else

                {

                    // 視覚スタイルが有効になっていない場合

                    DrawText(hdc, szText, -1, &rcText, DT_SINGLELINE);

                }

                EndPaint(hWnd, &ps);

            }

        }

        break;

ページのトップへ

g. 最低有効解像度に対処する

一部のアプリケーションでは、最低限必要な解像度 (800x600、1024x768 など) が決まっています。高 DPI 設定では、より多くのピクセルを使用してテキストや UI 要素がレンダリングされます。これにより、アプリケーションで使用できる画面面積が少なくなります。そのため、アプリケーションでは、物理的な解像度ではなく有効解像度を検知する必要があります。

たとえば、120 DPI で物理的な画面解像度が 1280x1024 で実行されているアプリケーションがある場合、そのアプリケーションの有効解像度は 1024x819 です。この場合、有効解像度は物理的な解像度よりも 20% 低くなります。

アプリケーションで警告メッセージやエラー メッセージを表示する際には、使用できる画面面積をより広くするために考えられる対応策として、画面解像度と DPI 設定の両方をユーザーに伝える必要があります。次のコード例は、有効画面解像度を実行時に検知する方法を示しています。

CDPI g_metrics;

    // 処理を続行する前に、有効解像度が最低限必要な値を満たしていることを確認します。

    if (!g_metrics.IsResolutionAtLeast(800, 600))

    {

        if (MessageBox(NULL, 

            L"Effective screen resolution must be at least 800x600. 

It is recommended that you either increase your screen resolution setting or 

reduce your DPI scaling setting.  Continue?", 

            L"Warning", 

            MB_YESNO | MB_ICONWARNING)

            == IDNO)

        {

            return FALSE;

        }

    }

ページのトップへ

6. まとめ

Windows® XP や Windows Vista® で実行する DPI 対応の Win32® アプリケーションを記述するのは、それほど複雑なことではありません。DPI 関連の機能、高 DPI 関連の問題、および適切な DPI 評価戦略についての知識があれば、一貫して視覚的に魅力のある UI を実現することは可能です。

ページのトップへ

7. 詳細情報

• Creating a DPI-Aware Application (英語)
• ppi
• 高 DPI アプリケーションの記述方法
• DPI-aware applications in Windows Vista (英語)
• Windows Vista DPI scaling: my Vista is bigger than your Vista (英語)
• What are SYSTEM_FONT and DEFAULT_GUI_FONT? (英語)
• Windows Vista User Experience Guidelines (英語)

ページのトップへ

8. 付録 A: Windows で高 DPI を設定する

以下のトピックでは、Windows® XP と Windows Vista® で DPI 設定を変更する方法を説明します。

a. Windows XP で高 DPI を設定する

Windows® XP で DPI 設定を変更するには

1. Windows デスクトップを右クリックし、[プロパティ] をクリックします。
2. [設定] タブをクリックし、[詳細設定] をクリックします。
3. [全般] タブで、[DPI 設定] ボックスの一覧の [大きなサイズ (120 DPI)] をクリックします。
4. 変更が適用された状態を確認するには、すべてのプログラムを終了して Windows を再起動します。

Windows XP でカスタム DPI 設定を設定するには

1. Windows デスクトップを右クリックし、[プロパティ] をクリックします。
2. [設定] タブをクリックし、[詳細設定] をクリックします。
3. [全般] タブで、[DPI 設定] ボックスの一覧の [カスタム設定] をクリックします。
4. [カスタム DPI 設定] ダイアログ ボックスの [標準サイズに対してこの割合で大きさを変える] ボックスにお望みの割合を入力し、[OK] をクリックします。
5. 変更が適用された状態を確認するには、すべてのプログラムを終了して Windows を再起動します。

ページのトップへ

b. Windows Vista で高 DPI を設定する

ここでは、Windows Vista® で DPI 設定を変更する方法と DPI 設定をカスタマイズする方法を説明します。

Windows Vista で DPI 設定を変更するには

1. [スタート] メニューで、[コントロール パネル]、[デスクトップのカスタマイズ]、[個人設定] の順にクリックします。次のスクリーン ショットに示すように、個人設定画面が表示されます。
   
2. 左ペインの [フォント サイズ (DPI) の調整] をクリックします。管理者パスワードの入力を求められた場合は、パスワードを入力します。また、処理を続行してよいか確認するメッセージが表示された場合は、続行を許可します。
3. 次のスクリーン ショットに示す [DPI スケール] ダイアログ ボックスで、次のいずれかの操作を行います。
   • 画面上の項目 (テキストなど) のサイズを大きくするには、[大きなスケール (120 DPI) - 読みやすいテキスト] をクリックし、[OK] をクリックします。
   • 画面上の項目 (テキストなど) のサイズを小さくするには、[既定のスケール (96 DPI) - より多くの情報] をクリックし、[OK] をクリックします。
   
4. 変更が適用された状態を確認するには、すべてのプログラムを終了して Windows を再起動します。

Windows Vista でカスタム DPI 設定を設定するには

1. [スタート] メニューで、[コントロール パネル]、[デスクトップのカスタマイズ]、[個人設定] の順にクリックします。個人設定ウィンドウが表示されます。
2. 左ペインの [フォント サイズ (DPI) の調整] をクリックします。管理者パスワードの入力を求められた場合は、パスワードを入力します。また、処理を続行してよいか確認するメッセージが表示された場合は、続行を許可します。
3. [DPI スケール] ダイアログ ボックスで [カスタム DPI] をクリックすると、次のスクリーン ショットに示すような [カスタム DPI 設定] ダイアログ ボックスが表示されます。
   
4. [標準サイズに対してこの割合で大きさを変える] ボックスにお望みの割合を入力し、[OK] をクリックします。この場合、既定値である 96 DPI の 150% は 144 DPIに相当します。[Windows XP 形式の DPI スケーリングを使用する] というチェック ボックスに注目してください。このチェック ボックスをオンにすると、DPI 仮想化が無効になります。
5. 変更が適用された状態を確認するには、すべてのプログラムを終了して Windows を再起動します。

ページのトップへ

9. 付録 B: DPI サンプル コード

次のコード例は、CDPI という名前の C++ クラスを示しています。このクラスは、いくつかの一般的な高 DPI 関連機能を提供します。これには、システム DPI 設定を確認する機能、論理ピクセル値を物理ピクセル サイズに対応するようにサイズ変更する機能、有効画面解像度を確認する機能などがあります。

// 定義: 相対ピクセル = 96 DPI の場合を 1 ピクセルとして実際の DPI に基づいてサイズ変更されます。

class CDPI

{

public:

    CDPI() : _fInitialized(false), _dpiX(96), _dpiY(96) { }

    

    // 画面の DPI を取得します。

    int GetDPIX() { _Init(); return _dpiX; }

    int GetDPIY() { _Init(); return _dpiY; }



    // 絶対ピクセルと相対ピクセル間の変換を行います。

    int ScaleX(int x) { _Init(); return MulDiv(x, _dpiX, 96); }

    int ScaleY(int y) { _Init(); return MulDiv(y, _dpiY, 96); }

    int UnscaleX(int x) { _Init(); return MulDiv(x, 96, _dpiX); }

    int UnscaleY(int y) { _Init(); return MulDiv(y, 96, _dpiY); }



    // 画面サイズ (相対ピクセル単位) を求めます。

    int ScaledScreenWidth() { return _ScaledSystemMetricX(SM_CXSCREEN); }

    int ScaledScreenHeight() { return _ScaledSystemMetricY(SM_CYSCREEN); }



    // 四角形のサイズを絶対ピクセルから相対ピクセルに変更します。

    void ScaleRect(__inout RECT *pRect)

    {

        pRect->left = ScaleX(pRect->left);

        pRect->right = ScaleX(pRect->right);

        pRect->top = ScaleY(pRect->top);

        pRect->bottom = ScaleY(pRect->bottom);

    }

    // 画面解像度が最低値 (相対ピクセル単位) を満たしているかどうかを

    // 確認します。

    bool IsResolutionAtLeast(int cxMin, int cyMin) 

    { 

        return (ScaledScreenWidth() >= cxMin) && (ScaledScreenHeight() >= cyMin); 

    }



    // ポイント サイズ (1/72 インチ) を絶対ピクセルに変換します。

    int PointsToPixels(int pt) { return MulDiv(pt, _dpiY, 72); }



    // キャッシュされたメトリックをすべて無効にします。

    void Invalidate() { _fInitialized = false; }



private:

    void _Init()

    {

        if (!_fInitialized)

        {

            HDC hdc = GetDC(NULL);

            if (hdc)

            {

                _dpiX = GetDeviceCaps(hdc, LOGPIXELSX);

                _dpiY = GetDeviceCaps(hdc, LOGPIXELSY);

                ReleaseDC(NULL, hdc);

            }

            _fInitialized = true;

        }

    }



    int _ScaledSystemMetricX(int nIndex) 

    { 

        _Init(); 

        return MulDiv(GetSystemMetrics(nIndex), 96, _dpiX); 

    }



    int _ScaledSystemMetricY(int nIndex) 

    { 

        _Init(); 

        return MulDiv(GetSystemMetrics(nIndex), 96, _dpiY); 

    }

private:

    bool _fInitialized;



    int _dpiX;

    int _dpiY;

};

ページのトップへ

10. 付録 C: 最適な DPI 構成の例

次の表は、いくつかの一般的なディスプレイの DPI 特性を一覧にしたものです。パネル DPI は、パネルのネイティブなピクセル密度を示します。一方、OS DPI は、ディスプレイを標準の設定に対応させるために使用する、最も近い OS DPI の値を示します。

次の表は、ユーザーが適切な高 DPI 設定を使用した場合にピクセルの忠実度がどの程度向上するかを示しています。"最適な設定" 列に記載されている構成を使用すると、適切に動作しているアプリケーションは、"現在のユーザー設定" 列に記載されている構成とほぼ同じ物理サイズでレンダリングされます。