Introduction

This article introduces create-plugin, a plug-in development tool designed to make the development of Kintone plug-ins easier.

What is create-plugin?

Create-plugin is a CLI tool that allows users to create templates of Kintone plug-ins through interactive dialogue in the command prompt or terminal.
The tool is published on npm and is available for Windows, macOS, and Linux. Find the source code on GitHub .

Check the engines property in package.json for the Node.js version requirements.
For example, if the following property is stated, version 10 or more is required.

1
2
3

"engines": {
  "node": ">=10"
}

Installation

An example of global installation of create-plugin using npm:

1

$ npm install -g @kintone/create-plugin

Basic usage

Entering the following command will create a directory named dir_name.
Rename the directory by replacing dir_name with the desired text.

1

$ create-kintone-plugin dir_name

In this article, a template is created with the directory name Sample_Plugin.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$ create-kintone-plugin Sample_Plugin

Please answer some questions to create your Kintone plug-in project :)
Lets start!
? Input your plug-in name in English [1-64chars] Sample_Plugin
? Input your plug-in description in English [1-200] Sample_Plugin
? Does your plug-in support Japanese ? No
? Does your plug-in support Chinese ? No
? Input your homepage url for English (Optional)
? Does your plug-in support mobile views ? No
? Would you like to use @kintone/plugin-uploader ? Yes

A directory named Sample_Plugin will be created. Plug-in template files and directories are included in the src directory of this directory.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

$ tree Sample_Plugin

Sample_Plugin
├── node_modules/../..
├── package-lock.json
├── package.json
├── private.ppk
├── scripts
│   └── npm-start.js
└── src
    ├── css
    │   ├── 51-modern-default.css
    │   ├── config.css
    │   └── desktop.css
    ├── html
    │   └── config.html
    ├── image
    │   └── icon.png
    ├── js
    │   ├── config.js
    │   └── desktop.js
    └── manifest.json

*package-lock.json is a file that is generated when installed with npm5 or later.

Details

Details of the templates

The generated templates (src directories) have the following structure. Please see Plug-in Development Guide for further information on each file.

Contents of the generated plug-in

The template generated from create-plugin contains a sample code that allows optional text to be displayed at the top of the record list page.
The displayed text can be changed from the settings page of the plug-in.

Optional Features

Create-plugin also has other useful functions besides creating templates.

Source code check using ESLint

JavaScript source code can be checked using ESLint.

1
2
3
4
5

# Change the current working directory to the newly created one
$ cd Sample_Plugin

# Execute the validation check
$ npm run lint

Automatic packaging and upload

Running the following command directly to the plug-in will create a zip file of the plug-in.

1
2
3
4
5

# Change the current working directory to the newly created one
$ cd Sample_Plugin

# Execute automatic processing
$ npm start

If Use @kintone/plugin-uploader is chosen when running create-plugin, plugin-uploader will run.
*Plugin-uploader must be run by a user with admin rights for Kintone.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

...

Succeeded: dist/plugin.zip

# Enter Kintone subdomain information interactively
? Input your kintone's base URL (https://example.cybozu.com): https://<subdomain>.kintone.com
? Input your username: <login name>
? Input your password: [hidden]<password>

Open https://<subdomain>.kintone.com/login?saml=off
Trying to log in...
Navigate to https://<subdomain>.kintone.com/k/admin/system/plugin/
Trying to upload dist/plugin.zip
dist/plugin.zip has been uploaded!

After running the command, the monitoring mode will be activated. Modifying the source code while in monitoring mode will automatically package the plug-in, and upload the changes to the related Kintone subdomain.
*To stop monitoring, cancel the command with ctrl + c.

Finally

Using create-plugin with plugin-uploader creates a very powerful combination of tools that performs plug-in template creation, error checking, packaging, and uploading.

To fully utilize this too, follow this flow:

1. Create a plug-in template with create-plugin
2. Use the plug-in uploader to upload the plug-in to a Kintone environment
3. Use the monitoring mode so that every change made to the plug-in source files will be automatically uploaded and applied to the plug-in within the Kintone subdomain

This allows for speedy and efficient plug-in development.

Important Notes

For questions on how to use the create-plugin tool, post a question in the Kintone Developer Forum .
For reporting bugs and other issues, post it as a GitHub Issue in the js-sdk repository .
Modification, redistribution, and commercial use of the source code is subject to the license agreement.