高解像度画面で使いやすくするには？

元々、物理的な大きさに制約のあるノートPCなどでは、モニターの解像度が高くなればなるほど、文字は小さくなり、少なくとも私にとっては「使いやすい」とは言い難い環境になります。

高解像度画面での表示例（2880×1920）
私には、文字が小さすぎて詠めません！


この Blog の過去記事で紹介しているデジタル採点関連のアプリケーションは、横1366 × 縦 768 のディスプレイ解像度での利用を前提に開発しておりますので、高解像度環境で使用される場合には、以下の方法で GUI が適切な大きさで表示されるよう、高 DPI 設定を変更してからお使いいただけますよう、お願い申し上げます。

【もくじ】

１．高 DPI 設定の変更方法 その１（exe のプロパティを表示）
２．高 DPI 設定の変更方法 その２（高DPI設定を変更）
３．高 DPI 設定の変更方法 その３（アプリケーションを起動して確認）
４．補足（ DPI 非依存の設計でも発生する問題と対応方法）
５．お願いとお断り

１．高 DPI 設定の変更方法 その１（exe のプロパティを表示）

拡張子が exe の実行形式ファイルを右クリックすると表示されるサブメニューから、プロパティを選んでクリックしてください。

プロパティをクリックします。


お使いの PC の設定によっては、ファイルの拡張子が表示されない場合もあると思います。その場合は、エクスプローラーの画面上部にある「表示」をクリックすると表示されるサブメニューのいちばん下にある「表示」をクリック（ or ポイント）し、横に表示されるサブメニューの「ファイル名拡張子」をクリックしてチェックマークを付けると拡張子が表示されます。

青い枠内をクリックすると図のように「大きい縮小版を使って項目を表示」する設定になります。

２．高 DPI 設定の変更方法 その２（高DPI設定を変更）

プロパティの画面が表示されたら、上部のタブの左から２番目にある「互換性」タブをクリックし、表示された画面の「設定」グループにある「高 DPI 設定の変更」ボタンをクリックします。


「〇〇〇.exe の高 DPI 設定」というタイトルの画面が表示されたら、画面下部の「高 DPI スケール設定の上書き」グループの「高い DPI スケールの動作を上書きします。」のチェックボックスをクリックしてチェックし、さらに、その下の「拡大縮小の実行元:」のコンボボックスの選択肢から「システム」をクリックして選択してください。

最初に「チェック」を入れ、次に「選択」の順です。


画面は、次の状態になります。「OK」ボタンをクリックしてください。

「OK」をクリックして、この画面を閉じます。


元の画面が表示されますので、

「適用」ボタンをクリックしてから、
「OK」ボタンをクリックしてください。

３．高 DPI 設定の変更方法 その３（アプリケーションを起動して確認）

高 DPI 設定の変更がアプリケーションに適用されたことを、実際にアプリケーションを起動して確認してください。

高解像度画面（ 2880 × 1920 ）で、「高 DPI 設定の変更」を行った場合の表示例。
「高 DPI 設定の変更」を行わない場合には読めなかった文字が読めるようになりました！


解像度 1366 × 768 での表示例です。上の高解像度での表示に比べ、縦・横とも狭くなっていますが、表示内容は同じです。

AC_Reader は、解像度 1366 × 768 での使用を前提に開発＆動作確認を行っています。

４．補足（ DPI 非依存の設計でも発生する問題と対応方法）

この解説を書いていて、初めて気がついたのですが、Form の Scaled プロパティを False に設定し、さらに、アプリケーション全体がDPIスケーリングを無視する（ DPI 非依存の設計となる）ように .dpr ファイルを開き※１、Application.Initialize の前に SetProcessDPIAware 関数呼び出し※２ を記述して、実行形式ファイル（ exe ）を作成した場合でも、画面表示方法の設定によっては表示の一部が読めなくなる等の問題が発生することがわかりました。

※１ Delphi IDE の「プロジェクト」メニューから「ソースの表示」を選択すると編集可能になります。
※２ uses に Winapi.Windows が必要なので追加します。

SetProcessDPIAware 関数とは？

