es6
gulp
webpack
kintone

kintoneアプリ開発ベース〜ビルド、デプロイ、環境切り替え〜

kintoneアプリ開発におけるビルド/デプロイの雛形となる環境を作成しました。

このプロダクトでできること

  • ES6→CommonJS、Sass(scss)→CSSへのトランスパイル
  • 本番/開発環境の設定ファイルによる管理(ソース、app番号等)
  • Node.jsスクリプトを使用したコマンドによるデプロイ

プロダクト

GitHubにて公開しています。

kintoneアプリ開発/デプロイ環境

開発環境の構成〜開発〜デプロイ

雛形のダウンロード

GitHubより一式をダウンロードし、任意のプロジェクト名に変更します。

$ git clone git://github.com/logicheart/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が反映されるまで数秒かかることにご注意ください。

参考

下記記事を大いに参考にさせていただきました(ありがとうございます)。