kintone-cliを使って、現時点で最強と思われるkintoneカスタマイズ環境を考えてみました。
Macで、VS-Codeを利用していますが、PCでもいけるかと思います。（未確認）
事前準備
- kintone-cliのインストール
バージョンの確認
$ kintone-cli --version
0.2.2
グローバルインストール時のアップデート
$ npm update -g kintone-cli
1. プロジェクトの生成(初期化)
プロジェクト名をパラメーターで渡して、kintoneカスタマイズプロジェクトを生成します。
ヘルプは $ kintone-cli init -h で確認できます。
-p の後に、プロジェクト名を指定します。
※下記では sample01 です。
$ kintone-cli init --install -p sample01
$ kintone-cli init --install -p sample01
Welcome to kintone-cli!
Please, input below information so we can get started!
? Version 0.0.1
? Description kintone customization project
? Author
? License MIT
? Do you want to use @kintone/kintone-ui-component? Yes
? Do you want to use @kintone/kintone-js-sdk? Yes
ここは、EnterとyでOK
作成されたプロジェクトフォルダに移動します。
$ cd sample01
2. テンプレートの生成
kintoneカスタマイズテンプレートを自動生成します。
kintone-cli create-template -t Customization -s -w -l -i 100 -n sample01
オプションパラメータは下記の通り
- -t Customization カスタマイズテンプレート
- -s typescriptを使う
- -w webpackを使う
- -l cybozu eslint rulesを使う
- -i カスタマイズする appID を指定（仮でOK）
- -n appNameを指定
$ kintone-cli create-template -t Customization -s -w -l -i 100 -n sample01
? Do you want to set authentication credentials ? No
? Do you want to use React ? No
? What is the entry for webpack ? index.ts
? What is the scope of customization ? ALL
Creating app...
ヘルプは $ kintone-cli create-template -h で確認できます。
Usage: create-template [options]
Options:
-q, --quick Use default template
--yes Use default template
--preset <preset> Preset for generating template
-t, --type <type> Set app type
-a, --set-auth Set authentication credentials
-d, --domain <domain> Set kintone domain
-u, --username <username> Set username
-p, --password <password> Set password
-n, --app-name <appName> Set app name
-s, --use-typescript Use typescript or not
-r, --use-react Use React or not
-w, --use-webpack Use webpack or not
--entry <entry> Webpack entry
-i, --app-id <appID> Set app ID for customization
-l, --use-cybozu-lint Use cybozu eslint rules
--proxy <proxyURL> Proxy URL
-h, --help output usage information
Reactを使うときは下記。
$ kintone-cli create-template -t Customization --preset ReactTS -s -r -w -l -i 100 -n sample01
3. Gitコミットする
2.でテンプレート他もろもろが自動生成された、ディレクトリをIDEで開きます。
一旦Gitコミットしておきます。
$ git status
$ git add .
$ git commit -m "コメント"
$ ls -la
total 752
drwxr-xr-x 8 kazoo staff 256 8 18 23:04 .
drwxr-xr-x 4 kazoo staff 128 8 19 05:53 ..
drwxr-xr-x 10 kazoo staff 320 8 18 13:26 .git
-rw-r--r-- 1 kazoo staff 31 8 18 23:03 .gitignore
drwxr-xr-x 676 kazoo staff 21632 8 18 23:04 node_modules
-rw-r--r-- 1 kazoo staff 376816 8 18 23:04 package-lock.json
-rw-r--r-- 1 kazoo staff 1235 8 18 23:03 package.json
drwxr-xr-x 9 kazoo staff 288 8 18 23:03 sample01
$ git status
On branch master
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
.gitignore
package-lock.json
package.json
sample01/
nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit -m "Initial commit"
[master (root-commit) 9f55035] Initial commit
10 files changed, 9633 insertions(+)
create mode 100644 .gitignore
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 sample01/.babelrc
create mode 100644 sample01/.eslintrc.js
create mode 100644 sample01/config.json
create mode 100644 sample01/source/global.d.ts
create mode 100644 sample01/source/index.ts
create mode 100644 sample01/tsconfig.json
create mode 100644 sample01/webpack.config.js
$ git status
On branch master
nothing to commit, working tree clean
4. プロジェクトのビルド
プロジェクトをビルドします。
$ kintone-cli build --app-name <アプリ名>
$ kintone-cli build -h
Usage: build [options]
Options:
--app-name <appName> App name
-h, --help output usage information
$ kintone-cli build --app-name sample01
> sample01@0.0.1 build-sample01 /Users/local/sample01/sample01
> webpack --config sample01/webpack.config.js
Hash: 0cc5eeb26fe392c36638
Version: webpack 4.44.1
Child
Hash: 0cc5eeb26fe392c36638
Time: 1280ms
Built at: 2020-08-19 6:09:34
Asset Size Chunks Chunk Names
sample01.min.js 1.04 KiB 0 [emitted] main
Entrypoint main = sample01.min.js
[0] ./sample01/source/index.ts 168 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
Build app complete.
To set auth info, use:
kintone-cli auth --app-name sample01
5. 手動デプロイ
ビルドされたファイルをkintoneにアップします。
ここは安全を見て手動です。
distの下の、sample01.min.js をアップロードします。
$ tree ./sample01 -L 2 -a
./sample01
├── .babelrc
├── .eslintrc.js
├── config.json
├── dist
│ └── sample01.min.js
├── source
│ ├── css
│ ├── global.d.ts
│ ├── index.ts
│ └── js
├── tsconfig.json
└── webpack.config.js
6. ライブラリのアップデート
kintone-cliでパッケージされるライブラリは最新のものでは無いことがあるので、確認してアップデートします。
@kintone/kintone-ui-component を最新版にアップデートします。
インストール済みのnpmパッケージの更新状況を確認
$ npm outdated
$ npm outdated
Package Current Wanted Latest Location
@kintone/kintone-ui-component 0.6.0 0.6.0 0.7.3 sample01
package.jsonを最新版に書き換えます。
"dependencies": {
"@kintone/kintone-js-sdk": "^0.7.4",
npm installを実行します。
$ npm install @kintone/kintone-ui-component --save
その他のパッケージもアップデートしておきます。
$npm update
7. テストフレームワーク導入
ユニットテストフレームワークの Jest をインストールします。
npm install --save-dev jest
BabelやWebpackを使ってコンパイル、パッケージングを利用しない場合は、下記拙稿を参考にしてください。
kintone ユニットテストの基本
注意
- 自動アップデートはセットアップしていません。ここは必要に応じて各自セットアップすると良いかと思います。
- 認証系のファイルも生成していません。