Delphi、C++Builder、およびRAD Studio 11 Alexandriaでは、非常に素晴らしい改善点があり、IDEは高解像度画面での高DPIスケーリングを完全にサポートしています。つまり、Windowsで4K以上の高解像度ディスプレイを使用している場合、IDEは画面上で「はっきり、くっきり」と表示されます。実際、スケールが異なる2つの画面がある場合、それらの複数のディスプレイに異なるIDEウィンドウを配置でき、それぞれのモニター上で鮮明にレンダリングされます。この高DPIスケーリングのサポートは、10.3で導入されたperMonitorv2スケーリングに対するVCLのサポートに加えて、ImageCollectionとVirtualImageListコンポーネントを使用して実現しています。

特に重要なのは、高DPIサポートには、コードエディタでの鮮明なテキストのサポートや、VCLとFMXの両方のフォームデザインでのサポートが含まれていることです(RAD Studio 11を起動して、「あれ? フォームが小さい?！」と思った方は、この先をお読みください。VCLフォームデザイナでは、スケーリングを制御する設定が用意されており、デフォルトではスケーリングされないように設定されています)。

それでは、高解像度と低解像度の両方のディスプレイでIDEがどのように動作するか、IDEの改善に関する興味深い話、特にVCLフォームの設計について見ていきましょう。

高DPIの比較

IDEの違いを実感するには、実際に使ってみるのが一番です。高解像度のディスプレイでIDEを使用すると、まるで別物に見えます。

スクリーンショットだけでは実際の半分ぐらいしか伝えらないことがありますが、RAD Studio 11のルック＆フィールもその一つです。実際にその違いを比べてみると、驚くほど明白です。

下図は、エンバカデロのチーフエヴァンジェリストであるJim McKeethが作成した10.4.2と11.0のIDEを比較したスクリーンショットです。

左側は、RAD Studio 10.4.2の古いDPI非対応版のIDEで低解像度で描画しているため、スケールアップした画面は、ぼやけて見えます。

それに対して右側は、RAD Studio 11の新しい高DPI対応版のIDEです、スケーリングがどれほど高くても、どんなに拡大しても鮮明に表示されます。RAD Studio 11では、IDEが配置されているディスプレイの大きさに関係なく、文字やアイコンが鮮明に表示されていることがわかります。

背景 – なぜ高DPIなのか？

現在のWindowsで設定されている一般的なスケールは200%です。これはピクセル密度の2倍で、実際には昔の1ピクセルに対して、現在は4ピクセルに相当します（縦と横に2分割されています）。

例えば、縦の解像度が2160ピクセルの4Kモニタを使用している場合、これは高DPIに対応する前の縦の解像度(1080)ピクセルの2倍です。すべてを画面上で同じ物理サイズで表示するには、2倍にスケーリングする必要があります。

アプリケーションが高DPIをサポートしていない（「DPI unaware」）場合、Windowsはそれをスケールアップしますが、拡大すると、ぼやけてしまいます。 アプリケーションがWindowsの画面に適用されているスケーリングを認識して、鮮明な描画を行うことができれば、それが最善な方法です。

10.3では、VCLでperMonitorv2の高DPIスケーリング（Windowsが提供する最新かつ最高のオプション）をサポートし、高DPIのアイコンと画像描画用のコンポーネントを追加することで、Windowsに組み込まれているツールバーやメニューでの高解像度イメージのサポートを強化しました。

RAD StudioのIDEで構成するほとんどの部品はVCLで構築されているため、これらの新しい機能を使用することによって、IDE自体がVCLの能力を証明する素晴らしいデモとなっています。

IDEはスタイルを使用してライト、ダーク、ミストのテーマを描画し、VCLスタイルは高DPIスケーリングにも対応しています。

高DPIのフォームデザイナ

VCLの高DPIサポートは、［プロジェクト｜オプション…｜アプリケーション｜マニフェスト］ページでperMonitorv2サポートを有効にして再コンパイルし、さらに画像を更新し（詳細は後述）、カスタム描画やハードコードされたピクセル定数を更新してScaleValueをオーバーロードし、高DPIフォームのための新しいポイント、値、矩形などを取得するだけですが、それほど単純なものではありません。

エンバカデロでは、お客様のアプリケーションに適用されないが、取り組むべき特定の領域が1つありました。その領域とはVCLフォームデザイナです。実際、10.3でVCL自体の高DPIをサポートした後、今回リリースされたRAD Studio 11でIDEの高DPIの対応が行われるまでの間、最適なアプローチを研究し、試作を行うことで時間はかかりましたが、その苦労の甲斐があってようやくすべてのニーズを満たすことができる解決策を見出すことできました。

VCLフォームデザイナを任意のDPI（任意のスケール）にスケーリングできます。VCLフォームデザイナは、VCLが実行時に自身をスケーリングするときに使用するのと同じスケーリング技術を採用してます。つまり、アプリケーションが実行され、そのディスプレイに合わせてサイズとレイアウトを調整する必要があるときに使用されます。

