３．カスタマイズをkintoneに適用する
この章では、kintoneアプリのカスタマイズ開発の実行環境例や、kintone-cliを使ったカスタマイズ適用方法について説明します。
またJavaScriptファイルのビルド方法についても説明します。
目次
- カスタマイズ開発の実行環境例
- 開発したプログラムの適用方法
- JavaScript、CSSのビルド
３－１．カスタマイズ開発の実行環境例
kintoneのアプリを開発する場合に、カスタマイズの実行環境構築のパターンとしては、
「開発時と運用時のドメインを分ける」パターンと「開発時と運用時のドメインを分けない」パターンがあります。
kintoneアプリのカスタマイズのためにいわゆるサンドボックスのような機能が提供されていないため、
ドメインを分けたり、アプリをコピーしたりといった方法によって、カスタマイズの実行環境を設定します。
・開発時と運用時のドメインを分ける
開発時と運用時のドメインを分ける場合、開発ドメインで事前にアプリ構築とカスタマイズ開発を行い、
完成した後に運用ドメインにアプリとカスタマイズを適用します。
-
メリット
運用環境と開発環境を分けれるので、お客様の運用に影響を与える可能性が低い。 -
デメリット
開発ドメインのアプリやカスタマイズを運用ドメインへ移行するコストがかかる。
権限の設定など標準の機能で移行できない項目がある
・開発時と運用時のドメインを分けない
開発時と運用時のドメインを分けない場合、カスタマイズするアプリを直接カスタマイズを行うのではなく、
カスタマイズするアプリを再利用してコピーして、そのアプリに対してカスタマイズを行います。
-
メリット
開発ドメインのアプリやカスタマイズを運用ドメインへ移行するコストがかからない。 -
デメリット
開発時と運用時でドメインを分けれないので、お客様の運用に影響を与える可能性が高い。
お客様のポリシーに応じた環境をご用意してください。
３－２．開発したプログラムの適用方法
kintoneアプリへのカスタマイズファイルを適用する方法としては、
システム管理画面から手動でカスタマイズファイルを適用する方法や
DropboxにカスタマイズファイルをアップロードしてURLを参照する方法がありました。
いずれも画面上で設定したり、他サービスを用意したりと手間がかかるものでした。
現在はCybozuよりCustomize Uploaderというコマンドラインツールが提供されておりますが、
今回紹介するkintone-cliはこのCustomize Uploaderを利用したより高度なアップロード機能が搭載されています。
・config.jsonの設定
一章で紹介したkintone-cli create-templateを実行するとテンプレート内にconfig.jsonが自動で生成されます。
このconfig.json内でkintone-cliがkintoneにアップロードするファイルの設定が行なえます。
設定例は以下の通りです。
{
"appID": 0, // アップロード対象のアプリIDを指定
"appName": "sampleApp",
"type": "Customization",
"scope": "ALL", // カスタマイズの適用範囲を指定
"uploadConfig": {
"desktop": {
"js": [
"sampleApp/source/js/script.js" // アップロード対象のJSファイルを相対パスで指定(PC向け)
],
"css": [
"sampleApp/source/css/style.css" // アップロード対象のcssファイルを相対パスで指定(PC向け)
]
},
"mobile": {
"js": [], // アップロード対象のJSファイルを相対パスで指定(モバイル向け)
"css": [] // アップロード対象のcssファイルを相対パスで指定(モバイル向け)
}
}
}
・kintone-cliのdevコマンド
kintone-cliのdevコマンドを実行すると、ローカルWebサーバーを使用して、create-templateコマンドで
作成したプロジェクトフォルダから直接JavaScriptやCSSファイルを参照します。
これによって、カスタマイズファイルを手動でkintoneアプリにアップロードする作業が不要になります。
kintone-cli dev [--app-name <App Name>]
・kintone-cliのdeployコマンド
kintone-cliのdeployコマンドは、devコマンドと違い、カスタマイズファイルそのものを
kintoneアプリにアップロードします。
kintone-cli deploy [--app-name <App Name>]
devコマンドは、ローカルWebサーバーをフォルダを参照するため、
コード修正ごとに再アップロードの必要がなく開発時のこまめなデバックなどに非常に有効です。
一方deployコマンドは、Customize Uploaderと同様にカスタマイズファイルの実体をkintone上にアップロードするため、
カスタマイズ完了時にチームメンバにレビューを依頼したり、本番運用環境へ適用する際などに有効です。
３－３．JavaScript、CSSのビルド
さらにkintone-cliではJavaScriptやCSSをバンドルするbuildコマンドがあります。
kintone-cli build [--app-name <App Name>]
またdeployコマンド実行時に、カスタマイズフォルダにwebpack.config.jsが含まれている場合、
kintone-cliはwebpack.config.jsファイルを使用してwebpack buildを実行します。
kintone-cli deploy [--app-name <App Name>]
webpackそのものの説明は次の記事を参照してください。
webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~
https://developer.cybozu.io/hc/ja/articles/360022880491