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