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) を確認してください。

information

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