この設定は、[ツール]> [オプション]> [ユーザーインターフェイス]> [フォームデザイナ]> [高DPI]にあります。この設定を変更した場合、フォームデザイナを一旦閉じて再度開くことで効果が反映されます。

デフォルトでは、VCLフォームデザイナでフォームを開くと、フォームは96 DPI、つまり100％で設計されます。 つまり、IDEが200％の場合、フォームは周囲のコントロールよりも小さく表示されます。重要な情報として、フォームを拡大縮小すると、Left、Heightなどのプロパティが変更されます。これはアプリケーションを実行してスケーリングする場合とまったく同じで、これらの値は画面スケールで乗算されます。

デフォルトの100％で設計すると、フォームはまったくスケーリングされません。フォームを開いても、たとえば10.4.2で開いた場合と比較して、DFMに格納されている値は変更されません。RAD Studio 11をインストールしてフォームが小さく見える場合は、これが理由です。フォームを変更しないことをデフォルトの動作としました。

「あれ? フォームが小さい?！と感じた方は、こちらの情報もご参照ください。

ここからは、VCLフォームデザイナのスケーリングに関して、いくつか見ていきましょう。

IDEは200％にスケーリングされますが、フォームデザイナのコンテンツは100%になっています。右側のボタンとテキストは、IDE ウィンドウの半分のサイズになっているのがわかります。将来のリリースでは、フォームデザイナのキャプションもスケールするように調整する予定です。現在は、フォームの実際に設計されたコンテンツのみがスケールされます。

また、フォームデザイナを画面に合わせて表示することもできます。 これはフォーム上のボタンがIDEダイアログのボタンのサイズと一致することを意味します。画面やスケーリング（125%、150%、300%…）に関わらず、常に画面のスケーリングと一致します。これはフォームを他のUIと同じサイズで表示したい場合に最も便利な方法です。[ツール]> [オプション]> [ユーザーインターフェイス]> [フォームデザイナ]> [高DPI]ダイアログのVCLデザイナ高DPIモードを「自動」に変更することで、​​デザイナを開いたときの画面の状態に応じてスケーリングが設定されます。

上図は、自動スケーリングを使用したフォームデザイナの例です。テキストとボタンが右側のIDEウィンドウと同じサイズであることがわかります。この設定は、フォームデザイナが常に画面のスケールに合わせて拡大縮小することを意味しています。

最後に、フォームの設計に使用する特定のスケールを設定できます。これは、125％、300％など、任意のスケールにすることができます。

設計するスケールは任意に選択できます。チーム全員が同じDPIで設計するためには、この方法がお勧めです。上図はデモ用にVCLデザイナを画面やIDE自体が使用しているスケールよりも大きく（1.5倍）設定しており、フォームのテキストやボタンがIDEよりも大きく表示されていることがわかります。実際にはこのような設定をすることはないと思いますが、このデモでは必要なスケールを適切に選択できることを示しています。

Windows上で実行しているVCLのサイズと位置は、浮動小数ではなく整数の座標値を使用しているため、アプリケーションのスケーリングは、必ずしも正確とは限りません。

実際には、1回のスケーリングであれば問題ありません（例えば、アプリの実行時や、設計時の低解像度の座標からスケールアップするような場合など）。また、IDEを起動後にモニター間を移動することで生じる細かいスケーリングも問題ありません。ただし、何度もスケールアップ/ダウンを繰り返す場合は問題があります（「任意のスケールで設計して、保存時に100％にスケールダウンする」という機能がないのも、このためです）。したがって、チームで作業する場合、全員の画面が異なる場合には、「自動」は適切な選択ではない可能性があります。

そのため、1人の開発者が別のフォームを編集しても、スケールが変更されないように、チーム全員でスケールを統一することををお勧めします。

FireMonkeyデザイナ

FireMonkeyのデザイナはもっとシンプルです。FMXアプリケーションをコードでスケーリングする場合と同じように、IDE自身のスケールに合わせて拡大縮小を行っています。FireMonkey は、浮動小数点座標を使用しており、VCLアプリケーションのような技術的な考慮事項はありません。RAD Studio 11では、Windows版のFireMonkeyを、ピクセルではなくデバイス単位の座標系を使用するように変更しました。つまり、Windows版のFMXフォームは、より高品質なレンダリングを含めて、これまでよりもディスプレイのスケールに合わせて拡大縮小できます。

技術的な変更点

10.2.2 以降、PNG 形式の高解像度コンポーネントアイコンがサポートされているため、コンポーネントに付属するアイコンを変更する必要はありません。 プラグインやアドオンのベンダーは、IDE内部の高解像度なImage Collectionに画像を追加するための新しいAPIをToolsAPI に追加しています (これらのAPIはこのブログでは扱いませんが、ToolsAPI.pasでTGraphicArrayを確認してください。これらの新しいオーバーロードは、IDEのイメージリストをバックアップするイメージコレクションに、複数のサイズのイメージを追加することができます)。

