More than 3 years have passed since last update.

kintone CLI を使って kintoneカスタマイズ環境を構築する

Last updated at 2021-11-18Posted at 2019-11-15

kintone CLI を使って、kintoneカスタマイズ環境を構築する際のメモです。

更新情報

リリース情報

[v0.2.1][2021-11-09] https://github.com/kintone-labs/kintone-cli/releases/tag/v0.2.1
[v0.2.0][2021-10-15] https://github.com/kintone-labs/kintone-cli/releases/tag/v0.2.0
[v0.1.6][2021-01-14] https://github.com/kintone-labs/kintone-cli/releases/tag/v0.1.6
[v0.1.5][2020-07-01] https://github.com/kintone-labs/kintone-cli/releases/tag/v0.1.5
[v0.1.4][2020-06-19] https://github.com/kintone/kintone-cli/releases/tag/v0.1.4
[v0.1.3][2020-02-05] https://github.com/kintone/kintone-cli/releases/tag/v0.1.3
[v0.1.2][2019-12-19] https://github.com/kintone/kintone-cli/releases/tag/v0.1.2
[v0.1.1][2019-11-21] https://github.com/kintone/kintone-cli/releases/tag/v0.1.1

はじめに

2019-10-30にリリースされた、kintone-cliを使って開発環境をセットアップしてみます。
情報が更新されたら追記等していきたいと思います。

環境

2019-11-15

mac OS10.13.6
kintone-cli 0.1.0

kintone CLI は下記リンクからインストールできます。
https://github.com/kintone/kintone-cli

プロジェクト初期設定

ターミナルから init コマンドでプロジェクト（開発用のディレクトリ）の作成とkintone開発に利用するライブラリをセットアップする package.json を生成します。
また、プロジェクト内のソースコードのバージョン管理を行う初期化も行われます。

$ kintone-cli init
Welcome to kintone-cli!
Please, input below information so we can get started!
? Project name 410
? Version 0.0.1
? Description kintone customization project
? Author kazuhiro.yoshida
? License MIT
? Do you want to use @kintone/kintone-ui-component? Yes
? Do you want to use @kintone/kintone-js-sdk? Yes
Initialized empty Git repository in /usr/local/410/410/.git/

Project created!
To create new app, use:

   kintone-cli create-template

$ tree
.
└── 410
    └── package.json

cd 410
yoshidanoMacBook-Pro:410 yoshida$ ls -la
total 16
drwxr-xr-x  5 yoshida  staff  160 11 15 13:26 .
drwxr-xr-x  3 yoshida  staff   96 11 15 13:26 ..
drwxr-xr-x  9 yoshida  staff  288 11 15 13:26 .git
-rw-r--r--  1 yoshida  staff   12 11 15 13:26 .gitignore
-rw-r--r--  1 yoshida  staff  370 11 15 13:26 package.json

$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	.gitignore
	package.json

nothing added to commit but untracked files present (use "git add" to track)

kintoneカスタマイズプロジェクトの雛形を生成

create-template コマンドでプロジェクトフォルダに諸々のファイルの雛形を生成します。

$ kintone-cli create-template
? What type of app you want to create ? Customization
? Do you want to set authentication credentials ? No
? Do you want to use React ? Yes
? Do you want to use TypeScript ? Yes
? Do you want to use webpack ? Yes
? What is the entry for webpack ? index.tsx
? What is the app name ? kintone-cli-test
? Do you want to use @cybozu/eslint-config for syntax checking ? Yes
? What is the scope of customization ? ALL
Creating app...
npx: 1個のパッケージを1.715秒でインストールしました。
kintone-cli-test/webpack.config.js 45ms
npx: 1個のパッケージを0.947秒でインストールしました。
kintone-cli-test/.eslintrc.js 33ms
npx: 1個のパッケージを0.957秒でインストールしました。
kintone-cli-test/source/index.tsx 150ms
Installing dependencies...

> fsevents@1.2.9 install /user/local/kintone/410/410/node_modules/watchpack/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/user/local/kintone/410/410/node_modules/watchpack/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" is installed via remote

> core-js@3.2.1 postinstall /user/local/kintone/410/410/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 -)

added 1064 packages from 506 contributors and audited 8638 packages in 30.897s
found 0 vulnerabilities


To set auth info, use:

     kintone-cli auth --app-name kintone-cli-test

$ tree -L 1
.
├── kintone-cli-test
├── node_modules
├── package-lock.json
└── package.json

$ cat package.json
{
  "name": "410",
  "version": "0.0.1",
  "description": "kintone customization project",
  "author": "kazuhiro.yoshida",
  "license": "MIT",
  "dependencies": {
    "@kintone/kintone-ui-component": "^0.4.0",
    "@kintone/kintone-js-sdk": "^0.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.7.0"
  },
  "devDependencies": {
    "local-web-server": "^2.6.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.2.3",
    "babel-loader": "^8.0.5",
    "style-loader": "^0.23.1",
    "css-loader": "^2.1.0",
    "core-js": "^3.2.1",
    "regenerator-runtime": "^0.13.3",
    "@babel/core": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "@babel/plugin-proposal-class-properties": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/preset-react": "^7.0.0",
    "typescript": "^3.6.3",
    "@types/react": "^16.8.16",
    "@types/react-dom": "^16.8.4",
    "@kintone/customize-uploader": "^2.0.5",
    "eslint": "^6.5.1",
    "@cybozu/eslint-config": ">=7.1.0"
  },
  "scripts": {
    "dev": "ws",
    "build-kintone-cli-test": "webpack --config kintone-cli-test/webpack.config.js",
    "lint-all": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint-all-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "lint-kintone-cli-test": "eslint kintone-cli-test/ --ext .tsx",
    "lint-kintone-cli-test-fix": "eslint kintone-cli-test/ --ext .tsx --fix"
  }
}

