KintoneをJavascriptでカスタマイズするための開発環境構築

## はじめに
本記事は[エムスリーキャリア FY22 AdventCalendar](https://qiita.com/advent-calendar/2022/m3c)の12日目の記事です。

## やりたいこと
Kintoneを使うと簡単な業務アプリをノーコードで作成することができます。
ただ、開発要望が増えると、ノーコードで対応できないものが出てくると思います。

KintoneではJavascriptを使って機能を追加することができるので、複雑な処理にも対応することが可能です。
ただ、
1. Javascriptで処理を書く
2. Kintoneにアップロードする
3. 動作確認する
4. 動かなかったら1.に戻って修正する

を繰り返すのは時間がかかるので、少しだけこのサイクルを簡単にしたいと思います。

## 環境
主な利用ツール

* Docker
* mkcert（自己証明書）
* Vue.js 3（今回はVue.jsを利用するが、React等でも可能）


## 構築方法
以下の手順で構築し、Kintoneの画面に「Welcome to Your Vue.js App」を表示させてみます。

###  １．Docker環境を構築
Dockerfile
```
FROM node:18-slim

RUN apt-get -qq update && \
    apt-get -qq -y install curl zip unzip wget procps libnss3-tools && \
    apt-get -qq clean

RUN npm uninstall -g vue-cli && \
    npm install -g @vue/cli && \
    npm install -g eslint && \
    npm install -g axios && \
    npm install -g http-server

RUN curl -s https://api.github.com/repos/FiloSottile/mkcert/releases/latest | grep browser_download_url | grep linux-amd64 | cut -d '"' -f 4 | wget -qi - && \
    mv mkcert-v*-linux-amd64 mkcert && \
    chmod a+x mkcert && \
    mv mkcert /usr/local/bin/

RUN mkcert -install && \
    mkdir ~/cert && \
    cd ~/cert/ && \
    mkcert localhost 127.0.0.1

WORKDIR /opt/app

EXPOSE 8080

CMD ["/bin/bash", "-c", "http-server -c-1 ./public/ --ssl --key ~/cert/localhost+1-key.pem --cert ~/cert/localhost+1.pem"]
```

docker-compose.yml
```
version: "3"

services:
  app:
    image: kintone:1.0
    build: .
    container_name: kintone
    ports:
      - "8080:8080"
    expose:
      - "8080"
    volumes:
      - ./:/opt/app/
    tty: true
    stdin_open: true
```

### ２．DockerImageを作成および起動
```
$ docker-compose build
$ docker-compose up -d
```

### ３．Vueのプロジェクトを作成
```
$ docker-compose exec app vue create .
```
選択肢：
* library = Vue 3
* package manager = yarn

### ４．開発

#### 設定の変更
package.jsonのscripts.buildとwatchを以下のように書き換えます。
buildは本番用、watchは開発時に利用します。
```
"build": "vue-cli-service build --target lib src/main.js --mode production",
"watch": "vue-cli-service build --watch --dest public/assets/ --target lib src/main.js",
```

vue.config.jsのdefineConfigを以下のように変更して、yarn watch実行時にホットリロードされるようにします。
configureWebpackおよびcssを追加しています。
```
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    watchOptions: {
      poll: true,
    },
  },
  css: {
    extract: true
  },
});
```

#### プログラム修正
src/main.jsに以下を追加します。
※eslintのチェックでエラーが発生するため、今回はdisableにしておく。
```
/* eslint-disable */
kintone.events.on(["app.record.detail.show"], (event) => {
    createApp(App).mount("#user-js-hello")
})
```

#### Kintoneアプリの設定
フォームに「スペース」を設置し要素IDをhelloにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158070/b02ec7dc-d8aa-776c-cac8-7dc34b906977.png)

プログラムのuser-js-**hello**とKintoneの要素IDの**hello**を一致させます。
そうするとKintoneのスペース部分にVueが表示されます。


### ５．Kintone用にBuild
Buildして、app.umd.jsおよびapp.cssを作成します。
実行中はファイルを更新すると自動でBuildされます。
```
$ docker-compose exec app yarn watch
```


### ６．localhostでサーバーを起動
「docker-compose up -d」コマンド実行時にサーバーは起動されていると思います。
https://localhost:8080/assets/demo.html
でアクセスすると作成されたjsが表示されます。
自己証明書のためブラウザでアラートが表示されると思いますので、許可してください。

もしサーバーが起動していない場合は以下のコマンドで起動してください。
```
$ docker-compose exec app /bin/bash -c "http-server -c-1 ./public/ --ssl --key ~/cert/localhost+1-key.pem --cert ~/cert/localhost+1.pem"
```

### ７．KintoneにJavascriptおよびCSSを設定
「アプリの設定」 → 「JavaScript / CSSでカスタマイズ」でURLを指定して保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158070/de6b6745-fd29-880f-855a-a276b6f8d8d6.png)

最後に「アプリを更新」ボタンを忘れずに。
以上で完了です。

Kintoneでレコードを作成して表示してみてください。
以下のようにVueで作成されたアプリが表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158070/f16d98bd-574b-d694-0b29-74b2c0abeb47.png)

こうすることで、アップロードが不要になります。
1. Javascriptで処理を書く
2. ~~Kintoneにアップロードする~~
3. 動作確認する
4. 動かなかったら1.に戻って修正する

## Tips
* HTTPでサーバーを立ち上げてもKintoneから読み込めないため、**mkcertを使ってHTTPS**にしています。
* yarn serve --httpsでもHTTPSでアクセスできますが、yarn watchと同時実行がうまくできなかったためhttp-serverを利用しています。
* 利用するJavascriptおよびCSSはlocalhost経由であるため、**複数人が同時に作業しても問題ありません**。
* 「npm install @kintone/rest-api-client」を追加すると、**Kintoneの機能をフル活用**できるようになります。
* yarn buildを実行するとdist/配下に本番用のjsおよびcssが作られます。

## 参考
* [vue-cliで作成したVue.jsプロジェクトでホットリロードが効かない場合の対処](https://www.io-architect.com/wp/archives/5831)
* [kintoneでVue.jsを使ってみる](https://qiita.com/juri_don/items/3545b10c8ecee223d177)
* [http-serverによるローカル HTTPS server 構築 (5分でできる)](https://qiita.com/hbjpn/items/925c8012cd93d9165be6)