出典：ArcGIS Experience Builder - Guide - Theme
ArcGIS Experience Builder におけるテーマは、アプリケーションの外観やスタイルをカスタマイズするための体系的なアプローチです。Jimu フレームワークと Theme Design System を基盤としており、構造化され、カスタマイズ可能で拡張性のあるテーマ設定を提供することで、統一感のある見た目と操作感のあるエクスペリエンスを実現します。
テーマは、Jimu UI の基本コンポーネントに対して設定可能なテーマ変数とスタイル モジュールを提供することで機能します。内部的には、スタイル モジュールがテーマ変数を読み取り、ランタイムで CSS スタイルを動的に生成し、それをコンポーネントに適用します。
基本的には、テーマは次の要素で構成されます：
variables.json で定義されるテーマ変数の上書き.scss) または TypeScript (.ts) ファイルで記述されるスタイルの上書きassets フォルダーに格納される画像、アイコン、フォントなどのアセットアプリ構成では、テーマは theme プロパティで定義され、エクスペリエンスに適用するテーマへの URI 参照を含みます。さらに、テーマ設定パネルでテーマをカスタマイズできます。
テーマを使うと、 Experience Builder のアプリケーションにおいて次のようなメリットがあります。
| メリット | 説明 |
|---|---|
| 統一された外観と操作感 | すべてのコンポーネントで一貫したビジュアル デザインを保証します。 |
| 簡単なカスタマイズ | コードを変更せずにブランドや好みに合わせた調整が可能です。 |
| 柔軟な構成 | テーマの切り替えや動的なスタイリングをサポートします。 |
| 保守性 | スタイルを集中管理することで更新や変更が容易になります。 |
ArcGIS Experience Builder でテーマを使用する一般的な手順は次のとおりです。
テーマの選択 エクスペリエンスのベース テーマを選択します。
テーマのカスタマイズ 色、フォント、その他視覚的な要素を修正します。
テーマの適用 テーマをエクスペリエンスに適用し変更をプレビューします。
以下のステップに従って、エクスペリエンスのテーマを選択します。
次のステップに従って、選択したテーマをカスタマイズします。
テーマをカスタマイズすると、その変更はエクスペリエンス内のすべてのページにリアルタイムで適用されます。
ページを切り替えることで異なるスタイルをプレビューできます。異なるデバイスでエクスペリエンスをテストし、テーマがあらゆる画面サイズで適切に機能することを確認することを強く推奨します。
高度なカスタマイズを行う場合、Jimu フレームワークとテーマ オプションを使用してカスタム テーマを作成できます。テーマ オプションは、テーマのプロパティをカスタマイズできるように構造化されています。
テーマ オプションの詳細については、テーマ オプションのカスタマイズをご覧ください。
テーマの変数やコンポーネント、グローバル スタイルを上書きすることで、テーマ スタイルをカスタマイズすることができます。
テーマ変数の上書き（推奨）：
variables.json ファイルを使用してテーマ プロパティを変更することにより、カスタム CSS を記述せずに、色、タイポグラフィ、形状などのデザイン要素をカスタマイズできます。
コンポーネントとグローバル スタイルの上書き： カスタム CSS または CSS-in-JS を記述し、より細かいコンポーネントのスタイル制御を行います。
カスタマイズ方法の詳細については、テーマの作成方法をご覧ください。