kintoneの開発環境Erakisで開発と本番を分ける方法（と画像をサーバーなしで扱う）

[Erakis](https://www.npmjs.com/package/erakis)はkintoneのカスタマイズを簡単高速にする開発環境です。

本番環境と同等の開発環境を維持するのはとても大変ですよね。Erakisを導入したカスタマイズで、開発と本番を分ける方法について説明します。

https://www.npmjs.com/package/erakis


# 概要
Erakisで管理する環境は２つです。
- dev : development (開発環境)
- prod : production (本番環境)

1つのカスタマイズに２つのアプリが紐づいています。

また、Erakisは環境変数を定義することができます。
- .env.developmentファイル（開発環境）
- .env.productionファイル（本番環境）

これらの機能を利用して、開発と本番で同じカスタマイズをして、表示されるデータだけを変えてみます。

# 作りたいもの
- 日報アプリ
カスタマイズ対象となるkintoneアプリ

このアプリで日報を書くとメッセージと画像が表示されるようにします。

こっちが開発系の画像(coffee.dev.png)
![117187_an astronaut making a cup of coffee. _xl-1024-v1-0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/c67e98ed-dcd2-abd2-e220-1caf3afa24ea.png)

こっちが本番系の画像です!(coffee.prod.png)
![762019_an astronaut making a cup of coffee. _xl-1024-v1-0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/39d09495-7ebd-4190-31c5-a5c14803eb55.png)

リアルな方が開発系です😊


# 実践
では、実際にカスタマイズをしてみます。
環境構築のまえに、PCにmkcertが入っているかどうか確認してください。
入っていない場合は下記から導入方法を見てください。

https://qiita.com/IshigiwaKenichiro/items/99d15e9b00dc87bd777f


## 日報アプリの作成
日報アプリはkintoneアプリストアからインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/ad6f9a8f-c08d-6c49-578a-6509689580ca.png)

開発系は"日報（開発系）"
本番系は"日報（Qiita）"と名前を変えておきます。

日報アプリはそのまま利用します。

## Erakisの設定
Node.jsをインストールしたwindowsマシンで下記のコマンドを実行します。

```bash
# プロジェクトディレクトリ作成
mkdir kintone-diary
cd kintone-diary

# プロジェクト初期化(すべてEnterで続けてよし)
npm init
```

```bash
# erakis導入
npm -D i erakis

# parcel導入
npm -D i parcel

# erakisで初期化（プロジェクトファイル作成）
npx erakis init

# erakisで秘密鍵ファイルを作成
npx erakis genkey

# vscodeで開く
code .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/71af02ae-1ea9-05a4-be02-a03ef744a422.png)
.erakisフォルダが作成されていれば大丈夫です。

うまくいかない場合は、下記URLの記事を参考にしてみてください。
（たぶんmkcertが入っていないんじゃないかな？）

https://qiita.com/IshigiwaKenichiro/items/99d15e9b00dc87bd777f



kintoneのプロファイル（接続情報）を設定していない場合は、下記コマンドから設定します。
```bash
npx erakis profile add
```

登録したプロファイル情報は後で見ることができます。
- npx erakis profile add
    - kintoneアクセスデータの登録
- npx erakis profile list
    - kintoneアクセスデータの一覧表示
- npx erakis profile update < profileName >
    - kintoneアクセスデータの更新
- npx erakis profile remove < profileName >
    - kintoneアクセスデータの削除

## カスタマイズの登録
Erakisにカスタマイズ情報を登録しましょう。
日報アプリへのカスタマイズになるので"diary"という名前にしてみます。
```bash
npx erakis app connect
```
すすめていくと、dev(開発環境)のアプリのURLをprod(本番環境)のアプリのURLの登録を促されます。
先ほど作成したkintoneアプリの一覧画面のURLをブラウザからコピーしてそのまま張ります。

下のように、最初に開発環境を訊かれ、次に本番環境を訊かれます。
![スクリーンショット 2024-07-31 182856.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/64e3249f-0fcf-43ba-2ccd-3210e9635058.png)

実行すると、srcフォルダ以下にファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/b334fe74-413e-b0c5-5f11-9cc14d2c14c7.png)

JavaScriptでも書けます。今回はJSで書いていきましょうか。

ファイルの拡張子を.jsに変えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/4e236620-1a9c-b66e-112e-bdeac2cf21e5.png)


## 環境ファイル(.env)の作成
開発環境と本番環境で違う値を利用する場合は.envファイルを利用します。
これはparcelのenv機能をそのまま利用しています。

ファイル名によって、どの環境に適用されるかが違います。

- .env
    - すべての環境に適用されます
- .env.development
    - 開発環境にのみ適用されます
- .env.production
    - 本番環境にのみ適用されます

今回はすべての環境で同じタイトルのメッセージを出します。
ただし、本文と画像は別のものを表示してみます。

```ini
# .envファイル

