kintoneカスタマイズ環境「Erakis」のご紹介

# Erakisはkintoneのカスタマイズ環境です
github : https://github.com/IshigiwaKenichiro/erakis
Erakisを皆さんに楽しんでほしいです。

必要なものはNode.jsがインストールされたPCです。VSCodeがあるともっといいです。

# Erakisで環境を構築する。
さっそく開発してみます。
## インストールまで
適当な場所でNode.jsパッケージを作ります。下記コマンドをCMD/PowerShellなどで実行。
```bash
npm init
```
Erakisの動作にはparcelを利用しています。
```bash
npm i -D parcel
```

Erakis本体をインストールします。
```bash
npm i erakis
```



### 注)mkcertのインストール
開発サーバーのHTTPS化のため、mkcertを利用しています。
windowsマシンの場合はchocolaty経由でセットアップが可能です。
すでにインストール済みの場合は必要ありません。
**このコマンドは管理者権限が必要です。**
```bash
choco install mkcert
```

Chocolatyがインストールされていない場合、下記にアクセスして、PowerShell用のインストールコマンドを取得します。
https://chocolatey.org/install
![choco.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/e1674bef-0684-d4ef-c114-426d9a9e301f.png)

Chocolatyがうまくいかない場合はインストーラーがあります。
この記事を参考にしてみてください。
https://cybozu.dev/ja/kintone/tips/development/customize/development-know-how/use-visual-studio-code-live-server-extension/

★★★
Chocolatyでのmkcertのインストールが終わったら、mkcert自体をインストールします。
```bash
mkcert -install
```
これでローカル環境に自己証明書の認証局が作成されました。

---

mkcertのインストールははまりやすいポイントです。うまくいきましたでしょうか？

---

## 最初のカスタマイズ
Usageにしたがって、そのままコマンドライン(CMD/PowerShell）に貼り付けます。
```
# セットアップ
npx erakis init

# 自己証明書と秘密鍵の生成
npx erakis genkey

# プロファイルの作成(一度作ると何度でもつかえます。)
npx erakis profile add

# アプリとの紐づけ
npx erakis app connect

# 開発の開始
npx erakis start
```
### npx erakis init
.erakisディレクトリが作成されます。

### npx erakis genkey
.erakisディレクトリに秘密鍵とサーバー証明書が作成されます。
この証明書はPCにインストール済みなので、自己証明書のエラーが起こらないようになっています。

genkeyまで終わるとこんな感じです。ここまで特別な入力は必要ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/5539b51a-8663-687c-c25d-7824eef7379f.png)

### npx erakis profile add
kintoneへのログイン情報（プロファイル）を作成します。
一度Erakisを使っていて設定されていれば、このセットアップは必要ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/c5af3f6f-e8ee-53ac-ce56-c6e3a4a4e71d.png)

👆こんな感じで入力します。

### npx erakis app connect
kintoneアプリと接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/62df281b-a84b-009b-9981-b56c6d5e65e7.png)
アプリのURLをくれと言ってきます。

選択したプロファイルと同じ環境でkintoneアプリを作って、そのURLを与えてあげます。
![kintone-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/19ae3a03-a81e-0af9-3f79-be736b22063e.png)

同じようにこんどはproduction環境の情報を聞かれます。
開発と本番を分けるためですが、一緒でいい場合は、同じ情報を与えます。
（プロファイルとURLをおなじにしちゃう）

コマンドが完了するとsrcディレクトリにファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/f07df8cb-d6af-919b-481e-6c85d4a61e96.png)
今回は"my-customization", "my-customization-2"という名前で２つのアプリへのカスタマイズを作ってみました。

### npx erakis start
npx erakis startを実行すると、このような画面がブラウザで表示されます。
![erakis-start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/fc7d31a8-ce59-f8c9-9a89-f14ff65c62d1.png)


kintone側のjavascript設定はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/0ab24a7f-d48f-672f-5be2-8e1fcb9de9b1.png)

localhostで提供されたビルドされたソースをkintoneが読み取っている状態です。

kintoneのアプリにアクセスしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/42b0b6a0-9639-c4c1-0fdd-4dd8430966d3.png)
👆のようなポップアップが出ます。

これはソースのこの部分が効いています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/4d1c9dcb-883c-1764-d53c-390caf4b3915.png)

このalertは味気ないので、SweetAlert2を利用してデコってみます。
![erakis-customize.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/3c5eb9c6-e983-71d4-26e2-8ece03b152f4.png)
コマンドラインではErakisサーバーが動いているので、別のコンソールを用意します。
＋ボタンからcmdやpowershellを呼び出します。

SweetAlert2をインストール
```bash
npm i sweetaler2
```

そうしておいて、コードを変更します。
```typescript
import './customize.desktop.css';
import Swal from 'sweetalert2';

const w: any = window;

w.kintone.events.on(['app.record.index.show'], async (ev) => {

    Swal.fire({
        icon: 'success',
        text: 'hello kintone!'
    });

    return ev;
});
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/69f3a4b9-235f-f5e9-b67f-d0daf0947a0c.png)

# デプロイ
いま、localhostでJSファイルをホストしてしまっていて、他の人からはこのカスタマイズが効いているように見えません。

なので、この作ったJSファイルをkintoneにアップロードする必要があります。

```bash
npx erakis launch app
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/f8aaf1cf-b01b-6c58-99d0-7b8a473bebf2.png)

deploy typeはローンチしたカスタマイズの状態を指しています。
- local
    - localhostで開発中で、開発者しかカスタマイズが見えていない状態
- fixed
    - localhostで開発中のソースを難読化せずにkintoneへアップロードした状態
- release
    - 難読化ビルドしたファイルがkintoneへアップロードされた状態

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/c64c5a5a-70fa-6453-b64e-895c2161e128.png)

fixedデプロイするとこんな感じで、kintoneにファイルが上がるので、
お客さんや仲間からも見えるようになります。

# リリース
```bash
npx erakis build
```
プロジェクトの"build"ディレクトリに難読化されたファイルができます。
先述したreleaseデプロイはこのbuildが実施されていない場合、エラーになります。

```bash
npx erakis launch app
>? Choose application my-customization
>? Choose environment. dev
>? Choose deploy type. released
>my-customization is launching...
>my-customization is launch as released
>my-customization was launched successfully. GoodLuck!
```
これでカスタマイズが完了し、圧縮され難読化したファイルがアップロードされました。

# なぜ作ったか
ぼくはkintoneのカスタマイズを生業にしているのですが、お客様の目の前で開発することがあります。その時に、さっと構築し、安全に開発を終えられる(つまりプロジェクトをgithubへpushして完了する)環境が欲しいと思っていました。

kintoneの開発環境はいくつかあって、とても素晴らしいと思っています。ただ、それらはいくつか問題を抱えています。

ぼくが考える、kintoneの開発環境の要件は以下になります。

- VSCodeで編集できる
    - VSCodeの豊富な拡張機能がやっぱり必要
- no-config(no-webpack!)
    - 共同開発者がプロジェクトを破壊するのを防ぐ😅
- コマンドライン
    - npmと統合させて操りたい
- ちょっとしたホットローディング
    - 毎度コンパイラを動かすのはめんどくさい
    - kintone画面を更新するくらいはやってもいい
- TypeScriptも書きたい
    - 開発効率が3倍くらい違うのでさすがにJSはもう書かない

Erakisは素早い環境の構築と安全な管理、デプロイ、環境の共有を目指しています。
ご意見、ご感想をお待ちしております。