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

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

今回の環境情報
>
 - インスタンスのビルドタイプ：Jakarta
 - 開発用PCのOS：Windows7（ただMacもほとんど変わらない）

# 環境を整える
## インストール関連
インストーラの選択肢は各自で必要に合わせて変えてください。
### 1. Node.js
<details><summary>[Node.jsのダウンロードページ](https://nodejs.org/ja/download/)へアクセスし、Windows版のインストーラをダウンロード、実行する。</summary>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/9a6cc91f-8ff3-3fd2-2a69-39d70a3d3092.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/da02adb9-94e2-199e-2ece-4f7f37d7f1fb.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/ca9ea7e6-6614-d861-f4ed-31d835137315.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/c234b67b-2579-c732-9fdd-42216920fb8e.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/bb0fee9c-5fa9-ffaa-380a-b106b7060034.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/4a7019b5-02ab-4c2b-4abb-c09317092dce.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/90bc4087-79eb-fd53-8639-498b2e188045.png)
</details>

### 2. git
<details><summary>[Gitのホームページ](https://git-scm.com/)へアクセスし、Windows版のインストーラをダウンロード、実行する。</summary>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/2d3ebc96-2820-0570-f757-f99b3f3e037b.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/e1cba3f4-f273-1658-5ffb-b4a3f0449f02.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/765fb22d-27b7-1c87-96ad-f69647f5dc7f.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/9c1b3d0a-5f9c-285f-f4b6-bb5d04440948.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/2bd631ea-76b8-df8c-1aca-d780c069809c.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/0dcb6ea5-8a5e-2ef8-7299-a1b3c789412a.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/5e4f006a-fb79-3a94-bf4d-49274a5a6fa5.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/2328a17b-363a-b58f-25db-5706c0657222.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/68930b0e-ba28-018d-cae5-ab2992b6af14.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/7e0fb731-9c0e-19c3-fb33-6b9d20f3ffc8.png)
　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/675a78f2-07b1-5c4f-c01b-bb47b92ebe13.png)
（最後撮り忘れた）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/f91b636f-c2bb-99fb-dfdd-190f457a86db.png)
</details>

### 3. Angular-cli
<details><summary>コンソールから `npm install -g @angular/cli` を実行する。</summary>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/6854dbf9-a70a-f8a7-5e60-74e96417474d.png)
見切れているけどインストール成功時
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/eb85dded-837e-db9c-026c-74b6252d92c7.png)
</details>

## ng2-snowをgitからクローン
1. コンソールから `git clone https://github.com/nathangrove/ng2-snow.git snow-demo` を実行する（クローン名は自由）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/adf3462d-6914-585c-5f3c-aac42a8940cd.png)
<details><summary>snow-demoの中身はこんな感じ</summary>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/f8dd365f-e55f-4ff4-59cf-7f18fda23d3e.png)
</detials>

2. カレントディレクトリをsnow-demoフォルダに移してから `npm install` を実行する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/de878353-5efa-568f-c85d-07fa23773000.png)

3. 続いて`npm run setup`を実行する。途中でインスタンスのURLやユーザ名、パスワードなどを聞かれるので答える。
（ちなみに、Angular側で事前に受け入れ先のアプリケーションを作成しておく必要がある）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/77dde21b-1392-1454-c583-d0682a456b15.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/6e2b1363-e472-fcc8-cc01-c1e2e90ab4c9.png)

4. リリースするには`npm run deploy`を実行する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/143c3499-389b-e603-c5f6-112258d55955.png)
　
Angular側で次の画面が確認できれば成功。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/7c77e0dc-1dd5-040e-dfdf-6105b56f0ab3.png)

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

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

# 参考サイト
> ServiceNow Community - Angular2 Development Environment -
https://community.servicenow.com/docs/DOC-6626