SDK&Tools

create-plugin

目次

create-pluginとは

固定リンクがコピーされました

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

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

GitHub

固定リンクがコピーされました

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

ライセンス

固定リンクがコピーされました

MITライセンス (External link)

ドキュメント

固定リンクがコピーされました

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

下準備

固定リンクがコピーされました

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

  1. Node.js公式サイトからインストーラーをダウンロードします。
    Node.js公式サイト (External link)
    必要なNode.jsのバージョンは、以下のリポジトリにあるenginesプロパティを確認してください。
    packages/create-plugin/package.json (External link)
    たとえば次の記載の場合、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プラグイン開発手順を確認してください。
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を確認してください。
CHANGELOG (External link)

information

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