2019-11-07,08に開催された、Cybozu Days 2019 東京 でお披露目されたkintone CLI(β) を使ってみたいと思います。
はじめに
Cybozu Days 2019 東京 の 基調講演にて、kintoneの開発者向け情報の発表があったらしいです。
詳しくはこちらCybozu Days 2019 kintone 開発者向け情報
そこで発表のあったkintone CLIに興味を持ったので、実際に試してみました。
環境など
- mac OS 10.13.6
- node v12.13.0
- npm 6.12.0
- kintone CLI v0.1.0
セットアップ
グローバルにインストールします。
$ npm install -g git://github.com/kintone/kintone-cli.git
$ kintone-cli -V
0.1.0
$ kintone-cli -h
Usage: kintone-cli [options] [command]
kintone Node CLI
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create-template [options]
init [options] Initialize kintone project
build [options]
deploy [options]
lint [options]
dev [options]
auth [options]
kintone-cli init
initコマンドのヘルプを確認してみます。
-p オプションで任意のプロジェクト名を渡せるみたいです。
$ kintone-cli init -h
Usage: init [options]
Initialize kintone project
Options:
--install Install dependencies or not
--quick Quickly create a kintone project
-p, --project-name <projectName> Project name
-h, --help output usage information
手順書通りにinitしてみます。
$ kintone-cli init --quick
Initialized empty Git repository in /Users/kazoo/local/kintone/kintone-cli/kintone-cli-test/kintone-customization-project/.git/
Project created!
To create new app, use:
kintone-cli create-template
なるほど、kintoneカスタマイズに必須的な(?)ライブラリをセットアップするようになってます。
package.json
{
"name": "kintone-customization-project",
"version": "0.0.1",
"description": "kintone customization project",
"author": "",
"license": "MIT",
"dependencies": {
"@kintone/kintone-ui-component": "^0.4.0",
"@kintone/kintone-js-sdk": "^0.6.2"
},
"devDependencies": {
"local-web-server": "^2.6.1"
},
"scripts": {
"dev": "ws"
}
}
kintone-cli create-template
create-templeteします。
initした際に作成されたpackage.jsonのあるディレクトリに移動して実行してください。
上記のライブラリも一緒にインストールされます。
$ ls -la
total 16
drwxr-xr-x 5 kazoo staff 160 11 14 00:37 .
drwxr-xr-x 4 kazoo staff 128 11 12 07:51 ..
drwxr-xr-x 5 kazoo staff 160 11 14 00:37 kintone-customization-project
Kazu-MacBook-Pro:kintone-cli-test kazoo$ cd kintone-customization-project/
$ kintone-cli create-template --quick
Creating app...
npx: 1個のパッケージを2.317秒でインストールしました。
kintone-1573660015713/source/js/script.js 42ms
Installing dependencies...
> core-js@3.2.1 postinstall /Users/kazoo/local/kintone/kintone-cli/kintone-cli-test/kintone-customization-project/node_modules/core-js
> node scripts/postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for common-log-format@0.1.4: wanted: {"node":">=0.10.0 <9.0.0"} (current: {"node":"12.13.0","npm":"6.12.0"})
npm WARN notsup Not compatible with your version of node/npm: common-log-format@0.1.4
npm WARN @kintone/kintone-ui-component@0.4.3 requires a peer of react@16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @kintone/kintone-ui-component@0.4.3 requires a peer of react-dom@16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN kintone-customization-project@0.0.1 No repository field.
added 408 packages from 269 contributors and audited 784 packages in 17.647s
found 0 vulnerabilities
To set auth info, use:
kintone-cli auth --app-name kintone-1573660015713
$ ls -la
total 312
drwxr-xr-x 8 kazoo staff 256 11 14 00:47 .
drwxr-xr-x 5 kazoo staff 160 11 14 00:37 ..
drwxr-xr-x 10 kazoo staff 320 11 14 00:48 .git
-rw-r--r-- 1 kazoo staff 44 11 14 00:46 .gitignore
drwxr-xr-x 4 kazoo staff 128 11 14 00:46 kintone-1573660015713
drwxr-xr-x 331 kazoo staff 10592 11 14 00:47 node_modules
-rw-r--r-- 1 kazoo staff 150444 11 14 00:47 package-lock.json
-rw-r--r-- 1 kazoo staff 468 11 14 00:46 package.json
スクリーンショットです。
kintone-cli auth
認証情報ファイルを作成
$ kintone-cli auth -h
Usage: auth [options]
Options:
-a, --app-name <appName> Kintone domain
-d, --domain <domain> Kintone domain
-u, --username <username> Kintone username
-p, --password <password> Kintone password
-i, --app-id <appID> Kintone app ID
-r, --use-proxy Use proxy or not
-x, --proxy <proxy> Proxy full URL, including port number
-h, --help output usage information
$ kintone-cli auth -d 'xxxxx.cybozu.com' -u 'xxxxxxxx' -p 'xxxxxxx' -a 'kintone-1573660015713'
? What is the app ID ? 1
? Do you use proxy ? No
Set auth info complete.
To start dev, use:
kintone-cli dev --app-name kintone-1573660015713
To deploy app, use:
kintone-cli deploy --app-name kintone-1573660015713
kintone-cli dev
開発用のサーバーを起動します。
オプション
$ kintone-cli dev --help
Usage: dev [options]
Options:
--watch Watch for changes in source code
--app-name <appName> Watch for changes in source code
--localhost Use localhost as link
-h, --help output usage information
実行してみます。
$ kintone-cli dev --app-name kintone-1573660015713
Starting local webserver...
Please open this link in your browser to trust kintone Customization files:
https://192.168.0.10:8000
Then, press any key to continue:
Attaching links to kintone...
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!
All done. Happy customizing!
Press Ctrl + C to stop local web server.
アプリの設定画面のスクリーンショットです。
ローカルのWebサーバーを通じてカスタマイズJSファイルがリンクされているようです。
ファイルを編集すると。
カスタマイズが適用されています。
deploy
開発サーバーを止めて、デプロイします。
$ kintone-cli deploy --app-name kintone-15736600153
カスタマイズのアップロードを開始します
kintone-1573660015713/source/js/script.js をアップロードしました!
kintone-1573660015713/source/css/style.css をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!
JSファイルがデプロイされています。
参考
あとがき
これは開発が捗りそうですね。
この辺りを見ると、
https://github.com/kintone/kintone-cli#2-create-customization--plugin-template
webpackやTypeScriptの設定も出来そうなので、また試してみたいと思います。