# メッセージタイトル
MSG_TITLE="おつかれさまです！"
```

```ini
# .env.developmentファイル

# メッセージ内容
MSG_CONTENT="いい調子で開発できていますね！"
```
```ini
# .env.productionファイル

# メッセージ内容
MSG_CONTENT="日報の登録ありがとうございます！\n本日もおつかれさまでした！"
```

これをプロジェクトホーム(package.jsonがある場所)に置きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/a1c35b56-c27a-6824-6218-d74b7b579c48.png)
こんな感じ


# カスタマイズ
環境が構築できたので、カスタマイズしていきましょう。

## 必要なものをそろえる
画像ファイルをプロジェクトに入れます。

/src/app/diary/coffee.dev.png
/src/app/diary/coffee.prod.png
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/d3888039-df96-476e-4f5f-f2264e1c15b3.png)

メッセージの表示にはSweetAlert2を利用します。下記コマンドから導入。
```bash
npm i sweetalert2
```

## コーディングしよう
customize.desktop.jsはデスクトップ画面のカスタマイズにあたります。
下記のようにコーディングします。（そのままコピペして内容を書き換えればOK）

customize.desktop.js
```javascript
import './customize.desktop.css';

//parcelのbundle-inlining機能をつかうことができます。
import devCoffeeUrl from 'data-url:./coffee.dev.png';
import prodCoffeeUrl from 'data-url:./coffee.prod.png';

import Swal from 'sweetalert2';

const MSG_TITLE = process.env.MSG_TITLE ?? '';
const MSG_CONTENT = process.env.MSG_CONTENT ?? '';

//覗いてみましょう。
console.log(process.env.NODE_ENV);

//開発か本番か
const isProduction = process.env.NODE_ENV == 'production';

//画像のURL
const coffeeUrl = isProduction ? prodCoffeeUrl : devCoffeeUrl;

kintone.events.on([
    'app.record.create.submit',
    'app.record.edit.submit'
], async (ev) => {

    await Swal.fire({
        title: MSG_TITLE,
        html: `
            <div>
                <img src="${coffeeUrl}" width="400px"/>
                <p>${MSG_CONTENT.split("\n").join('<br/>')}</p>
            </div>
        `
    })

    return ev;
});


```

## 開発サーバー
Erakisは開発用のサーバーを立てて、内容をリアルタイムに確認することができます。
```bash
npx erakis start
```
![スクリーンショット 2024-07-31 192132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/67e628fa-a7db-55ba-f74f-c3c0f603f943.png)

Erakisに登録されたアプリのURLが出てきましたね。developmentのURLをたどります。

では、日報を登録してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/dd3fe41e-2855-fe82-a76f-c1d333437706.png)

日報（開発系）アプリでデータを保存するとこのように表示されます。やったあ！


## 本番環境への適用
Erakisでは開発ビルドと本番ビルドは明確に分離されています。
本番系のビルドを行うには下記コマンドを実行します。
```bash
npx erakis build
```
そうするとbuildディレクトリが作成され、難読化されたファイルとソースマップが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/8b8870e4-9d63-95af-af89-9327df141877.png)

こんな感じ。

このファイルを本番環境にアップロードするには下記コマンドを実行します。
```bash
npx erakis launch app
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/242869bd-9785-a66f-2fa2-db25387aa08b.png)
application : diaryを選ぶ
environment : prodを選ぶ
deploy type : releasedを選ぶ


できたら、本番環境のアプリを見てみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/75a9e9ce-8817-cca8-c890-3cef22dad64f.png)

お、狙い通りになりましたね！

# まとめ
- 環境変数を扱うにはenvファイルを利用する
    - .evn : 環境共通
    - .env.development : 開発環境
    - .env.production : 本番環境
- 環境変数を呼び出すにはprocess.env.[環境変数名]を呼び出す
- NODE_ENVは予約された環境変数で、環境を表す文字列が入っている
- ErakisはJavaScriptでも開発できる
- bundle-inlining機能で、JavaScriptファイル内にイメージデータを埋め込める
- 開発サーバー機能を呼び出すにはnpx erakis start
- 本番ビルドはnpx erakis build

みなさんの開発がErakisで楽しくなるとうれしいです😊
ご意見お聞かせください。

---
kintoneプラグインやアプリ開発の研修を行っています。

https://www.pulsar-works.jp/

どうぞよろしく。