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で動作を確認しています。