LoginSignup
0

More than 3 years have passed since last update.

posted at

updated at

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

概要

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

  • AWS Cloud9 AWS上のクラウドIDEサービス
  • customize-uploader カスタマイズJavaScriptをkintone環境へファイルアップロードするツール

注意点

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

AWS Cloud9 セットアップ

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

AWS Cloud9 関連リンク

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

ユーザーの利用想定環境

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

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

Cloud9 環境の構築

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

Step 0. AWS Cloud9 にログイン

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

スクリーンショット 2019-10-14 22.34.02.png

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

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

スクリーンショット 2019-10-14 22.38.56.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

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

FireShot Capture 018 - Create a new environment - ap-northeast-1.console.aws.amazon.com.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
FireShot Capture 023 - Create a new environment - ap-northeast-1.console.aws.amazon.com.png

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

環境構築途中画面
スクリーンショット 2019-10-14 23.43.49.png

環境構築後画面
スクリーンショット 2019-10-14 23.45.32.png


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

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

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 をインストールします。

npm install -g @kintone/customize-uploader

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

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

環境変数の設定

環境

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

デプロイ

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

$ 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!

画面

アプリの設定画面
スクリーンショット 2019-10-15 22.17.47.png

開発者コンソール
スクリーンショット 2019-10-15 22.20.35.png


次のステップ

Cloud9にチュートリアルがあります。環境構築が終わっている場合は ステップ 2: IDE の基本演習 から開始出来ます。


関連リンク

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
What you can do with signing up
0