More than 3 years have passed since last update.

kintone カスタマイズに「Goqoo on kintone」を使ってみる

Last updated at 2022-06-15Posted at 2022-01-06

環境

node v16.13.1
tsc v4.5.4
macOS 10.15.7

Goqoo on kintone とは

ざくっと、TypeScriptやReactなどを使った、kintoneカスタマイズの開発環境を構築できるフレームワーク。

開発フレームワーク「Goqoo on kintone」を正式リリースしました！
https://qiita.com/the_red/items/3222d8bf71c32d769060

事前準備

事前にNode.js、TypeScriptなどは適宜イントールなどしておく。

$ nodebrew install v16.13.1
$ nodebrew list
v11.14.0
v12.3.1
v12.13.0
v12.18.2
v14.17.4
v16.13.1

current: v14.17.4
$ nodebrew use v16.13.1
use v16.13.1

$ brew install typescript
$ tsc -v
Version 4.5.4

使い方

詳細は、前段の開発者による記事やGitHubのREADMEを参照してください。

goqoo new

適当なディレクトリを作成して、そこで下記を実行する。

npx goqoo new プロジェクト名

必要パッケージなどがインストールされてセットアップが終了。

$ npx goqoo new gq01
✔ Project name · gq01
✔ Project description · goqoo sample project
✔ Frontend Framework · (None)
info Created gq01/README.md
info Created gq01/.prettierrc.yaml
info Created gq01/.prettierignore
info Created gq01/babel.config.js
info Created gq01/gitignore
info Created gq01/jest.config.js
info Created gq01/goqoo.config.js
info Created gq01/goqoo.config.types.ts
info Created gq01/.eslintrc.js
info Created gq01/package.json
info Created gq01/tsconfig.json
info Created gq01/src/example.ts
info Created gq01/dts/.gitkeep
info Created gq01/src/types.ts
info Created gq01/test/jest.ignore.js
info Created gq01/src/in-app/.gitkeep
info Created gq01/src/apps/.gitkeep
info Created gq01/test/example.test.ts
info Created gq01/.env.example
info Created gq01/src/context.ts
info Moved gq01/gitignore -> gq01/.gitignore
info Modified gq01/package.json
success Initialized empty Git repository
success Installed packages
success Generated into ~/local/kintone/goqoo/sample01/gq01

プロジェクトディレクトリ以下。

$ tree -L 1 gq01
gq01
├── README.md
├── babel.config.js
├── dts
├── goqoo.config.js
├── goqoo.config.types.ts
├── jest.config.js
├── node_modules
├── package.json
├── src
├── test
├── tsconfig.json
└── yarn.lock

git commit

プロジェクトディレクトリにcdした後に、git commitします。

$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	.env.example
	.eslintrc.js
	.gitignore
	.prettierignore
	.prettierrc.yaml
	README.md
	babel.config.js
	dts/
	goqoo.config.js
	goqoo.config.types.ts
	jest.config.js
	package.json
	src/
	test/
	tsconfig.json
	yarn.lock

nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit -m "Initial commit"
[master (root-commit) 0135091] Initial commit
 21 files changed, 9195 insertions(+)
 create mode 100644 .env.example
 create mode 100644 .eslintrc.js
 create mode 100644 .gitignore
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc.yaml
 create mode 100644 README.md
 create mode 100644 babel.config.js
 create mode 100644 dts/.gitkeep
 create mode 100644 goqoo.config.js
 create mode 100644 goqoo.config.types.ts
 create mode 100644 jest.config.js
 create mode 100644 package.json
 create mode 100644 src/apps/.gitkeep
 create mode 100644 src/context.ts
 create mode 100644 src/example.ts
 create mode 100644 src/in-app/.gitkeep
 create mode 100644 src/types.ts
 create mode 100644 test/example.test.ts
 create mode 100644 test/jest.ignore.js
 create mode 100644 tsconfig.json
 create mode 100644 yarn.lock

goqoo generate

カスタマイズに必要な雛形のファイル等を生成します。

$ npx goqoo generate app アプリ名

$ npx goqoo --help
usage: goqoo [-v, --version] [-h, --help]
              new <project name>
              generate <GENERATOR> <app name>
              start
              build
              watch
              release
$ npx goqoo generate app app303
✔ App name · app303
info Created src/apps/app303/index.ts
info Created src/apps/app303/hello.ts

手動でやる方法

src/appsまではできているので、その下に
アプリ名のディレクトリを作成して、その配下にファイルを作成すればOK

├── package.json
├── src
│   ├── apps/
│   │   ├── <アプリ名>
│   │   │   ├── ***.ts
│   │   │   └── index.ts
│   │   └── <アプリ名>
│   │       ├── ***.ts
│   │       └── index.ts
│   ├── context.ts
│   ├── example.ts
│   └── types.ts

