kintoneプラグイン開発を効率化する!plugin-craft-kitの魅力

ブログ

kintoneプラグイン開発を効率化するツールについて紹介します。

はじめに

kintoneプラグインの開発で、修正のたびにパッケージングやアップロードを繰り返す作業に悩まされていませんか?
これらの手間を減らし、開発効率を大きく向上させるために、バンドルツールを活用する方が増えています。
今回は、kintoneプラグイン開発向けの便利なバンドルツール、plugin-craft-kitを紹介します!

プラグイン開発における課題

まずは、一般的なプラグイン開発の流れとその課題について振り返ってみましょう。
通常、プラグイン作成には以下の手順が必要です。

  1. 必要なファイル(JavaScript, CSSファイルなど)の準備
  2. マニフェストファイル(manifest.json)の作成
  3. パッケージツール( plugin-packer )を利用したパッケージング
  4. 手動またはCLIツール( plugin-uploader )によるkintone環境へのアップロード

特に、修正が必要な場合は、手順3と手順4を何度も繰り返すことになり、効率が悪くなってしまいます。

plugin-craft-kitとは

plugin-craft-kit (External link) は、 cyaoc (External link) さんが開発したオープンソースのツールです。
Rsbuildをベースにしており、kintoneプラグイン開発を効率化する機能がそろっています。
以下のようなメリットがあります。

  • デプロイが簡単:npm run buildで自動パッケージジング&アップロードできます。
  • 修正が楽:開発中はnpm run devを起動するだけで、変更が即反映されます。
  • 実行速度が速い:モダンなビルドツール、Rsbuildベースなので高速な処理を実現できます。
  • セキュリティの向上:ローカルHTTPS証明書が自動で発行されるので、安全に開発できます。

詳しくは、以下を確認してください。
GitHubリポジトリ (External link)

plugin-craft-kitを使った開発の魅力

プロジェクト作成と設定が簡単

plugin-craft-kitを使用すると、プロジェクトの初期設定が簡単になります。
webpackやViteでも同様のことができますが、環境設定の複雑から初心者には敷居が高くなりがちです。
しかし、plugin-craft-kitでは、plugin-packerやplugin-uploader、その他の依存パッケージがすでに設定されているため、開発者自身で細かい設定をする必要がありません。
基本的に開発者が設定するのはrsbuild.config.mjsだけで、サンプルも提供されています。

ビルドやアップロードに必要な手順は以下のとおりです。

STEP1:プロジェクトのセットアップ
  • プロジェクトのフォルダーを作成
1
mkdir my-kintone-plugin && cd my-kintone-plugin
  • プロジェクトを初期化
1
npm init -y
  • 必要なライブラリをインストール
1
npm install @rsbuild/core --save-dev
  • plugin-craft-kitをインストール
1
npm install @cyaod/plugin-craft-kit --save-dev
STEP2:Rsbuildの設定ファイルを作成

こちらの サンプル (External link) を参考に、Rsbuildの設定ファイルとしてrsbuild.config.mjsを作成する。

STEP3:package.jsonにコマンドを追加

scriptsを次のように設定する。

1
2
3
4
"scripts": {
  "build": "rsbuild build",
  "dev": "rsbuild dev"
}
STEP4:kintone環境のログイン情報などを保存するために.envファイルを作成

.envファイルの例は以下のとおりです。

1
2
3
KINTONE_BASE_URL=https://sample.cybozu.com/
KINTONE_USERNAME=loginname
KINTONE_PASSWORD=password

開発とデプロイの効率化

従来のプラグイン開発では、パッケージングやアップロードなどの作業を繰り返す必要がありました。
plugin-craft-kitを使用すれば、npm run devコマンドを実行するだけで、開発中の変更が即時に反映されます。

また、他のバンドルツールと比較して、変更をkintone環境へ反映する際にビルド不要で、実行速度が速いです。
たとえばnpm run devコマンドの実行速度は、webpackとbabelを組み合わせた環境に比べて10倍以上速いとされています。

さらに、TypeScript、Vue、Reactに対応していることも開発者にとって大きな魅力です。
本番環境へのデプロイも簡単で、npm run buildコマンドを実行するだけで最適化されたプラグインが完成します。

おわりに

今回のブログでは、kintoneプラグイン開発を効率化するためのツール、plugin-craft-kitの魅力を紹介しました。
このように便利なツールを使うことで、開発効率を大幅に向上させることができます。
ぜひ試してみてください!

information

このブログの内容は、2025年4月版kintoneで動作を確認しています。