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

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

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

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

プロダクト

GitHubにて公開しています。

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

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

雛形のダウンロード

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が反映されるまで数秒かかることにご注意ください。

参考

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

• kintone JavaScriptカスタマイズのためのwebpackビルド環境（Dropbox併用） @the_red さん
• R3 kintone js deployerを使ってkintoneカスタマイズをハッピーに！ @ha_ru_ma_ki さん