RAD Studio 13.1 の新機能：FMX Style Designer

従来の FireMonkey Style Designer との違い

RAD Studio 13.1 では、新しい FMX Style Designer が追加されました。従来の FireMonkey Style Designer はスタイルオブジェクトを直接編集するツールでしたが、新しい FMX Style Designer はデザイン情報からスタイルを生成する新しい設計のツールです。主な違いは以下の通りです。

項目	従来の Style Designer	新しい FMX Style Designer
コンセプト	スタイルを直接編集	デザインからスタイルを生成
操作レベル	低レベル（内部オブジェクト）	高レベル（色・フォント・状態）
UI作成方法	手動で構造を編集	パラメータ定義で自動生成
状態管理	手動設定	自動生成
再利用性	低い	パラメータ共有による一括管理が可能
起動方法	IDEに統合	スタンドアロンアプリケーション

新しい FMX Style Designer は、従来の Style Designer を置き換えるものではありません。 FMX Style Designer で生成したスタイルは、従来の Style Designer で編集することも可能です。

期待されている用途

FMX Style Designer は、従来の StyleBook 編集では手間のかかっていた UI スタイルの作成や管理を簡素化することを目的としています。特に以下のような用途での利用が期待されています。

ダークテーマ／ライトテーマの切り替え

色パラメータを変更することで、ライトテーマとダークテーマの両方を容易に作成できます。共通のスタイル構造を維持したままテーマバリエーションを生成できるため、アプリ全体の外観を統一したまま切り替えが可能です。

ブランドカラーの統一

アプリケーション全体の色をパラメータとして定義することで、ブランドカラーの変更を一括で反映できます。複数の画面やコンポーネントにまたがる UI の統一管理が容易になります。

コンポーネントの状態管理の簡略化

ボタンやリストなどのコンポーネントについて、hover、pressed、focused などの状態ごとの外観をまとめて定義できます。状態遷移のスタイルは自動生成されるため、手動での状態管理を減らすことができます。

複数プラットフォーム向け UI の統一

Desktop、Mobile、Android、iOS などのテンプレートをベースに、共通のスタイルを定義できます。これにより、プラットフォームごとに外観を調整しつつ、統一されたデザインを維持できます。

DPI 対応 UI の作成

リソースを再利用可能な要素として定義することで、高 DPI 環境に対応した UI を作成しやすくなります。スケーラブルなビットマップとレイアウトにより、異なる解像度でも一貫した外観を維持できます。

UI バリエーションの管理

ベーススタイルを定義し、派生スタイルを作成することで、複数の UI バリエーションを効率的に管理できます。例えば、Primary / Secondary / Danger などのボタンスタイルを統一ルールで管理できます。

注意事項

FMX Style Designer を使用する際は、以下の点に注意してください。

FMX Style Designer はスタンドアロンアプリケーションとして提供されており、RAD Studio IDE には統合されていません
使用する場合はインストールフォルダ内の実行ファイルを直接起動する必要があります
既存の StyleBook を直接編集するツールではありません
新しいスタイルを作成し、エクスポートして TStyleBook で読み込んで使用します
既存の FireMonkey スタイルをインポートする機能は提供されていません
複雑なカスタマイズや特殊なスタイルについては、従来の Style Designer を使用してください

FMX Style Designerの概要

FireMonkey Style Designer は、RAD Studio 用の FMX スタイルの作成および管理方法を刷新するスタンドアロンアプリケーションです。色、背景、タイポグラフィ、インタラクション状態などの高レベルな概念を中心とした、デザイン重視のインターフェースを提供します。ツールは、これらのデザイン情報を FireMonkey のスタイル形式へ自動的に変換します。 Style Designer では視覚的なデザイン意図を定義するだけで、技術的な実装は自動生成されます。名前付きパラメータを一度定義し、複数のスタイルから参照することで、色・タイポグラフィ・サイズ・数値などを一括管理でき、統一性の維持と単一点での更新が可能になります。

