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