ServiceNow では新たな UI のフレームワークである Now® Experience UI Framework (以下、Now Experience と表記)の提供を開始しており、Agent Workspace などの Workspace のユーザーインターフェースを実装する際に Now Experience がすでに採用されています。さらに、Orlando バージョンでは、Workspace を構成する要素の 1 つである、ランディングページを UI Builder を使って作成することができようになりました。今後のバージョンで UI Builder で作成できる箇所が増え、Now Experience が ServiceNow のユーザーインターフェースを構成する技術の中心へと変わっていく予定になっています。

UI Builder にはページを構成するための UI コンポーネントが標準でいくつか用意されていますが、自身で開発したカスタム UI コンポーネントを追加することも可能になっています。そのカスタム UI コンポーネントを開発するためのツールとして Now® Experience CLI と呼ばれる node.js をベースとしてローカルでの UI コンポーネント開発を可能にする CLI (Command Line Interface)が提供されています。

今回は、このNow® Experience CLI の環境構築から実際に簡単な UI コンポーネントを開発、展開する様子を紹介します。

まず、事前準備として node.js およびパッケージ管理ツールで npm (Node Package Manager) の導入が必要となるので、開発する環境に最新の LTS (Long Term Support)バージョンを node.js (https://nodejs.org/en/) のサイトからダウンロードして導入を行ってください。なお、npm も node.js のサイトからダウンロードしたモジュールに含まれているので別途の導入は不要です。node.js の導入が完了したら Now® Experience CLI の導入を行います。Now® Experience CLI は node.js のパッケージとして提供されているので、npm コマンドを利用して導入が可能です。具体的には以下のコマンドをコンソールから実行します。

$ npm install --global @servicenow/cli@orlando

macOS において、管理者権限を持たない環境などでパーミッションの問題で導入できない場合は、こちらのサイト(https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally)で紹介されている回避策をコマンド実行前に施してください。

インストールが正しく完了すると、now-cli コマンドが利用可能になります。

環境によっては keytar パッケージの導入が必要になります。now-cli を実行時に keytar が存在しないという内容のエラーが表示された場合には、以下のコマンドで keytar パッケージを導入してください。

$ npm install --global keytar

これで、Now® Experience CLI の導入が完了となり、新たな UI コンポーネントを開発する環境が整った事になります。

実際に UI コンポーネントを開発する際には、Now® Experience CLI を利用して開発対象となる ServiceNow のインスタンスにログインをして、プロジェクトを作成するところから始めます。ServiceNow のインスタンスのログインは以下のコマンドを実行します。

$ now-cli login --host http://<インスタンス名>.servicenow.com --method basic --username <ユーザー名(admin)> --password <パスワード>

次に、以下のコマンドでプロジェクトを作成します。

$ now-cli project --name <プロジェクト名> --scope <スコープ名> --offline

最後の “--offline” オプションを利用するとオフラインでの開発を可能にするために必要ファイルをローカルに用意し、スコープ名のチェックをスキップするができるようになります。次に、開発に必要なパッケージをインストールするために以下のコマンドを実行します。

$ npm install

これで、UI コンポーネントを開発するためのプロジェクトの生成が完了します。作業を行ったディレクトリに必要なファイルが作成されていることを確認してください。

生成されたプロジェクトに対して必要なコーディングを行う事で UI コンポーネントの開発を行えます。VS Code などの好みの開発環境でコーディングを行う事が可能になります。

VS Code を利用しての ServiceNow アプリケーションの開発の詳細についてはこちらを参照してみてください。(https://community.servicenow.com/community?id=community%5Fblog&sys%5Fid=f3c88b06dbf94c501cd8a345ca961944)

ローカルで開発した UI コンポーネントを実行するには、以下のコマンドを実行します。

$ now-cli develop

すると、以下のようなメッセージが表示され、ここで指定された URL で開発した UI コンポーネントを実行することができます。

｢wds｣: Project is running at http://localhost:8081/

なお、develop タスク実行中はオンザフライで UI コンポーネントの実行が可能なので、コード変更の結果を再デプロイすること無く、リアルタイムに確認することができます。

開発が完了したら、プロジェクトに存在する now-ui.json を編集し、以下のコマンドでインスタンスにデプロイすることができます。

$ now-cli deploy

デプロイが完了すると開発した UI コンポーネントが UX Component Definition(sys_ux_lib_component) テーブルに登録され、インスタンス上で利用可能となります。

いかがでしょうか？UI コンポーネントを開発する際にコーディングだけに集中できるよう便利な機能を Now® Experience CLI が提供しているので、効率的に開発いただけると思います。是非とも便利な UI コンポーネントの開発にチャレンジしてみてください。

最後に Now® Experience UI Frameworkおよび Now® Experience CLIに関するリファレンスを紹介します。

製品ドキュメントに環境セットアップに関するドキュメントが用意されています。

https://docs.servicenow.com/bundle/orlando-servicenow-platform/page/build/components/concept/custom-...

開発者ガイドは Developer Poral に用意されています。

https://developer.servicenow.com/dev.do#!/guide/orlando/now-experience/ui-framework/api-reference/co...本文中に紹介したカウンターアプリケーションのサンプルコードはこちらで紹介されています。

https://developer.servicenow.com/dev.do#!/guide/orlando/now-experience/ui-framework/examples/counter