Fluent UIで4Dインターフェイスをモダンに

表立って見える場所ではありませんが、Fluent UIを4Dにネイティブに統合するために、舞台裏では重要なエンジニアリング作業が行われました。これはつまり、Windows、Office、Teams を定義しているのと同じモダンなビジュアルスタイルであるMicrosoft のFluent UI デザインシステムを使って、4Dフォームを表示できることを意味します。4Dは、ネイティブのWinUI統合を提供する最初の開発環境の1つであり、これにより開発者は本物のFluent UI エクスペリエンスをデスクトップアプリケーションにもたらすことができます。クライアント側では、移行はこれ以上ないほどシンプルです。プロジェクト設定でFluent UI レンダリングを有効にし、フォームのレイアウトを少し調整するだけで、新しくモダンな外観を楽しむことができます。

この深い統合は、4D 21 の重要な進化の1つであり、Microsoft のモダンなグラフィカル・インターフェースを使ってフォームを表示する新しい方法として、Fluent UI レンダリングを導入しています。これまでは、お馴染みのクラシックなWindows スタイルでフォームが表示されていました。現在では、信頼のクラシックな外観と、 洗練されたFluent UI スタイルのいずれかを選択できるようになり、アプリケーションを現代のユーザーの期待に合わせることができます。 この柔軟性により、インターフェイスをモダナイズするペースを自分でコントロールしながら、アプリケーションをユーザーの期待に合わせることができます。

Fluent UI は、4D 21 Beta のDeveloper Preview として利用可能ですが、最終リリースには含まれません。しかし、開発者は、4D 21 R2から、このテクノロジーのテストと実験を続けることができます。

Fluent UI：Microsoftのモダンなデザインシステム

Fluent UIは、Windows、Office、Teams などのMicrosoft アプリケーションを強化するデザインシステムです。そのゴールは、一貫性のある、エレガントで楽しいビジュアル体験を提供することです。

Fluent UI のドキュメントによると、これにはいくつかの重要な原則があります：

• シンプルさと明快さ：明確な視覚的階層、読みやすい字体、バランスの取れたスペースの使用。
• 奥行きと光：微妙な影と透明効果でモダンな雰囲気に。
• 流れるような動き：ナビゲーションを遅らせることなくユーザーを誘導するアニメーション。
• 適応性：ライトテーマとダークテーマ、高解像度スクリーンをネイティブでサポート。
• 一貫性：マイクロソフトのエコシステム全体で統一されたエクスペリエンス。

つまり、Fluent UI は単なる新しい外観ではなく、アプリケーションをより快適でモダンに、そして直感的にする真のデザイン哲学なのです。

WinUI 3: デスクトップアプリケーションのためのテクノロジー

Windows デスクトップアプリケーションに対しては、Fluent UI はWindows App SDK の一部であるWinUI 3 を通して実装されます。

これは、4Dに既に統合されているテクノロジーで、既存のアプリケーションの安定性を維持しながら、ダークモードをサポートしたモダンな外観をフォームにもたらすことができます。

ビジュアル・プレビュー

4DでFluent UIを有効にする方法

まず、Windows App SDKバージョン1.7.3をインストールする必要があります。SDKがインストールされていない場合、4Dはエラーを発生させることなく、自動的にクラシックスタイルを使用してフォームを表示します。

次に、プロジェクト設定でアプリケーションのグローバルスタイルを定義します。このオプションは、プロジェクト全体にWinUI を採用する準備ができている場合に最適です。

プロジェクト全体を一気に移行するのではなく、徐々に移行したい場合、各フォームは “Widget Appearance” プロパティを通してグローバル設定を上書きすることができます。デフォルトのオプションは “継承済み”で、グローバルアプリケーションの設定に従います。また、従来のレンダリングを維持するために”クラシック”を明示的に選択したり、準備が整った特定のフォームをモダナイズするために”Fluent UI” を選択することもできます。

これはつまり、移行を完全にコントロールし続けることができるということを意味します。準備が整えばプロジェクト全体を一度に切り替えることもできますし、一部のフォームでのみ Fluent UI を有効にして段階的にモダナイズすることもできます。

現在の制限事項(デベロッパープレビュー)

いくつかの機能は、Fluent UI レンダリングをON にしてもまだサポートされていません：

• 開発またはデプロイのためのWinUI の自動インストール
• フォームエディタのWYSIWYG
• メニューバー(これはクラシックスタイルで表示されます)
• オブジェクトライブラリのウィジェット（4D Write Pro Interfaceなど）
• リストフォームのサポート
• プラグイン

まとめ

クラシックなWindows スタイルとFluent UI スタイルの切り替え機能により、4Dは、オーダーメイドのインターフェイスをデザインする自由度をさらに高めます。ユーザーエクスペリエンスを大幅に向上させながらも、優先順位に従って、自分のペースでアプリケーションを現代的に洗練させていくことができます。これが、長期的に見た時の4D テクノロジー強みの1つです。ゼロから始める必要も、複雑な移行に直面する必要もありません。他のデスクトップアプリ用ソフトウェアなら必要となる労力のほんの一部で、モダンなUI ライブラリに移行できるのです。

念のため：Fluent UI レンダリングは、4D 21ベータ版ではデベロッパープレビューとして利用可能ですが、最終リリースには含まれません。しかし、4D 21 R2で引き続き実験することができます。

あなたの4DフォームでFluent UIレンダリングを試してみてください！そして、是非使用してみた感想をフォーラムに投稿してコミュニティと共有してみてください！