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

Erakisはkintoneのカスタマイズ環境です

github : https://github.com/IshigiwaKenichiro/erakis
Erakisを皆さんに楽しんでほしいです。

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

Erakisで環境を構築する。

さっそく開発してみます。

インストールまで

適当な場所でNode.jsパッケージを作ります。下記コマンドをCMD/PowerShellなどで実行。

npm init

Erakisの動作にはparcelを利用しています。

npm i -D parcel

Erakis本体をインストールします。

npm i erakis

注)mkcertのインストール

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

choco install mkcert

Chocolatyがインストールされていない場合、下記にアクセスして、PowerShell用のインストールコマンドを取得します。
https://chocolatey.org/install

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

★★★
Chocolatyでのmkcertのインストールが終わったら、mkcert自体をインストールします。

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まで終わるとこんな感じです。ここまで特別な入力は必要ありません。

npx erakis profile add

kintoneへのログイン情報（プロファイル）を作成します。
一度Erakisを使っていて設定されていれば、このセットアップは必要ありません。

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

npx erakis app connect

kintoneアプリと接続します。

アプリのURLをくれと言ってきます。

選択したプロファイルと同じ環境でkintoneアプリを作って、そのURLを与えてあげます。

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

コマンドが完了するとsrcディレクトリにファイルが作成されます。

今回は"my-customization", "my-customization-2"という名前で２つのアプリへのカスタマイズを作ってみました。

npx erakis start

npx erakis startを実行すると、このような画面がブラウザで表示されます。

kintone側のjavascript設定はこのようになります。

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

kintoneのアプリにアクセスしてみます。

👆のようなポップアップが出ます。

これはソースのこの部分が効いています。

このalertは味気ないので、SweetAlert2を利用してデコってみます。

コマンドラインではErakisサーバーが動いているので、別のコンソールを用意します。
＋ボタンからcmdやpowershellを呼び出します。

SweetAlert2をインストール

npm i sweetaler2

そうしておいて、コードを変更します。

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;
});

デプロイ

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

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

npx erakis launch app

deploy typeはローンチしたカスタマイズの状態を指しています。

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

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

リリース

npx erakis build

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

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