kintone開発環境作成

#1. 概要
kintoneの開発環境作成のやり方をまとめました。

 - ソースのカスタマイズ時
 - プラグイン開発時

のどちらにも対応しています。
開発中に何度もアップロードしなくて済むので作業が捗ります！

#2. 方針
kintoneのファイル参照先を、kintoneにアップロードされているファイルではなくローカルPC上にあるファイルにすることで、修正したファイルを確認するためにいちいちアップロードしなくてもいいようになります。
ローカルPC上にあるファイルを参照させるには、ローカルPCにWebサーバを立て、ファイルをURLで指定することができるようにします。
※デバッグが終わったら参照先を正式なものに直す必要があります。

今回はコードエディタに「Visual Studio Code」を使用し、拡張機能の「Live Server」を使うことでローカルPCにWebサーバを立てます。

#3. 使用ツール
 - Visual Studio Code（VSCode）
 - Live Server （VSCodeの拡張機能）
 - mkcert
 - plugin-packer（プラグイン開発の場合）

#4. 開発環境の準備
## 4-1. Visual Studio Codeをインストールする
下記のサイトからVisual Studio Codeをダウンロードしてインストールします。

https://code.visualstudio.com/

## 4-2. Live Serverをインストールする
① Visual Studio CodeでExtensionsアイコンをクリックして、Extensionsビューを表示します。
② 検索窓に「Live Server」と入力し検索します。
③ Live Serverをインストールします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/c74357df-11bc-acbf-26fe-80bf6e00dd45.png" width="500">

## 4-3. mkcertを使って証明書と秘密鍵を作成する
kintoneでは「http://～」のURLは指定できません。「https://～」である必要があります。
下記のページからmkcertをダウンロードし、証明書と秘密鍵を作成します。

https://github.com/FiloSottile/mkcert/releases/

Windowsの場合の手順を以下に書きます。
① Windowsの場合、mkcert-v1.4.3-windows-amd64.exeをダウンロードします。
（1.4.3は記事作成時の最新です。バージョン部分は適宜読み替えてください。）
② コマンドプロンプトで下記のコマンドを実行します。

```
(mkcertをダウンロードしたフォルダ) > mkcert-v1.4.3-windows-amd64.exe -install
```
<font color="Gray">※PCにJavaが入っている（環境変数に「JAVA_HOME」がある）場合、Javaのルートストアにもインポートしようとしてエラーメッセージが表示されます。
エラーが出ても以降の操作に問題はないですが、コマンドプロンプトを「管理者として実行」で立ち上げるとエラーは出なくなります。</font>

セキュリティの警告が表示されたら「はい」をクリックする

```
(mkcertをダウンロードしたフォルダ) > mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1 ::1
```

以上を実行すると、mkcert-v1.4.3-windows-amd64.exeと同じフォルダ内に秘密鍵と証明書ができています。

 - localhost+2.pem （証明書）
 - localhost+2-key.pem（秘密鍵）

## 4-4. LiveServerの設定を行う

① Visual Studio Codeの[File]>[Open Folder]で開発するソースフォルダを選択しておきます。
② Visual Studio Codeの画面左下にある歯車マーク > [Settings]をクリックします。
③ [Workspace]を選択し、検索窓に「Live Server http」と入力します。
④ 下記のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/15773f66-5eb7-1711-8f77-f4885cbf4a3d.png)

|項目|値|
|:---|:---|
|enable|true|
|cert|4-3で生成された証明書のパス|
|key|4-3で生成された秘密鍵のパス|
|passphrase|空|


## 4-5. LiveServerを起動する

Visual Studio Codeの[File]>[Open Folder]でソースフォルダを選択しておき、
画面下の「Go Live」をクリックするとWebサーバが起動します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/a4ef49a1-7a70-6dd9-77a9-0e3d30bd1ac3.png" width="500">

ブラウザが立ち上がり、各ソースファイルを「https://127.0.0.1:5500/～」
で参照することができるようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/9ea36f79-f12e-856f-250d-ebd69d968d5e.png" width="500">

***
この章の内容は下記のサイトに詳しく書かれています。
*Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう！*
https://developer.cybozu.io/hc/ja/articles/360026502091

# 5. カスタマイズファイルの場合
kintoneの[アプリの設定] > [JavaScript / CSSでカスタマイズ]で、ローカル環境のファイルのURLを指定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/a993f77a-e367-6a46-7232-87eb5edcdf0a.png" width="400">

一度指定すれば、その後ソースを修正した後にいちいちアップロードしなくても「アプリを更新」するだけで修正した内容が反映されます。


# 6. プラグイン開発の場合
## 6-1. マニフェストファイルを編集する
プラグインのファイル群の中にあるmanifest.jsonの中で、編集したいファイルのパスをローカル環境のURLに変更します。
例）
css/addin-style.css
↓
https://127.0.0.1:5500/css/addin-style.css

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/cf616891-9f0a-4696-496b-6180e79350a4.png)

## 6-2. 作成したプラグインのアップロード
### ① Node.jsをインストールする
https://nodejs.org/ja/

既にNode.jsが入っている場合は、バージョンを確認します。

```
> node -V
```

この後インストールするplugin-packerに必要なNode.jsのバージョンは以下のサイトのengines プロパティに書かれているので確認します。
https://github.com/kintone/js-sdk/blob/master/packages/plugin-packer/package.json

```json
  "engines": {
    "node": ">=12"
  }
```
上記の場合、Node.jsのバージョンは12以上が必要です。


### ② plugin-packerをインストールする
plugin-packerをインストールします。

```
> npm install -g @kintone/plugin-packer
```

この時に、Node.jsをインストールしてすぐだと
> 'npm' は、内部コマンドまたは外部コマンド、
> 操作可能なプログラムまたはバッチ ファイルとして認識されていません。

というメッセージが表示されるかもしれません。
コマンドプロンプト画面を新規に開いて再度やってみてください。

また、社内のネットワークだとプロキシでエラーになることがあります。
下記の記事を参考にプロキシの設定をしてみてください。

https://qiita.com/ymaru/items/cf513ab05fe0ebac7d3b

### ③ プラグインをパッケージングする
下記のページの「基本の使い方」を参考に、プラグインをパッケージングします。

*plugin-packerを使ってプラグインファイルをパッケージングしよう！*
https://developer.cybozu.io/hc/ja/articles/360000910783

＜参考＞
*プラグイン開発支援ツール群の案内*
https://developer.cybozu.io/hc/ja/articles/360000975763

### ④ アップロード

プラグインを追加する場合は、まずシステム管理でプラグインを読み込み、アプリの設定で追加します。

 1) 　[kintoneシステム管理] > [プラグイン]ページで「読み込む」をクリックし、①で作成したzipファイルを読み込む。
 2) 　[アプリの設定] > [プラグイン]で「プラグインの追加」をクリックし、プラグインを追加する。

一度アップロードすれば、その後ソースを修正した後にいちいちアップロードしなくても「アプリを更新」するだけで修正した内容が反映されます。

#7. デバッグが終わったら
本番環境では、ローカル環境のURLを本番のパスに変更しておきましょう！