goqoo start

ローカルサーバーを起動して、ファイルがビルドされます。
表示されたURLをkintoneのJSカスタマイズに設定します。
https://localhost:59000/app303.jsここの部分ですね。

$ npx goqoo start
{ bundlerType: 'default', nodeEnv: 'development' }
{ mode: 'development' }
{ env: { WEBPACK_SERVE: true } }
{ app303: 'https://localhost:59000/app303.js' }
Failed to load /Users/yoshida/local/kintone/goqoo/sample01/gq01/.env.development.
1% setup initializeℹ ｢wds｣: Generating SSL Certificate
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wds｣: Project is running at https://localhost:59000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from 
ℹ ｢wdm｣: asset app303.js 818 KiB [emitted] (name: app303) 1 related asset
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/core-js/ 68.1 KiB
  modules by path ./node_modules/core-js/internals/*.js 53.8 KiB 97 modules
  modules by path ./node_modules/core-js/modules/*.js 14.4 KiB 2 modules
modules by path ./node_modules/webpack-dev-server/ 21.1 KiB 11 modules
modules by path ./node_modules/goqoo/ 25.8 KiB 6 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./src/apps/app303/*.ts 1.52 KiB
  ./src/apps/app303/index.ts 83 bytes [built] [code generated]
  ./src/apps/app303/hello.ts 1.44 KiB [built] [code generated]
9 modules
webpack 5.65.0 compiled successfully in 3960 ms
ℹ ｢wdm｣: Compiled successfully.
Issues checking in progress...
No issues found.

goqoo release

本番用にビルドする。

$ npx goqoo release
{ bundlerType: 'default', nodeEnv: 'development' }
{ mode: 'production' }
{ env: { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true } }
Failed to load /Users/yoshida/local/kintone/goqoo/sample01/gq01/.env.development.
asset app303.js 163 KiB [emitted] [compared for emit] [minimized] (name: app303) 2 related assets
runtime modules 1.13 KiB 5 modules
modules by path ./node_modules/core-js/internals/*.js 53.8 KiB 97 modules
modules by path ./node_modules/goqoo/ 25.8 KiB 6 modules
modules by path ./src/apps/app303/*.ts 1.53 KiB
  ./src/apps/app303/index.ts 87 bytes [built] [code generated]
  ./src/apps/app303/hideGroup.ts 1.44 KiB [built] [code generated]
modules by path ./node_modules/core-js/modules/*.js 14.4 KiB
  ./node_modules/core-js/modules/es.object.to-string.js 380 bytes [built] [code generated]
  ./node_modules/core-js/modules/es.promise.js 14 KiB [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24.3 KiB [built] [code generated]
./node_modules/luxon/build/cjs-browser/luxon.js 247 KiB [built] [code generated]
./node_modules/sweetalert/dist/sweetalert.min.js 39.9 KiB [built] [code generated]
./node_modules/clipboard-copy/index.js 1.61 KiB [built] [code generated]
webpack 5.65.0 compiled successfully in 9033 ms

dist配下にJSファイルが生成されるので、kintoneのカスタマイズJSにアップロードします。
ここは今のところ手動とのこと。

カスタマイズサンプル

カスタマイズするファイルは、src/apps/アプリ名配下に作成して、index.ts内で読み込むようにします。

hideGroup.ts

import type { DetailEvent } from 'types'

kintone.events.on(['app.record.detail.show','app.record.create.show','app.record.edit.show'], async (event: DetailEvent<any>) => {
  kintone.app.record.setFieldShown('hideGroup', false)
  console.log(event.record)
  return event
})

index.ts

import { goqoo } from 'goqoo'

goqoo('app', () => {
  require('./hideGroup')
})

トラブルシューティング

「sh: typesync: command not found」　と表示されます

~~tscがありません。TypeScriptをインストールしてください。~~

~~brew install typescript~~

何らかの原因でインストールに失敗した可能性があります。
goqoo new の後に、package.jsonを確認して、npm installしてみましょう。

「/bin/sh: typesync: command not found」と表示されます

~~TypeSyncをインストールしてください。~~

~~$ npm install typesync~~

goqoo new時はtypesyncが入っていないので、この表示自体は問題ありません。
その他の原因でインストールに失敗した可能性があります。
goqoo new の後に、package.jsonを確認して、npm installしてみましょう。

開発メモ

goqooのバージョン確認

$ npx goqoo -v
Goqoo    version: 1.0.0
Template version: 1.1.0

goqooのコマンドラインヘルプ

$ npx goqoo -h
usage: goqoo [-v, --version] [-h, --help]
              new <project name>
              generate <GENERATOR> <app name>
              start
              build
              watch
              release

参考

Goqoo on kintone
https://github.com/goqoo-on-kintone/goqoo