AWS Cloud9 で kintone カスタマイズ環境を構築する

# 概要

kintone のカスタマイズを クラウド環境で開発する為の環境を構築してみます。
今回の環境構築には次のツールを利用します。

* [AWS Cloud9](https://aws.amazon.com/jp/cloud9/)　AWS上のクラウドIDEサービス
* [customize-uploader](https://github.com/kintone/customize-uploader)　カスタマイズJavaScriptをkintone環境へファイルアップロードするツール


# 注意点

以下の操作で AWS Cloud9 が EC2インスタンス上で実行されます。最低30分は稼働してその分の料金が発生しますのでご注意ください。

* [AWS Cloud9 料金](https://aws.amazon.com/jp/cloud9/pricing/)

# AWS Cloud9 セットアップ

AWS Cloud9 をセットアップします。

## AWS Cloud9 関連リンク

* [AWS Cloud9](https://aws.amazon.com/jp/cloud9/)
* [AWSマンガ第 2 話：快適な統合開発環境( IDE )を手に入れろ！ ( 1 / 4 )](https://aws.amazon.com/jp/campaigns/manga/vol2-1/?sc_icampaign=awareness_awsmanga_cloud9&sc_ichannel=ha&sc_icontent=awssm-2422&sc_iplace=banner&trk=ha_awssm-2422_awareness_awsmanga_cloud9_banner)
* [AWS re:Invent 2017 - AWS Cloud9 のご紹介: Werner Vogels 基調講演 (日本語字幕)](https://www.youtube.com/watch?v=8rG47HjIjA4)
* [「 AWS Black Belt Online Seminar 」オンラインセミナー(録画）](https://www.youtube.com/watch?v=3Sl6Hzcw7Bk)
    * 注記 2019年4月よりCloud9は東京リージョンで提供されるようになっています。：[AWS Cloud9 が東京リージョンに対応しました](https://aws.amazon.com/jp/blogs/news/aws-cloud9-tokyo/)

 *2017年 AWS re:Invent のビデオは必見です。ぜひ。* 
 *AWS Black Belt Online Seminar は 2:40過ぎから本編が始まります。1.5倍速がおすすめ。* 


## ユーザーの利用想定環境

今回はユーザーが以下のような環境でCloud9を利用することを想定しています。

* AWS Cloud9 を利用するのは自分だけ (Express Setup)
* AWS のアカウントは取得済み
* 開発用の IAMアカウントを取得済み（セキュリティの為に必須）

## Cloud9 環境の構築

https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/environments.html

直ぐに始められる Express Setup で環境構築してみます。

### Step 0. AWS Cloud9 にログイン

https://console.aws.amazon.com/cloud9/ にアクセスして、Create environment ボタンをクリック。

<img width="1026" alt="スクリーンショット 2019-10-14 22.34.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/e46ec37e-0ae0-c929-b3c1-2062eec5117f.png">

### Step 1. Cloud9 環境に名前を付けます

ログイン後のページから Create environment を選択して 環境に名前を付けます。
名前は重複出来ません。

<img width="1131" alt="スクリーンショット 2019-10-14 22.38.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/2d4afe6b-3b29-cdb9-7ac2-55c889741185.png">

*　Nameフィールドに環境の名前を入力します。(「kintone JS Customize」としました。）
*　Descriptionフィールドに説明文を入力します。
 
### Step2. 環境を選択

「Configure settings」ページにて、Cloud9 が動作する環境を選択します。

![FireShot Capture 017 - Create a new environment - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/512567d7-224d-7419-17f8-c192730f693a.png)

* Environment type は 今回 EC2 を選択します。
* EC2 のインスタンスタイプは 最小の t2.micro を選択します。（無料枠も意識します）

![FireShot Capture 018 - Create a new environment - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/e973be9c-abaf-aed7-5350-5518883832d7.png)

* Platform は Amazon Linux を選択します。
* Cost-saving setting は EC2 で課金が大きくならないようにデフォルト(AWSおすすめ）の 30分 を選択します。
* IAM role では AWS Cloud9 を実行する IAM ロール が自動で作成されます。
* Network settiongs では Cloud9 が実行される EC2 の VPC を設定できます。今回はデフォルトVPC のままにします。

### Step3. 選択した内容を確認

「Review」ページでこれまで選択した内容を確認します。

![FireShot Capture 021 - Create a new environment - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/c65030bb-cf50-7641-7f9a-106654c35307.png)
![FireShot Capture 023 - Create a new environment - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/210bbf0b-c5a6-f770-ec49-c8e0305d12bd.png)

最後に「Create environment」を選択すると AWS Cloud9 環境が作成されます。

環境構築途中画面
<img width="1235" alt="スクリーンショット 2019-10-14 23.43.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/fb2fc8c9-9ef8-dcdb-eb0a-b2f4aa52bef1.png">

環境構築後画面
<img width="1246" alt="スクリーンショット 2019-10-14 23.45.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/4ad42b42-b94e-735f-f814-f66b2f3d5582.png">

---

# カスタマイズファイルアップロード

以降の操作は Cloud9 のターミナルで行います。

[customize-uploader](https://github.com/kintone/customize-uploader) を使い、Cloud9で作成したカスタマイズ用のJavaScriptファイルを kintone環境へアップロードします。

## サンプルファイルの作成

kintone にアップロードするサンプルファイルを作成します。

```hello_console.js
(function(){
    kintone.events.on('app.record.index.show', function(event) {
        console.log("レコード一覧画面を開きました");
    });
})();
```

## customize-uploader のインストール

customize-uploader をインストールします。

```bash
npm install -g @kintone/customize-uploader
```

## マニフェストファイルの作成

```customize-manifest.json
{
    "app": "100",
    "scope": "ALL",
    "desktop": {
        "js": [
            "hello_console.js"
        ],
        "css": [
        ]
    },
    "mobile": {
        "js": [
        ],
        "css": [
        ]
    }
}
```

## 環境変数の設定

環境

* [AWS Cloud9 Integrated Development Environment (IDE) のカスタム環境変数を操作する](https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/env-vars.html)

```bash
export KINTONE_DOMAIN='DOMAIN.cybozu.com'
export KINTONE_USERNAME='USERID'
export KINTONE_PASSWORD='PASSWORD'
```

## デプロイ

マニフェストファイルを指定してデプロイを実行します。

```bash
$ kintone-customize-uploader customize-manifest.json
Start uploading customization files
hello_console.js has been uploaded!
JavaScript/CSS files have been uploaded!
Customize setting has been updated!
Wait for deploying completed...
Wait for deploying completed...
Setting has been deployed!
```

## 画面

アプリの設定画面
<img width="650" alt="スクリーンショット 2019-10-15 22.17.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/02976cf2-57eb-c192-22cf-731578b1d6b4.png">

開発者コンソール
<img width="989" alt="スクリーンショット 2019-10-15 22.20.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/8dc4c253-e4b7-50bb-a0f8-79136b91c15a.png">

---

# 次のステップ

Cloud9にチュートリアルがあります。環境構築が終わっている場合は [ステップ 2: IDE の基本演習](https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/tutorial-tour-ide.html) から開始出来ます。


* [開始方法: AWS Cloud9 の基本的なチュートリアル](https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/tutorials-basic.html)
* [AWS Cloud9 Integrated Development Environment (IDE) で AWS Lambda 関数を操作する](https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/lambda-functions.html)


---

# 関連リンク

* [customize-uploaderでカスタマイズ用のJS/CSSファイルをコマンドラインからアップロードしよう！](https://developer.cybozu.io/hc/ja/articles/360015889812)
* [AWS Cloud9 で 環境 を使用する](https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/environments.html)