kintone プラグインの開発ツールに create-plugin がリリースされてしばらくたったので、そろそろ開発環境を移行しようかと使ってみました。
しかし標準のままだと使いにくいところがあるので、少しいじってみました。

参考プラグイン開発手順

プラグイン開発
 create-pluginを使ってプラグインの雛形を作成しよう！

開発環境

npm なので、mac でも同じように出来るはず。

OS: windows 10
Editor: VSCode, Sublime Text3

標準手順

create-pluginを使ってプラグインの雛形を作成しよう！の手順に従って、サンプルプラグインを作ってみると、こんな感じに生成されます。

$ create-kintone-plugin sample

$ tree sample
sample
├── 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

標準手順の問題点

プラグイン毎に、「node_modules」が展開されて、その容量が 342MB もあります。
インストールされている内容を見ると、kintone 関連モジュールですね。
無駄ですし、git でソース管理するにしても、いちいち対象外にするのも面倒です。

plugin-manifest-validator
plugin-packer
plugin-uploader

対策案とインストール手順、カスタマイズ

必要なモジュールは -g オプションでインストールしておきましょう。
あとプラグイン毎に「node_modules」が展開されないように、create-plugin をカスタマイズします。

インストール

kintone プラグイン関連モジュールを -g オプションでインストールします。
npm-run-all は、plugin-packer とplugin-uploader の実行に使われています。

$ npm install -g @kintone/create-plugin
$ npm install -g @kintone/plugin-packer
$ npm install -g @kintone/plugin-uploader
$ npm install -g npm-run-all

create-plugin カスタマイズ

グローバルでインストールされたパスを見つけ、generator.js を探します。
私の環境では、nodist を使っているので、下記パスになっています。
C:\Program Files (x86)\Nodist\bin\node_modules@kintone\create-plugin\dist\src\generator.js

「deps_1.installDependencies(outputDirectory, lang);」をコメントします。
これで、プラグイン作成後に npm モジュールをインストールしなくなります。

generator.js

"use strict";
...
function generatePlugin(outputDirectory, manifest, lang, enablePluginUploader) {
    // copy and build a project into the output diretory
    buildProject(outputDirectory, manifest, enablePluginUploader);
    // npm install
    // (0, deps_1.installDependencies)(outputDirectory, lang);
}
exports.generatePlugin = generatePlugin;
...

template

create-plugin で生成されるファイル群は、下記のパスに用意されています。
C:\Program Files (x86)\Nodist\bin\node_modules@kintone\create-plugin\templates\minimum\

ここを自分用にカスタマイズしておけば、プラグイン生成後に直す部分を少し減らすことができます。

プラグインファイル名

標準では、plugin.zip で生成されますが、バージョン別にファイル名を分けたいですね。
生成されたディレクトリ内にある package.json にファイル名がありますので、２ヶ所変更しましょう。

"upload":
"build":

プラグイン sample1 のファイル名を sample1_plugin1.zip にしてみました。
自動的にディレクトリとバージョンで、ファイル名をつけて欲しいところです。

package.json

{
  "name": "sample1",
  "version": "0.1.0",
  "scripts": {
    
    "start": "node scripts/npm-start.js",
    "upload": "kintone-plugin-uploader dist/sample1_plugin1.zip --watch --waiting-dialog-ms 3000",
    
    "develop": "npm run build -- --watch",
    "build": "kintone-plugin-packer --ppk private.ppk --out dist/sample1_plugin1.zip src",
    "lint": "eslint src"
  },
  "devDependencies": {
    "@kintone/plugin-packer": "^1.0.1",
    
    "@kintone/plugin-uploader": "^2.2.0",
    "npm-run-all": "^4.1.3",
    
    "eslint": "^4.19.1",
    "eslint-config-kintone": "^1.3.0"
  }
}

アップロード先 kintone 環境

標準のままだとnpm start するたびに、 kintone 環境を聞いてきます。
プラグイン開発に使う kintone 環境はあまり変えないと思いますので、環境変数で指定しましょう。

plugin-uploaderを使ってプラグインファイルをkintoneへアップロードしよう！　
環境変数で指定する方法

.sh


# Windows(PowerShell)の場合
# 環境変数にあらかじめkintoneの情報を設定する
set-item "env:KINTONE_DOMAIN" <サブドメイン>.cybozu.com
set-item "env:KINTONE_USERNAME" <ログイン名>
set-item "env:KINTONE_PASSWORD" <パスワード>
set-item "env:HTTPS_PROXY or HTTP_PROXY" <プロキシサーバ設定>

# コマンド実行
$ cd sample_project
$ kintone-plugin-uploader --domain $env:KINTONE_DOMAIN --username $env:KINTONE_USERNAME --password $env:KINTONE_PASSWORD plugin.zip


# Macの場合
# 環境変数にあらかじめkintoneの情報を設定する
export KINTONE_DOMAIN=https://<サブドメイン>.cybozu.com
export KINTONE_USERNAME=<ログイン名>
export KINTONE_PASSWORD=<パスワード>
export HTTPS_PROXY or HTTP_PROXY=<プロキシサーバ設定>

# コマンド実行
$ cd sample_project
$ kintone-plugin-uploader --domain $KINTONE_DOMAIN --username $KINTONE_USERNAME --password $KINTONE_PASSWORD plugin.zip

環境変数へ永続的にkintoneの情報を設定する場合

.sh

# Windows(PowerShell)の場合
# 環境変数へ永続的にkintoneの情報を設定する
$ [System.Environment]::SetEnvironmentVariable("KINTONE_DOMAIN", "https://<サブドメイン>.cybozu.com", "User")
$ [System.Environment]::SetEnvironmentVariable("KINTONE_USERNAME", "<ログイン名>", "User")
$ [System.Environment]::SetEnvironmentVariable("KINTONE_PASSWORD", "<パスワード>", "User")

あとがき

プラグインの雛形生成、zip ファイル作成、kintone 開発環境へアップロードまで面倒見てくれるツールは便利ですね。
もう少し慣れてきたら、これまでに開発したプラグインも順次こちらに移行していきたいと思います。

kintone create-plugin を使ってみた

参考 プラグイン開発手順