4DアプリケーションにFluent UIを手軽に導入

1月 22, 2026 1 読了時間

4D 21 R2 では、Fluent UI は引き続き開発者プレビュー段階ですが、4D への完全なネイティブ統合により新たなマイルストーンに到達しました。プレビュー段階ながら、有効化・設定・運用が容易になり、外部依存関係に依存しなくなりました。ユーザー側での追加設定なしに、アプリケーションは即座にWindows 11と整合性のあるモダンなインターフェースを採用します。

開発者にとっての改善はさらに顕著です。Fluent UIの起動が容易になり、設定の柔軟性が高まり、運用が簡素化されました。ワークフローに自然に溶け込む新たなツールとオプションが追加され、新インターフェースへの移行をスムーズかつ制御された形で実現します。

4D への完全統合

Fluent UI は4D 本体に直接組み込まれ、製品の一部となりました。複雑な設定や外部フレームワークの管理は不要です。

開発者側での対応

開発者マシンに4D 21 R2 をインストールする際、開発中にFluent UI を有効化するために必要なWindows App SDK のダウンロードが提案される場合があります。

マシンに Windows App SDK が既に存在する場合、このインストール手順はスキップできます。Windows 11 25H2 以降では、Windows App SDK はオペレーティングシステムと共に直接インストールまたは更新されます。

わずか数分で、追加の設定を必要とせずに Fluent UI を使用できる開発環境が整います。

アプリケーションの運用側では

このネイティブ統合により、アプリケーションの運用方法も大幅に簡素化されます。

4D 21 R2 では、生成されたアプリケーションに Windows App SDK を直接組み込むかどうかを決定できます。この選択により、開発者の設定とは独立して、エンドユーザーのマシン上で Fluent UI がどのように動作するかが決まります。

SDK を含めるタイミング
SDK を含めることで、マシンの構成に関わらずアプリケーションがFluent UI を使用することを保証します。ユーザーのマシンにインストールは不要です。すぐに動作します。
SDKを含めない場合
SDK を含めないことで、運用するアプリケーションの軽量化が図れますが、クライアントマシンへのインストールが必要になる場合があります。環境準備にはサポートまたは管理者の介入が必要となる可能性があります。

ビルド時にFluent UI を設定する方法

[アプリケーションのビルド] ダイアログで、Fluent UI がオプションモジュールのリストに表示されるようになりました。ここで SDK を含めるか除外するかを決定します。デフォルトでは有効になっていますが、アプリケーションを 100% クラシックモードに保つ必要がある場合は無効にできます。いずれの場合も、外部依存関係を管理する必要がなく、完全にスムーズなユーザー体験が得られるため、運用は簡単です。

Check box to activate the FluentUI module in the Build Application Dialog

アプリケーション起動時、システム構成がFluent UI の有効化を許可しない場合、アプリケーションは自動的にクラシックモードにフォールバックします。エラーメッセージは表示されず、診断ログに警告行が追加されるのみです。これにより、ユーザーに対して予測可能で堅牢、かつ完全に透過的な動作が保証されます。

アプリケーションがFluent UI を使用しているか確認する方法

4D 21 R2では、Application info コマンドが拡張され、アプリケーション内のFluent UI ステータスに関する明確なフィードバックを提供します。

var $useFluentUI; $canUseFluentUI : Boolean $useFluentUI:=Application info.useFluentUI $canUseFluentUI:=Application info.canUseFluentUI

これにより、アプリケーションが実際にFluent UI を使用しているかどうか、また環境がそれをサポートしているかどうかを把握できます。診断や、ログ記録やユーザーサポートの改善に最適です。

新しいCSSメディアクエリ

4D は、ライトモードとダークモードを処理するためにprefers-color-schemeを含む CSS メディアクエリを導入しました。4D 21 R2 では、プラットフォームはさらに一歩進んで、フォームの外観(クラシックまたは Fluent UI) に特化した form-theme という新しいメディアクエリを追加しました。

このメディアクエリにより、フォームのテーマに基づいてスタイルを適用できます：

@media (form-theme: win-classic) {
	...
}
 
@media (form-theme: fluent-ui) {
	...
	}
	@media (prefers-color-scheme: dark) {
		... 
	}
}

この柔軟性は、フォームをFluent UI へ段階的に移行する場合に特に有用です。従来のフォームには既存のスタイルを維持しつつ、新デザイン向けに最適化された新しいスタイルを徐々に導入できます。各フォームは独立して進化できるため、アプリケーションの他の部分に影響を与えずにスムーズな移行が可能です。

モダンで一貫性のある4Dダイアログ

4D ダイアログは自動的にこのモダンな外観の恩恵を受けるようになります。具体的にはデータベースがFluent UI 用に設定されている場合、以下のコマンドはFluent UI デザインのウィンドウを表示します：

ALERT
CONFIRM
REQUEST
MESSAGE

それだけではありません！スペルチェックウィンドウも、それを開いたウィンドウと同じ外観を採用するようになりました。

これにより、アプリケーション全体で一貫性とシームレスなユーザー体験を提供します。

まとめ

4D 21 R2では、Fluent UIは開発者プレビュー段階を維持しつつ、ネイティブかつプラットフォームレベルの統合において新たな段階に到達しました。アクティベーションが簡素化され、運用の柔軟性がが向上し、CSS 機能が拡張され、より多くのダイアログがモダンなFluent UI デザインを採用しています。

このリリースは、既存インターフェースとの完全な互換性を維持しつつ、開発者が実環境アプリケーションでFluent UI を探索・テスト・段階的に導入するための堅牢で一貫性のある基盤を提供します。

そして何より、既存のインターフェースを壊すことなく、フォームごとに自分のペースで移行できます。4Dの真髄に基づいて、Fluent UI へのスムーズな移行を実現します。

Discuss