kintoneアプリ開発におけるビルド／デプロイの雛形となる環境を作成しました。
このプロダクトでできること
- ES6→CommonJS、Sass(scss)→CSSへのトランスパイル
- 本番／開発環境の設定ファイルによる管理（ソース、app番号等）
- Node.jsスクリプトを使用したコマンドによるデプロイ
プロダクト
GitHubにて公開しています。
開発環境の構成〜開発〜デプロイ
雛形のダウンロード
GitHubより一式をダウンロードし、任意のプロジェクト名に変更します。
$ git clone git://github.com/hiroyasu55/kintone-dev-base.git
$ mv kintone-dev-base my-app
npmライブラリインストール
$ cd my-app
$ mv kintone-dev-base my-app
$ npm install
環境設定ファイル
環境設定ファイル（json）を環境開発／本番環境に分けて記載します。
- 開発用： env/dev.env.json
- 本番用： env/prod.env.json
環境設定ファイルの詳細はこちらを参照ください。
ビルド
JavaScript(ES6)、Sassソースを編集した後、GulpでJavaScript・CSSを生成（トランスパイル）します。
$ npx gulp
$ npx gulp watch ←ソース監視し自動ビルド
kintoneへのデプロイ
デプロイ用スクリプトを実行することにより、トランスパイル後のJavaScript・CSSファイルをkintoneにデプロイ（アップロード）します。
kintoneの設定画面でブラウザ上でJavaScript・CSSファイルを登録するより時短になります。
$ node deploy.js # 全アプリのデプロイ
$ node deploy.js customers # アプリ名を指定してデプロイ
ポイント
ビルド（トランスパイル）
- ES6→JavaScript(CommonJS)への変換はBabelとWebpackを使用しています。
- Sass→CSSへの変換はGulpで行っています。
- "gulp"コマンドでJavaScript、CSSへの変換を一括で行います。
- 環境設定ファイル（***.env.json）に、各アプリとJavaScript、CSSのヒモ付を定義します。
本番／開発環境の切り替え
実際の開発プロジェクトでは、本番で使用するkintone環境とは別に、開発者ライセンス等で開発環境（ステージング環境）を設けたことがままあると思います。そのような場面に適応するべく、本番／開発環境用にそれぞれ環境設定ファイルを用意することで、アプリ番号等を切り替えることができます。
（開発環境）
"apps": {
"customers": 11,
"schedule": 33
},
（本番環境）
"apps": {
"customers": 22,
"schedule": 44
},
共通変数
環境設定ファイル上で、各アプリで共通で使用する値を定義できます。またアプリ番号も各アプリで共有できます。定義した値はkintoneEnvオブジェクトより参照できます。
"apps": {
"customers": 11,
"schedule": 33
},
"props": {
"someValue": "ABCDE"
},
$ console.log(kintoneEnv.apps.customers) # 11
$ console.log(kintoneEnv.props.someValue) # ABCDE
デプロイスクリプト
スクリプト内ではkintoneファイルアップロードAPIを使用しています。ブラウザ上で登録するのと違い、デプロイ後にJavaScript・CSSが反映されるまで数秒かかることにご注意ください。
参考
下記記事を大いに参考にさせていただきました（ありがとうございます）。