[Cybozu Days 2019 東京]お披露目の kintone CLI を使ってみた

2019-11-07,08に開催された、[Cybozu Days 2019 東京](https://cybozuconf.com/) でお披露目された[kintone CLI(β)](https://github.com/kintone/kintone-cli) を使ってみたいと思います。

# はじめに
Cybozu Days 2019 東京 の 基調講演にて、kintoneの開発者向け情報の発表があったらしいです。
詳しくはこちら[Cybozu Days 2019 kintone 開発者向け情報](https://qiita.com/yukataoka/items/a5fd343386ff0bb426ed)
そこで発表のあった[kintone CLI](https://github.com/kintone/kintone-cli)に興味を持ったので、実際に試してみました。

# 環境など

* mac OS 10.13.6
* node v12.13.0
* npm 6.12.0
* kintone CLI [v0.1.0](https://github.com/kintone/kintone-cli/releases)

# セットアップ

グローバルにインストールします。

```bash
$ 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 オプションで任意のプロジェクト名を渡せるみたいです。

```bash
$ 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してみます。

```bash

$ 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のあるディレクトリに移動して実行してください。
上記のライブラリも一緒にインストールされます。

```bash

$ 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

```

スクリーンショットです。

<img width="1225" alt="スクリーンショット 2019-11-14 0.49.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/a7988921-036b-2e64-7f07-9536a9945cff.png">

## kintone-cli auth

認証情報ファイルを作成

```bash
$ 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
```

```bash
$ 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

開発用のサーバーを起動します。

オプション

```bash
$ 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
```

実行してみます。

```bash
$ 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ファイルがリンクされているようです。

<img width="1030" alt="スクリーンショット 2019-11-14 1.16.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/1762b60a-5168-632e-2496-668287bf0e44.png">

<img width="975" alt="スクリーンショット 2019-11-14 1.22.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/722ef968-2dc8-7fa4-48ef-848ba6d5ec71.png">

ファイルを編集すると。
<img width="896" alt="スクリーンショット 2019-11-14 1.25.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/a9114d1b-6702-737f-e663-3c22fe301484.png">

カスタマイズが適用されています。
<img width="956" alt="スクリーンショット 2019-11-14 1.25.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/30f9bf2a-c00f-e2fc-adf1-a6e527d8bb84.png">

## deploy

開発サーバーを止めて、デプロイします。

```bash
$ kintone-cli deploy --app-name kintone-15736600153
カスタマイズのアップロードを開始します
kintone-1573660015713/source/js/script.js をアップロードしました!
kintone-1573660015713/source/css/style.css をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!
```

JSファイルがデプロイされています。
<img width="1032" alt="スクリーンショット 2019-11-14 1.38.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/e94e95a7-64ff-31ec-2d6d-685358407097.png">


# 参考

* [kintone CLI](https://github.com/kintone/kintone-cli)
* [Cybozu Days 2019 kintone 開発者向け情報](https://qiita.com/yukataoka/items/a5fd343386ff0bb426ed)

# あとがき

これは開発が捗りそうですね。
この辺りを見ると、
https://github.com/kintone/kintone-cli#2-create-customization--plugin-template
webpackやTypeScriptの設定も出来そうなので、また試してみたいと思います。