ここからは内部的な情報、ちょっとした裏話になるので、開発者には直接影響するものではありませんが、知っておくと興味深い話になりますので紹介いたします。各IDEフォームはイメージリストを持っています。これはスケーリング可能なフォームであり、2つの異なる画面上で、2つのフォームが異なる拡大縮小を行う可能性があるため、高DPIサポートに必要です。そのため、イメージリストを複数のフォームや複数のフォーム上のコントロールで共有することはできません。なぜなら、あるフォームでは画像のサイズが適切であっても、他のフォームでは不適切な場合が考えられるためです。

実際、以前のバージョンのIDEでは、旧いスタイル形式のイメージリストが非常に複数存在しており、1つのフォームに1つということが多かったのですが、旧いスタイルのイメージリストには独自の画像が保存されていたため、多くの画像が重複してしまうということもありました。例えば、赤い削除Xの画像は複数のイメージリストに含まれていており、アイコンの更新が大変でした。

IDEは現在、単一の中心的なイメージコレクションを持っています。IDE で使用されているすべての画像がこのイメージコレクションに保存されています (コンポーネント アイコンは別個に保存されています)。 IDEの複数のイメージ リストはこのイメージ コレクションと繋がっています。ここまで整備するための作業としてソフトウェアによる検出と人間による目視の両面でアイコンの重複を排除し、イメージコレクションにはそれぞれの画像のコピーが1つになるように選別することで、アイコンの更新が非常に容易になりました。イメージコレクションには、各アイコンにコメント欄が設けられており、必要な情報を保存することができます。エンバカデロでは、アイコンの使用場所と使用方法に関するメモを保存するために使用しています。

エンバカデロで行ったアプローチに関する洞察が、お客様のアプリケーションを高DPIにアップデートする際の参考になれば幸いです。高DPIイメージに関する包括的なドキュメントはこちらを参照ください。

その他の変更点

最後に小さな変更点としてIDEのアイコンがあります。ほとんどのアイコンは高解像度（マルチ解像度）向けに変更され、どのスケールでも鮮明に表示されるようになりました。しかし、製品の重要な部分のアイコンについては、一部デザインを変更しました。

IDE全体の中で最も重要ないくつかのツールバーボタンとして「デバッグ実行(F9)」、さらに「ステップオーバー」、「トレースイン」などのデバッグ操作のボタンがあります。

デバッグはIDEを利用する重要な目的の一つになりますので、これらのアイコンは、それぞれの目的に合わせて特別にデザインされ、見た目もわかりやすく、操作内容もよくわかるようになっています。

参考までにRAD Studio 10.4とRAD Studio 11のアイコンを比較した画像は、以下の通りです。

RAD Studio11の新しいデザインの「デバッグ実行」のアイコンは、より実行ボタン(Shift+Ctrl+F9)に近くなり、その下にはバグが潰されている様子が描かれています。またステップオーバーやトレースインのアイコンは、とてもシンプルなデザインですが、コンセプトを示す非常にエレガントなデザインになっています。そして実行アイコン(Shift+Ctrl+F9)も、以前のバージョンから少し変更されています。どちらというとDelphi 7の古い実行アイコン（横幅が狭い)に似ています。

なお、デバッグ関連以外にもいくつか新しいデザインのアイコンに置き換えられています。

また別の変更点として、エディタのデフォルトフォントをConsolasに移行しました。Consolasは非常にDelphiらしいフォントです。つまり、過去に古いデフォルトフォントCourier Newを使用していた方には自然に感じられるでしょう（今でも使えます）。また、いくつかのプログラマーズフォントをインストールしています。(Fira Code、Monoid、Source Code Proなど)

まとめ

RAD Studio 11.0では、要望の多かった高DPI対応のIDEを大幅に刷新しました。すべてのスクリーン上で鮮明にレンダリングされ、複数のスケールでのフォームデザインがサポートされ、エディタでは新しいが馴染みのあるフォントで明確なテキストが表示されます。高DPI対応のIDEは、今回エンバカデロが行った最も重要な変更と改善の一つです。

4K以上の高解像度ディスプレイをフルサポートしたRAD Studio 11は、日々の開発タスクをより効率化し、RAD Studioによる作業をより簡単かつ快適にすることでしょう。

RAD Studio 11は、10/5にリリースが予定されているWindows 11にも、いち早く対応しております。

今すぐRAD Studio 11を使い始めましょう!!

RAD Studio 11のトライアル版は、こちらからダウンロードいただけます。

関連情報

• Windows11やApple M1に対応した 新バージョン『RAD Studio 11 Alexandria』提供開始
• RAD Studio 11新機能ウェビナー」ビデオを公開
• RAD Studio 11におけるVCLの新機能