リソース（視覚的構成要素）

再利用可能な視覚要素を使用して外観を定義し、複数のスタイルから参照できます。これにより、一貫性の維持、自動更新、DPI スケーリング対応、スケーラブルなビットマップ描画を実現します。

命名規則による階層構造の管理

ハイフン区切りの一貫した名前付け規則を使用することで、自動的にフォルダ階層を作成し、大規模なプロジェクトでも整理された構造を維持できます。例えば「background-button-primary」という名前は、以下の階層を作成します。 background > button > primary

状態ベースのデザイン

各コンポーネントの状態（normal、hovered、pressed、focused、selected）ごとの外観を定義すると、状態遷移ロジックは Designer によって自動生成されます。

Style Designer ウィンドウ

Style Designer ウィンドウには次の要素が含まれます:

デザインサーフェス	選択されたスタイルオブジェクトを視覚的に表示します。
構造ツリー	すべてのスタイル要素を階層表示します。
オブジェクトインスペクタ	選択されたスタイルオブジェクトのプロパティを表示します。
ツールバー	オブジェクトの追加、ズーム、スタイル管理のコマンドを提供します。

動作の仕組み

インターフェース構成

アプリケーションは 3 パネル構成のレイアウトを使用します。

プロジェクト構造ツリー（左）

スタイル、リソース、コンポーネントを階層表示します。

ライブプレビュー（中央）

スタイルをリアルタイムで描画し、操作に応じて表示を更新します。マウスオーバーやクリックでコンポーネントの状態をプレビューできます。

プロパティパネル（右）

選択された項目に応じたプロパティを表示します。パラメータ、リソース、スタイルを変更すると、プレビューは即座に更新されます。

ワークフロー

まず、色・タイポグラフィ・サイズなどのデザイントークン（パラメータ）を定義します。次に、背景・シャドウ・アイコンなどの視覚要素として再利用可能なリソースを作成します。その後、リソースを組み合わせ、テキスト、パディング、アイコン、アニメーションなどのコンポーネント固有のプロパティを設定して、コンポーネントスタイルを構築します。スタイルは継承に対応しており、重複を避けることができます。ベーススタイルを定義し、差分のみを指定した派生スタイルを作成できます。

テンプレート

スタイルをゼロから作成する代わりに、あらかじめ設定されたテンプレートから開始できます。利用可能なテンプレート（Empty、Desktop、Mobile、Android、iOS）には、標準 FireMonkey コンポーネント用の完全なスタイルセットと、統一されたパラメータシステムが含まれています。パラメータやリソースをカスタマイズすることで、テンプレートを任意のデザインに適応できます。テンプレートを使用するには、[Menu|File > New] を選択します。

エクスポートと統合

スタイルを標準 FireMonkey スタイルファイル（.fsf）としてエクスポートし、既存の RAD Studio ワークフローで使用できます。アプリケーション側では以下の手順で使用します:

TStyleBook コンポーネントを追加します
エクスポートしたスタイルファイルを読み込みます
StyleLookup プロパティでスタイルを選択します

エクスポート処理では、ビットマップを最適化されたソース画像へ統合し、領域およびマージンを計算し、構造化されたスタイルオブジェクトを自動生成します。 Style Designer は標準的なスタイル作成シナリオに対応しています。高度なカスタマイズやデバッグが必要な場合は、従来のスタイルエディタを使用してください。スタイルを適用すると、アプリケーションは即座に更新されます。

ツールの起動方法

Style Designer はコマンドラインまたはファイルエクスプローラーから直接起動できます:

32-bit 版

C:\Program Files (x86)\Embarcadero\Studio\37.0\bin\FMXStyleDesigner.exe

64-bit 版

C:\Program Files (x86)\Embarcadero\Studio\37.0\bin64\FMXStyleDesigner.exe