$ tree kintone-cli-test/
kintone-cli-test/
├── config.json
├── dist
├── source
│   ├── css
│   ├── global.d.tsx
│   ├── index.tsx
│   └── js
├── tsconfig.json
└── webpack.config.js

4 directories, 5 files

認証設定ファイル作成

auth.jsonファイルを作成します。

コマンドラインで kintone-cli auth --app-name <アプリ名> で対話モードで作成するか、
"app name"で指定したフォルダに入って"auth.json"ファイルを作成します。

auth コマンドで作成

$ kintone-cli auth --app-name kintone-cli-test
? What is your kintone domain ? xxxx.cybozu.com
? What is your kintone username ? xxxx
? What is your kintone password ? [hidden]
? Do you use proxy ? No
Set auth info complete.
To start dev, use:

     kintone-cli dev --app-name kintone-cli-test

To deploy app, use:

     kintone-cli deploy --app-name kintone-cli-test

auth.json を直接作成

$ cd kintone-cli-test
$ touch auth.json

auth.json

{
    "domain": "xxxxx.cybozu.com",
    "username": "xxxxxxxxx",
    "password": "xxxxxxxxx"
}

config.jsonに "appID": "<アプリID>" を追加

config.json

{
    "appName": "kintone-cli-test",
    "type": "Customization",
    "scope": "ALL",
    "uploadConfig": {
        "desktop": {
            "js": [
                "kintone-cli-test/dist/kintone-cli-test.min.js"
            ],
            "css": []
        },
        "mobile": {
            "js": [
                "kintone-cli-test/dist/kintone-cli-test.min.js"
            ]
        }
    },
    "appID": "<アプリID>"
}

開発の開始

以下をターミナルに入力して実行します。

$ kintone-cli dev --app-name <アプリ名>

$ kintone-cli dev --app-name kintone-cli-test
Building distributed file...
Starting local webserver...

Please open this link in your browser to trust kintone Customization files:

   https://192.168.100.90: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.

kintoneアプリを確認

kintone-cli dev でカスタマイズファイルをローカルのwebserver上で公開します。
試しにReactとTypeScriptを使う設定をしましたが、デプロイ時に自動でコンパイルされるようです。

ソースコードを変更して確認

ソースコードを変更して反映されるか確認してみます。

--watchオプションで監視モードで実行します。

$ kintone-cli dev --app-name kintone-cli-test --watch
Building distributed file...
Starting local webserver...

Please open this link in your browser to trust kintone Customization files:

   https://192.168.100.90:8000

Then, press any key to continue:

Attaching links to kintone...
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!
Watching for changes...

> 410@0.0.1 build-kintone-cli-test /user/local/kintone/410/410
> webpack --config kintone-cli-test/webpack.config.js "--watch" "--mode" "development"


webpack is watching the files…

Hash: cfe85c28b2c53f89a3a3
Version: webpack 4.41.2
Child
    Hash: cfe85c28b2c53f89a3a3
    Time: 1857ms
    Built at: 2019-11-15 18:35:20
                          Asset      Size  Chunks                   Chunk Names
        kintone-cli-test.min.js  3.33 MiB    main  [emitted]        main
    kintone-cli-test.min.js.map  2.95 MiB    main  [emitted] [dev]  main
    Entrypoint main = kintone-cli-test.min.js kintone-cli-test.min.js.map
    [./kintone-cli-test/source/index.tsx] 3.63 KiB {main} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
        + 183 hidden modules
Hash: 554a5996f493708c4c7c
Version: webpack 4.41.2
Child
    Hash: 554a5996f493708c4c7c
    Time: 638ms
    Built at: 2019-11-15 18:40:18
                          Asset      Size  Chunks                   Chunk Names
        kintone-cli-test.min.js  3.33 MiB    main  [emitted]        main
    kintone-cli-test.min.js.map  2.95 MiB    main  [emitted] [dev]  main
    Entrypoint main = kintone-cli-test.min.js kintone-cli-test.min.js.map
    [./kintone-cli-test/source/index.tsx] 3.64 KiB {main} [built]
        + 184 hidden modules

kintone-ui-componentを使ってボタンを追加してみます。

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button } from '@kintone/kintone-ui-component';

class Mybutton extends React.Component {
    render() {
        return (
            <Button text='Submit' type='submit' isDisabled={false} isVisible={true} onClick={function() {alert('Hello from kintone CLI');}}/>
        );
    }
}

(() => {
  kintone.events.on('app.record.index.show', event => {
    const container = document.createElement('div');
    kintone.app.getHeaderSpaceElement().append(container);

    ReactDOM.render(<Mybutton />, container);

    return event;
  });
})();

ソースコードをエディタで修正して保存すると、変更が反映されます。

注意点

既存のアプリで試す場合は、カスタマイズ済みのファイルをバックアップしておかないと、デプロイが走った時に上書きされます。
Dockerなどが起動していてローカルポート:8000を利用している場合はDockerを停止しないとデプロイに失敗します。

参考リンク

[kintone CLI(β)] https://github.com/kintone/kintone-cli
[kintone UI Component] https://kintone.github.io/kintone-ui-component/latest/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up