[ServiceNow] Theme Builderを使ってみる (2) - Xanadu新機能編 -

# はじめに

2024年9月にServiceNow XanaduリリースがGAとなり，システム管理者として触れることの多い Next Experience もいくつかの機能がアップデートされました．
本記事では，その中でもハイライトされていた Theme Builderを実際にPDIで触りながら，Xanadu新機能を確認してみます[^1]．

[^1]:[Xanadu のすべての機能と製品のハイライト](https://docs.servicenow.com/ja-JP/bundle/xanadu-release-notes/page/release-notes/summary/rn-summary-highlights.html "Xanadu のすべての機能と製品のハイライト")

:::note warn
本記事は執筆（2024年10月）時点の情報です．最新の情報は製品ドキュメントを参考にしてください．
[Product Documentation | ServiceNow](https://docs.servicenow.com/ "Product Documentation | ServiceNow")
:::

### 前提
本記事は以下の記事の続きの内容です．XanaduリリースにてアップデートされたTheme Builderの新機能について整理します．

https://qiita.com/mucho243/items/019fa60e5bce91fdfbe3

---
### 本記事のまとめ
* ユーザーメニューに複数のテーマを表示できるようになり，よより多くの選択肢が表示されるようになった
* 複数の公開済みテーマの順序を入れ替えられるようになった
* 代替カラーパレットのダークパレットを活用することで，既存テーマからダークテーマを簡単に作成できるようになった

---
# Xanaduリリースの新機能

以下，Theme Builderのリリースノート[^2]やNow Communityの記事[^3]をもとに，Washington DCの画面と比較しながら，Xanaduの新機能について整理します．

[^2]:[Exploring Theme Features in the Xanadu Release](https://www.servicenow.com/community/next-experience-articles/exploring-theme-features-in-the-xanadu-release/ta-p/3020435 "Exploring Theme Features in the Xanadu Release")

[^3]:[Theme Builder release notes](https://docs.servicenow.com/bundle/xanadu-release-notes/page/release-notes/now-platform-user-interface/theme-builder-rn.html "Theme Builder release notes")

### カラーパレットがグループ化された複数のテーマ表示
Theme BuilderのManagerページから複数のテーマを公開することができるようになり，テーマメニュー画面により多くの選択肢が表示されるようになりました．

[Select a theme in Next Experience](https://docs.servicenow.com/bundle/xanadu-platform-user-interface/page/administer/navigation-and-ui/task/select-a-theme-in-next-experience.html
 "Select a theme in Next Experience")

Washington DC時点では単一の公開されたテーマの中に登録された代替カラーパレットから選択する方式でしたが，XanaduからはTheme Builderで複数のテーマを公開することによって，より多くのテーマを選択できます．

|Washington DC|Xanadu|
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/6aa5d5db-f1e3-16d2-e473-912f3f920596.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/be006055-6bed-3e0f-8237-eee42f67ba6c.png) |
|単一のテーマのみ選択可|複数のテーマから選択可|

### 公開済みテーマ順序の入れ替え
複数のテーマを公開できるようになったこともあり，Theme BuilderのManagerページから表示順を並べ替えられるようになりました．

[Set the presentation order of your themes](https://docs.servicenow.com/bundle/xanadu-platform-user-interface/page/administer/navigation-and-ui/task/configure-presentation-order-of-themes.html
 "Set the presentation order of your themes")

Washington DC時点ではそもそも単一のテーマのみを公開できる仕様だったため，並べ替えはできません（そもそも不要）でしたが，Xanaduからは複数のテーマ公開ができるようになったこともあり，表示順を自由に入れ替えられます．

|Washington DC|Xanadu|
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/9a1feab8-bf68-447f-5c9f-4bffb7d03686.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/18c9e2b7-360f-6778-65d9-43d7ce3adfa6.png)|
|公開済みテーマは一つのみ|公開済みテーマの入れ替えが可能|

以下の画像は実際に並べ替えてみた場合のテーマメニュー画面です．Default「Xanadu Theme Group」が左上，2nd「U.S. Web Design System」が右上，そして，3rd「Polaris」が右下，と順序に沿って表示されていることが確認できます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/448fd0a9-cb5d-2743-97c8-91025c9cb712.png)

### 既存テーマからダークテーマ作成
代替カラーパレットの機能を用いて，既存のテーマから簡単にダークテーマを作成することができるようになりました．

[Add an alternate color palette](https://docs.servicenow.com/bundle/xanadu-platform-user-interface/page/administer/navigation-and-ui/task/tb-edit-color-palette.html
 "Add an alternate color palette")

代替カラーパレットを追加する際，Washington DC時点ではベースのパレットの選択肢はなく，デフォルトのライトパレットで作成していく必要がありますが，Xanaduではダークパレットの選択肢が出現し，簡単にダークテーマを作成できます．

|Washington DC|Xanadu|
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/c5f43e67-e16f-81f2-6bb2-29c88e13ea48.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/b377af24-5341-33c0-430e-93f52a5dd114.png)|
|ベースのパレットの選択肢が無い|ベースとしてダークパレットを選択可|

以下の画像は実際に作成したダークテーマです．テーマメニュー画面にて，新たなカラーパレットとしてダークパレットを選択できることが確認できます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/3be7695e-06ae-504b-644b-11fc229bb95d.png)

:::note warn
代替カラーパレットを追加する際，Theme Builder画面で適切なスコープを選択しないと [Add alternate color palette] が表示されないので，要注意です．筆者はそこで詰まりました．
:::

# おわりに
本記事では Theme Builder の前リリースのWashington DCと比較しながら，Xanadu新機能を整理してみました．

これまで通りにガバナンスは効かせながら，よりユーザーのテーマ設定の自由度が高まった印象です．上記で紹介した以外にも，そもそもTheme BuilderのManagerページのUIにも変更が加わっており，「Webテーマとモバイルアプリテーマの個別管理」や「代替カラーパレットのグループ表示」により，テーマ管理もしやすくなっていますので，気になる方はぜひ実機で確認してみてください！

今回の調査でServiceNowテーマ周りも奥が深いことが分かってきたので，またどこかで取り上げられればと思います！！

### 参考
以下に，本記事では取り扱わなかったその他参考リソースを示す．
* [Theme Builder: The Simple Way to Customize Your Instance](https://www.servicenow.com/community/next-experience-articles/theme-builder-the-simple-way-to-customize-your-instance/ta-p/2527483
 "Theme Builder: The Simple Way to Customize Your Instance")
 * [Next Experience UI Theming Overview](https://www.servicenow.com/community/next-experience-articles/next-experience-ui-theming-overview/ta-p/2332045 "Next Experience UI Theming Overview")