[ServiceNow] Theme Builderを使ってみる (1) - 基本機能 -

# はじめに

2024年9月にServiceNow XanaduリリースがGAとなり，システム管理者として触れることの多い Next Experience もいくつかの機能がアップデートされました．
本記事では，その中でもハイライトされていた Theme Builderを実際にPDIで触りながら，まずは基本機能を確認してみます[^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年9月）時点の情報です．最新の情報は製品ドキュメントを参考にしてください．
[Product Documentation | ServiceNow](https://docs.servicenow.com/ "Product Documentation | ServiceNow")
:::

---
### 本記事のまとめ
* Theme BuilderはUtahリリースで発表されたテーマを作成するためのガイド付きローコードツールである
* プラグインをインストールすることでPDIでも利用できる
* 作成したテーマを公開することでNext Experienceに適用できる

---
# Theme Builder とは

2023年5月のUtahリリースにて発表された[^2]会社のブランドをエクスペリエンスに反映するテーマを作成するためのガイド付きのローコードツールです．
ServiceNow Storeで提供されるアプリケーション[^3]だが，後述の通り，PDIからでもプラグインをインストールすることで利用できます．

[^2]:[ServiceNow Launches Major Platform Expansion with the Utah Release](https://www.servicenow.com/company/media/press-room/now-platform-utah-release.html "ServiceNow Launches Major Platform Expansion with the Utah Release")

[^3]:[Theme Builder](https://store.servicenow.com/sn_appstore_store.do#!/store/application/c8d18ffa2b695cec36b671673e27938d/ "Theme Builder")
---
# PDIで実際に触ってみる
では早速，PDIに Theme Builder プラグインをインストールして，実際に新しいテーマを作成してみます．操作は以下の製品ドキュメントを参考にします．

[テーマビルダーでの ネクストエクスペリエンス の構成](https://docs.servicenow.com/ja-JP/bundle/xanadu-platform-user-interface/page/administer/navigation-and-ui/task/configuring-next-experience-with-theme-builder.html
 "テーマビルダーでの ネクストエクスペリエンス の構成")

### プラグインのインストール
まずはPDIにプラグインをインストールします．

:::note
PDIでの操作の場合は，ServiceNow Storeからのインストールは不要
:::

* フィルタナビゲーターから All > System Definition > Plugins でApplication Manager を開き，「Theme Builder」をインストール（本記事ではバージョン 4.0.1 を利用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/49490186-9a4d-bc68-33da-d3b763fdd913.png)

### テーマの作成
基本的には表示されるモーダルの指示に従ってテーマを作成できます．

* プラグインのインストール完了後，フィルタナビゲーターから All > Now Experience Framework > Theme Builder を選択

* 別のタブで Theme Builder が開くので，「Home」ページから 「Create a theme」ボタンを押下してテーマを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/6b039b17-3d1f-5d52-c804-4e55d04741c0.png)

* 表示されたモーダルの内容を確認し，「Continue」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/910148cf-1fb1-58f3-b7cc-9af283424600.png)

* テーマ名称を入力して「Next」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/6e99226f-42fc-94b7-2ff0-21cac5cb874c.png)

* プライマリカラーを選択して「Next」ボタンを押下（画像はデフォルトのカラー）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/8451fdf3-b060-76b0-bd67-ca838c9475d5.png)

* セカンダリカラーを選択して「Next」ボタンを押下（画像はデフォルトのカラー）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/edafa213-7b9f-a108-711e-478e75d745e5.png)

* 中間色を選択して「Next」ボタンを押下（画像はデフォルトのカラー）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/890d0534-7905-b359-77ca-b96ea83ae9bb.png)

* 必要に応じて追加の色を選択して「Next」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/926dbf4a-c18b-e153-70e7-b5a1c919e786.png)

* ロゴを追加して「Next」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/abdfe213-99bd-3e8b-d82b-a77df4416517.png)

* テキストのフォントを選択して「Next」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/eeef1f09-cc6b-ee49-5197-52c67d1c2011.png)

* インターフェイス内のコンポーネント (ボタン、モーダル、ドロップダウン メニューなど) のコーナー形状を選択して「Next」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/de808896-9b90-aa3a-1c85-0132d9d967f2.png)

* 選択内容を確認して「Create theme」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/5e478c3f-61d8-b7cb-b994-301abfc097e5.png)

### 作成したテーマの確認
「Editor」ページにて，Workspaceや各種モジュール画面でのテーマの見え方を確認できます．
* 「UI Styles Preview」を選択して，Workspaceでの各種UIの見え方を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/371823a8-526a-459e-5501-245b813d8a2d.png)
* 「Experience preview」を選択して，各種モジュールでの見え方を確認（画像はApplication Managerのプレビュー）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/5182d6b3-f62f-e7a4-d974-cea321d82b78.png)

### 作成したテーマの公開
「Manager」ページにて，作成したテーマを公開し，テーマを反映することができます．

* 公開したいテーマの右上の三点リーダーより，「Publish」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/70857065-0b3d-e631-ee33-bd4bcb51eb0b.png)
* 「Publish the theme」ポップアップが表示されるので，「Publish」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/c127e008-4c0e-60c5-50ed-3d46ecda00cb.png)

* 「Published」セクションに移動されたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/9df8ab5b-3192-5d24-0e97-0b90752e087c.png)

* ウィンドウを再読み込みして，自動的にテーマが変更されたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277712/248330d0-0530-1865-5f1b-d9afb4b5a55f.png)

# おわりに
本記事では Theme Builder の基本機能について取り上げてみました．

Theme Builder 自体は，既に1年半前にリリースされた機能ではありますが，自身はこれまでに触ったことが無く，情報だけを追っているような状態でした．想像よりも簡単にテーマを作成および反映することができたので，ServiceNowインスタンスをブランドカラーに統一したいニーズや，複数インスタンスが存在する場合にインスタンスを直感的に識別するためのテーマ変更への対応にも十分に活用できるレベルにある印象です．

次回の記事にて，Xanaduリリースの新機能について，まとめてみる予定です！