Erakisはkintoneのカスタマイズを簡単高速にする開発環境です。

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

概要

Erakisで管理する環境は２つです。

dev : development (開発環境)
prod : production (本番環境)

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

また、Erakisは環境変数を定義することができます。

.env.developmentファイル（開発環境）
.env.productionファイル（本番環境）

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

作りたいもの

日報アプリ
カスタマイズ対象となるkintoneアプリ

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

こっちが開発系の画像(coffee.dev.png)

こっちが本番系の画像です!(coffee.prod.png)

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

実践

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

日報アプリの作成

日報アプリはkintoneアプリストアからインポートします。

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

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

Erakisの設定

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

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

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

# erakis導入
npm -D i erakis

# parcel導入
npm -D i parcel

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

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

# vscodeで開く
code .

.erakisフォルダが作成されていれば大丈夫です。

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

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

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"という名前にしてみます。

npx erakis app connect

すすめていくと、dev(開発環境)のアプリのURLをprod(本番環境)のアプリのURLの登録を促されます。
先ほど作成したkintoneアプリの一覧画面のURLをブラウザからコピーしてそのまま張ります。

下のように、最初に開発環境を訊かれ、次に本番環境を訊かれます。

実行すると、srcフォルダ以下にファイルが作成されます。

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

ファイルの拡張子を.jsに変えてください。

環境ファイル(.env)の作成

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

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

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

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

# .envファイル

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

# .env.developmentファイル

# メッセージ内容
MSG_CONTENT="いい調子で開発できていますね！"

# .env.productionファイル

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

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

こんな感じ

カスタマイズ

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

必要なものをそろえる

画像ファイルをプロジェクトに入れます。

/src/app/diary/coffee.dev.png
/src/app/diary/coffee.prod.png

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

npm i sweetalert2

コーディングしよう

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

customize.desktop.js

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は開発用のサーバーを立てて、内容をリアルタイムに確認することができます。

npx erakis start

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

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

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

本番環境への適用

Erakisでは開発ビルドと本番ビルドは明確に分離されています。
本番系のビルドを行うには下記コマンドを実行します。

npx erakis build

そうするとbuildディレクトリが作成され、難読化されたファイルとソースマップが作成されます。

こんな感じ。

このファイルを本番環境にアップロードするには下記コマンドを実行します。

npx erakis launch app

application : diaryを選ぶ
environment : prodを選ぶ
deploy type : releasedを選ぶ

できたら、本番環境のアプリを見てみます。

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

まとめ

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

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

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

どうぞよろしく。