kintoneのカスタマイズ効率をあげよう。脱超初心者編1

**Qiitaではなく、下記のサイトに移行しました**
**続きも掲載していますのでこちらをご覧ください**

https://potara.net/tag/%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e5%8a%b9%e7%8e%87%e3%82%b7%e3%83%aa%e3%83%bc%e3%82%ba/

kintoneのカスタマイズ効率を上げたいと思っている人向けの記事です。
例：JavaScriptファイルの手動アップロードが面倒だと思っている人
　　JSEdit for kintoneを使っている人
　　Visual Studio Codeを使ってワンアップしたい人
　　customize-uploaderのアップロード反映まで長いと思っている人

# Visual Studio Codeのインストール
以下からダウンロードしてインストールします。
https://code.visualstudio.com/

# Node.jsのインストール
以下からダウンロードしてインストールします。
https://nodejs.org/ja/

# Visual Studio Codeの設定
## Prettier
### やってくれること
こんなコードを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/a9b4814c-2b8f-2cc2-4ad8-db7e84943c34.png)

このように整形してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/6d25c7c6-e18e-a546-2507-1fbc93848749.png)

### インストールと設定
[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)を開き、Installをクリックしてインストールします。
![customize0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/d9143195-219f-0edc-31d4-269295624cff.png)

Overviewに書いてある内容を見ると、デフォルトのフォーマッターを指定できます。
とりあえず最小構成で導入したいのでJavaScriptファイルのみ保存時にPrettierで整形します。

settings.jsonを開いて以下の内容を貼り付けます。すでに設定が存在する人は追記してください。
[settings.jsonの開き方がわからない人はこちら](https://qiita.com/y-w/items/614843b259c04bb91495)

```json
{
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```


またnpmのPrettierをインストールしておくと、そのPrettierを利用して整形してくれるようです。こちらもインストールしておきます。

まずはエクスプローラー上からプロジェクトフォルダを作りましょう。
例えば「C:\Users\user-name\Documents\git\customize-example」です。

Visual Studio Codeで作成したフォルダ（例の場合はcustomize-example）を開きます。
Ctrl + @を押してターミナルを表示し、以下のコマンドを実行します。

```powershell
> npm init
> npm install --save-dev prettier
```

npm init後に入力を求められますが、よくわからない人は全部Enterで大丈夫です。


## ESLint
### やってくれること
コードのおかしいところを指摘してくれます。
ESLintなしの状態でもある程度指摘してくれますが、ESLintを入れるとさらに指摘してくれる範囲が拡がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/10a484b3-2469-90bb-973c-f5764db8463c.png)

### インストールと設定
[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)を開き、Installをクリックしてインストールします。

これだけだと動作しないので、npmのESLintもインストールします。
また[サイボウズオススメのESLintの設定](https://github.com/cybozu/eslint-config)があるのでこれも合わせてインストールします。
先ほどと同じフォルダ上で以下のコマンドを実行します。

```powershell
> npm install --save-dev eslint @cybozu/eslint-config
```

ESLintの設定ファイルを作成します。ファイル名は.eslintrc.jsにします。
kintoneはIE11も動作対象なのでES5のルールにしておきましょう。

```javascript:.eslintrc.js
module.exports = {
  extends: ["@cybozu/eslint-config/presets/kintone-customize-es5-prettier"]
};
```

## customize-uploaderのインストール
カスタマイズファイルの反映を自動でやってくれるcustomize-uploaderをインストールします。

```powershell
> npm install --save-dev @kintone/customize-uploader
```

## local-web-serverのインストール
customize-uploaderも反映までは数秒かかって手間なので、ローカルにWebサーバーを立てます。

```powershell
> npm install --save-dev local-web-server
```

## カスタマイズ反映の準備
customize-uploader用のファイルを作ります。
まずはテスト用です。アプリIDは書き換えてください。

```json:manifest.dev.json
{
  "app": "アプリID",
  "scope": "ADMIN",
  "desktop": {
    "js": ["https://127.0.0.1:8000/index.js"],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}
```

次は本番用です。

```json:manifest.prod.json
{
  "app": "アプリID",
  "scope": "ALL",
  "desktop": {
    "js": ["index.js"],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}
```

ここまでの作業でファイル構成は以下のようになっています。
![customize9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/2126b62b-818f-ace2-0278-dd713736aba7.png)

次にpackage.jsonにws, dev, prodの3行を追加します。
ドメイン名とユーザー名は書き換えてください。

```json:package.json
  "scripts": {
    "ws": "ws --https",
    "dev": "kintone-customize-uploader --domain xxx.cybozu.com --username xxx manifest.dev.json",
    "prod": "kintone-customize-uploader --domain xxx.cybozu.com --username xxx manifest.prod.json",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

## テスト時のカスタマイズ反映
以下のコマンドを実行するとローカルのindex.jsを参照します。

```powershell
> npm run dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/7ce61178-43c9-af0c-84a7-04686d71bd7c.png)

ブラウザがアクセスできるようにlocal-web-serverを起動します。

```powershell
> npm run ws
```

カスタマイズが反映されない場合は https://127.0.0.1:8000/ にアクセスしてください。
以下のような画面が表示されるので、「詳細設定」をクリック、「127.0.0.1 にアクセスする（安全ではありません）」をクリックしてください。
これで反映されるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/4ff3bb11-e24f-37d5-8c1c-5f7574808310.png)



## 本番時のカスタマイズ反映

以下のコマンドを実行するとカスタマイズファイルをアップロードします。

```powershell
> npm run prod
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/7b36eec3-0154-fea0-09db-8fd6c578e32d.png)