Create Plug-in Templates using create-plugin

Contents

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 (External link) .

Check the engines property in package.json (External link) 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. For more information on each file, refer to the following article:
Plug-in Development Specifications

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.

Plug-in settings page

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 (External link) .
For reporting bugs and other issues, post it as a GitHub Issue in the js-sdk repository (External link) .
Modification, redistribution, and commercial use of the source code is subject to the license agreement.