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の設定も出来そうなので、また試してみたいと思います。