SDK & Tools

create-plugin

目次

create-plugin とは

create-plugin は、kintone プラグインのテンプレートを作成できる CLI ツールです。

npm パッケージとして提供されているため、Windows／macOS／Linux 環境で利用できます。

GitHub

https://github.com/kintone/js-sdk/tree/master/packages/create-plugin (External link)

ライセンス

MIT ライセンス (External link)

ドキュメント

https://github.com/kintone/js-sdk/blob/master/packages/create-plugin/README.md (External link)

下準備

create-plugin を実行するには、Node.js とパッケージ管理ツールの npm が必要です。
Node.js をインストールすると、npm は自動でインストールされます。

  1. Node.js 公式サイト (External link) からインストーラーをダウンロードします。
    必要な Node.js のバージョンは、リポジトリの packages/create-plugin/package.json (External link) にある engines プロパティを確認してください。 たとえば次の記載の場合、Node.js のバージョン 14 以上が必要です。

    1
2
3

    "engines": {
  "node": ">=14"
},

  2. ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。

Quickstart

create-plugin を使ってテンプレートを作成する手順を説明します。

Step1：必要なパッケージのインストール

create-plugin をインストールします。
ここでは、例として create-plugin をグローバルインストールする手順を説明します。

1

npm install -g @kintone/create-plugin

Step2：テンプレートの作成

  1. 次のコマンドで、テンプレートを作成します。 ここでは、例として「sample_plugin_project」というディレクトリーの下にテンプレートを作成します。

    1

    create-kintone-plugin sample_plugin_project

  2. 対話形式で、作成するプラグインの名前などのプラグインの情報を入力します。
    今回は、次の値を指定します。

    • プラグインの英語名：「sample」と入力して、Enter キーを押す。
    • プラグインの説明：Enter キーを押してスキップする。
    • 日本語をサポートするか：Enter キーを押す。
    • プラグインの日本語の説明を入力してください：Enter キーを押してスキップする。
    • プラグインの日本語名：Enter キーを押してスキップする。
    • 中国語をサポートするか？：Enter キーを押す。
    • プラグインの英語の Web サイト URL：Enter キーを押してスキップする。
    • プラグインの日本語の Web サイト URL：Enter キーを押してスキップする。
    • モバイルページのサポート：N キーを押して Enter キーを押す。
    • @kintone/plugin-uploader を使うか：N キーを押して Enter キーを押す。
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    create-kintone-plugin sample_plugin_project

kintoneプラグインのプロジェクトを作成するために、いくつかの質問に答えてください :)
では、はじめましょう！

? プラグインの英語名を入力してください [1-64文字] sample
? プラグインの説明を入力してください [1-200文字] sample
? 日本語をサポートしますか？ Yes
? プラグインの日本語名を入力してください [1-64文字] (省略可)
? プラグインの日本語の説明を入力してください [1-200文字] (省略可)
? 中国語をサポートしますか？ No
? プラグインの英語のWebサイトURLを入力してください (省略可)
? プラグインの日本語のWebサイトURLを入力してください (省略可)
? モバイルページをサポートしますか？ No
? @kintone/plugin-uploaderを使いますか？ No
依存ライブラリをインストールします
:
:
Success! Created sample at sample_plugin_project
:
:
kintoneプラグイン開発をはじめましょう！
開発に関する情報はcybozu developer network:

  https://developer.cybozu.io

「sample_plugin_project」ディレクトリーが生成されます。

「sample_plugin_project」の下には、次のようなプラグイン作成に必要なファイルが生成されます。
各ファイルの詳細は、 kintone プラグイン開発手順 を確認してください。

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

├── 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

create-plugin を使って、プラグインのテンプレートを作成できました。
あとは、プラグインにパッケージングして、kintone に適用していきます。

補足

自動でパッケージングする

生成された「sample_plugin_project」に対して、次のコマンドを実行すると、プラグインファイルにパッケージングできます。
プラグイン内のファイルを変更すると、ファイルの変更を感知して、自動でパッケージングします。
自動でパッケージングすることを中止するには、Ctrl + C（Mac の場合は、Command + C）でキャンセルします。

1
2

cd sample_plugin_project
npm start

create-plugin で「@kintone/plugin-uploader を使う」を選んでいる場合には、npm start コマンドを実行すると、プラグインを自動で kintone に追加できます。

更新履歴

@kintone/create-plugin の変更履歴は、 CHANGELOG (External link) を確認してください。

infomation

この記事で紹介しているサンプルコードは、2022 年 5 月版 kintone および @kintone/create-plugin v5.0.0 で動作を確認しています。