Windowsでは、画面の解像度や物理サイズに応じて、UIを自動的に拡大・縮小する「DPIスケーリング」が行われます。
SetProcessDPIAware 関数は、Windows APIの関数で、「このアプリケーションはDPIスケーリングを自分で管理するから、OS側で勝手に拡大・縮小しないでください」と宣言するために使用します。

Delphiでアプリケーション設計時に Form の Scaled プロパティを False に設定していても（デフォルト設定はなぜか True になっているため）、OSがスケーリングを行うと、「ボタンやラベルの位置がズレる・アイコンがぼやける・マウス座標が合わない・描画が乱れる（特に Panel や Canvas）」といった問題が発生します。

SetProcessDPIAware 関数を使うことで、Windowsはスケーリングを一切行わなくなりますので、アプリケーションの描画はピクセル単位で正確に行われるようになり、Delphi側で設計した通りのサイズ・位置・座標が保たれます。

･･･と、思っていたのですが実際にはそうでもないようです（私の知識不足による間違いかもしれません）。

以下、上記の内容を加えた .dpr ファイルです。

program AC_Reader;

{$R *.dres}

uses
  {$IFDEF EurekaLog}
  {$ENDIF EurekaLog}
  Vcl.Forms,
  Unit03_JPEGConvert in 'Unit03_JPEGConvert.pas' {FormConvert},
  Vcl.Themes,
  Vcl.Styles,
  Winapi.Windows,  //SetProcessDPIAware を使うために追加
  UnitSplash in 'UnitSplash.pas' {SplashForm},
  UnitCollaboration in 'UnitCollaboration.pas' {FormCollaboration},
  UnitNoExcel in 'UnitNoExcel.pas' {frmNoExcel};

{$R *.res}

begin
  SetProcessDPIAware;  //DPIスケーリングを自分で管理する（ DPI非依存の設計にする）
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
  Application.CreateForm(TFormCollaboration, FormCollaboration);
  Application.Run;
end.

上の内容でコンパイルして作成したアプリケーションを、実際に高解像度画面（ 2880 × 1920 ）で実行して確認すると･･･（「高 DPI 設定の変更」なし・「ディスプレイの拡大縮小」は 100 ％ とした場合です）

TPanel 上に作成した GUI の文字が大きく表示されています。


画面全体では･･･

文字が小さすぎて、私には読めませんが「表示が乱れている」ことは、なんとなくわかります･･･


右上部分を拡大すると･･･

CheckBox のキャプションが大きく表示され、読めなくなっています。


アプリケーション設計時に Form の Scaled プロパティを False に設定し、SetProcessDPIAware 関数を dpr ファイルに記述しても、実行時の設定が「高 DPI 設定の変更」なし・ディスプレイの拡大縮小 100 ％であった場合に生じるこの問題への正しい対応方法はまったくわかりません（正直に言って、この解像度で GUI を再作成するしかないのではないか？と思いました）。現在、私にある知識と技術で対応可能な限界が見えたように思います。

ただ、この記事でご紹介した上記１～３の手順で「高 DPI 設定の変更」を行って、「高い DPI スケールの動作を上書きします。」のチェックボックスをチェックし、さらに「拡大縮小の実行元:」で「システム」を設定すれば、解像度（ 1366 × 768 ）で設計した通りの画面が表示されるようになりました（下図）。ですので、これがこの問題への「正しい対応方法（？）」なのかもしれません。

高解像度画面（ 2880 × 1920 ）で、「高 DPI 設定の変更」を行った場合の表示例


画面の右側部分を拡大すると･･･

設計通りの画面表示となり、作業するのに特に支障はなさそうです。


以上の理由から、高解像度モニター（ 2880 × 1920 など）を使用して、当 Blog の過去記事でご紹介したアプリケーションを実行される場合には、大変お手数をおかけし、恐縮ですが、アプリケーションを実行される前に、この記事でご紹介した「高 DPI 設定の変更」を必ず行っていただけますよう、お願い申し上げます。

５．お願いとお断り

このサイトの内容を利用される場合は、自己責任でお願いします。記載した内容（プログラムを含む）を利用した結果、利用者および第三者に損害が発生したとしても、このサイトの管理者は一切責任を負えません。予め、ご了承ください。