LoginSignup
1
0

More than 5 years have passed since last update.

@Kisaragi13

ServiceNow Angular(>=2.x.x)を使って画面を作る(導入編)

Last updated at Posted at 2017-07-09

ServiceNowでは、ポイント＆クリックでフォーム画面を作ることはできるしクライアント側でのスクリプト実行やワークフロー、ビジネスロジックなどを使えば充分な多機能画面も作ることができる。しかし各スクリプトがあちこちに散らばるせいで、だんだんと管理が面倒になり予想外のバグが生まれることもしばしば...
そこでAngular(>=2.x.x)で画面も機能もまとめて作成することを目指してみる。本記事では環境構築とサンプルプログラム実行までを行う。

今回の環境情報

  • インスタンスのビルドタイプ：Jakarta
  • 開発用PCのOS：Windows7（ただMacもほとんど変わらない）

環境を整える

インストール関連

インストーラの選択肢は各自で必要に合わせて変えてください。

1. Node.js

Node.jsのダウンロードページへアクセスし、Windows版のインストーラをダウンロード、実行する。
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png

2. git

Gitのホームページへアクセスし、Windows版のインストーラをダウンロード、実行する。
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png
　
image.png
（最後撮り忘れた）
image.png

3. Angular-cli

コンソールから npm install -g @angular/cli を実行する。
image.png
見切れているけどインストール成功時
image.png

ng2-snowをgitからクローン

  1. コンソールから git clone https://github.com/nathangrove/ng2-snow.git snow-demo を実行する（クローン名は自由）
    image.png

    snow-demoの中身はこんな感じ
    image.png

  2. カレントディレクトリをsnow-demoフォルダに移してから npm install を実行する。
    image.png

  3. 続いてnpm run setupを実行する。途中でインスタンスのURLやユーザ名、パスワードなどを聞かれるので答える。
    （ちなみに、Angular側で事前に受け入れ先のアプリケーションを作成しておく必要がある）
    image.png
    image.png

  4. リリースするにはnpm run deployを実行する。
    image.png
    　
    Angular側で次の画面が確認できれば成功。
    image.png

あとはAngularのコードを書き加えてリリースを繰り返すだけ:thumbsup_tone2:

さいごに

ローカル環境でAngularのビルド、結果確認をするにはnpm run startを実行する。
（デフォルトではlocalhost:4200で確認できる）

参考サイト

ServiceNow Community - Angular2 Development Environment -
https://community.servicenow.com/docs/DOC-6626

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0