【SAP Fiori】UI Theme Designerでテーマを作り、SAP Fiori画面のCSSを一括設定する

概要

受託開発企業で働くfussasyといいます。普段は、SAP BTP（PaaS）上でSAP Fioriアプリケーション開発をしています。プロジェクトでの技術検証の過程で、複数あるSAP Fioriアプリケーションに対して、一括でCSS 設定をする必要があり、その際に公式が提供しているUI Theme Designer利用してみました。

UI Theme Designer について

UI Theme Designerは、SAP BTPが提供するサービスの一つです。テーマのテンプレートを元にして文字、配色、アイコンやイメージ画像等をカスタマイズしてデザインし、テーマを作成できます。作成したカスタムテーマを公開することで、SAP Build Work Zone上のサイトのホーム画面や、サイト上の各Fioriアプリケーションのデザインを、一括で設定・変更することができます。（一括設定のため、各Fioriアプリで個別のUI要件を満たす設定はできません。）

UI Theme Designerで新規テーマを作成する際、SAP BTP Cockpitでユーザーへ権限付与する必要があります。以下のヘルプドキュメントに記載の通り、テーマを編集するための「Editor」と、編集したテーマを公開するための「Publisher」のロールが必要となります。

SAP BTP Cockpit > Service Marketplaceにて、SAP Build Work Zoneを有効にすると、以下3種類のRole Collectionがデフォルトで用意されます。Editorを含む「Launchpad_Admin」と、Publisherを含む「Launchpad_Advanced_Theming」に、Userを追加する必要があります。

UI Theme Designerでカスタムテーマを作成し公開する

SAP Build Work Zoneのサイトにある、ユーザーメニューのテーママネージャ > テーマデザイナの起動を選択して、UI Theme Designerを開きます。

新規テーマの作成を押し、SAPテーマを選択してテーマの作成を押すと、UI Theme Designerの編集画面に遷移します。左側のプレビューページでSAPUI5コントロールの変化を確認しながら、右側のパラメータ値を変更します。

ここでは、SAP Build Work Zone上のサイトのタイルやグループ等の文字、配色、アイコンやイメージ画像を一括で変更・設定することができます。また、サイトから遷移される各アプリケーションの文字と配色、各アプリケーションで利用される項目、ボタン、メッセージストリップやバー等のSAPUI5コントロールの文字と配色を、一括変更・設定することができます。UI Theme Designerで標準で用意されている編集項目でなく、CSSエディタに記述することで、CSSの内容を各アプリケーションへ一括適用することもできます。

例えば、UI要件としてFontFamilyをMS Gothicを適用したい場合、エキスパートでFontを検索してあげれば、変更可能なテーマパラメータが表示されます。デフォルトだとFioriは、「Font 72」というSAP独自の書式が利用されていますので、値のフォームに"MS Gothic"を追加してあげます。FontSizeは、rem指定で変更可能です。初期設定は0.875rem(14px)で構成されており、1rem(16px)までならサイズを上げても、表示不具合はありませんでした。

テーマの編集が完了したら、保存および公開することで、サイト上の「テーママネージャ」で公開されているテーマ一覧から選択することができます。有効化ユーザーとして設定・保存すると、「個人設定」の表示から選択・適用できるようになります。「テーママネージャ」からデフォルトとして設定することもできます。このとき、各ユーザーの初期画面は、デフォルトとして設定されたテーマが適用されます。各Fioriアプリを開いている状態でもテーマを変更・適用することができます。

各アプリケーションで個別にCSS設定することが可能ですが、UI Theme Designerで設定したものが優先されます。まずはUI Theme Designerで一括設定した上で、各アプリケーション固有の要件については、それらのプロジェクト内のCSSファイルを個別修正すると良いです。（保守工数は高くなりますが。）また余談ですが、UI Theme DesignerはLessで記述されています。実際にエクスポートしてみるとLessファイルが出力されます。

おわりに

UI Theme DesignerはSAP BTPのライセンスがあれば利用可能で、特に追加料金は発生しません。SAP Fioriアプリケーションを開発する際には、UI要件としてデザインに関する指定もそれなりにあるかと思いますので、気軽に色々と試してみて、できる事とできない事を、手を動かして事前に把握しておくのが良いかなと思います。

参考記事

SAP公式のチュートリアル（Create a Theme with the UI Theme Designer）

Fioriデザインガイドライン（Fiori for Web Design Guidelines）

SAP BTP UI Theme Designerヘルプドキュメント

SAP NetWeaver 7.5 UI Theme Designerヘルプドキュメント

※記載の通り、UI Theme DesignerはSAP Fioriアプリケーションに限って提供されるものではないようです。

Cross-technology theming:
Create one consistent theme that applies to various SAP UI clients and technologies:
・SAPUI5 standard libraries (including SAP Fiori applications and SAP Fiori launchpad)
・Unified Rendering technologies (such as Web Dynpro ABAP and Floorplan Manager)
・SAP Business Client