@zygapp/kintone-plugin-devtool

kintone プラグイン開発を超簡単に

Vite + HMR で kintone プラグイン開発を快適に。
コードを保存すれば、即座に kintone 画面に反映されます。

Features

Quick Start

1. インストール

npm install -g @zygapp/kintone-plugin-devtool

2. プロジェクト作成

kpdev init my-kintone-plugin
cd my-kintone-plugin

対話形式で以下を設定します：

• プラグイン名
• kintone ドメイン（例：example.cybozu.com）
• フレームワーク（React / Vue / Svelte / Vanilla）
• 言語（TypeScript / JavaScript）
• カスタマイズ対象（デスクトップ / モバイル）
• 認証情報

3. 開発開始

kpdev dev

ブラウザが自動で開きます。https://localhost:3000 の SSL 証明書を許可すると、kintone にリダイレクトされます。

4. 本番デプロイ

kpdev build
kpdev deploy

Commands

`kpdev init [project-name]`

新しいプラグインプロジェクトを初期化します。

生成されるもの:

• ソースコード（src/main/, src/config/）
• 開発用ローダープラグイン
• 開発用・本番用 RSA 秘密鍵
• SSL 証明書
• Vite 設定

`kpdev dev`

開発用ローダープラグインを kintone にデプロイし、Vite dev server を起動します。

`kpdev build`

本番用プラグイン ZIP を生成します。ビルド前にバージョン更新を対話形式で選択できます。

# 対話形式でモードを選択
kpdev build

# 本番ビルド（minify + console削除）
kpdev build --mode prod

# プレビルド（minifyなし + console残す）
kpdev build --mode pre

`kpdev deploy`

本番用プラグイン ZIP を kintone にデプロイします。複数の本番環境への一括デプロイに対応。

# 対話形式でモードとデプロイ先を選択
kpdev deploy

# 全環境にデプロイ
kpdev deploy --all

`kpdev config`

プロジェクト設定を対話形式で変更します。

`kpdev migrate`

既存プロジェクトを最新の kpdev 仕様に更新します。

`kpdev update`

プロジェクトの依存パッケージを一括更新します。

Project Structure

my-kintone-plugin/
├── src/
│   ├── main/             # desktop/mobile 共通コード
│   │   ├── main.tsx
│   │   ├── App.tsx
│   │   └── style.css
│   └── config/           # プラグイン設定画面
│       ├── main.tsx
│       ├── App.tsx
│       └── style.css
├── .kpdev/
│   ├── config.json       # プロジェクト設定
│   ├── manifest.json     # プラグインマニフェスト
│   ├── keys/             # RSA 秘密鍵
│   │   ├── private.dev.ppk   # 開発用
│   │   └── private.prod.ppk  # 本番用
│   └── managed/          # ローダープラグイン（自動生成）
├── dist/                 # ビルド出力
├── icon.png              # プラグインアイコン（56x56）
└── package.json

How It Works

kintone
  ↓ classic script
kintone-dev-loader.js（開発用プラグインとしてインストール）
  ↓ dynamic import
Vite dev server (ESM + HMR)
  ↓
src/main/main.*      # desktop/mobile 用
src/config/main.*    # プラグイン設定画面用

開発用と本番用の分離

• 開発用（private.dev.ppk）: ローダープラグイン用。プラグイン名に [DEV] プレフィックスが付きます。
• 本番用（private.prod.ppk）: 本番ビルド用。

秘密鍵ごとにプラグイン ID が異なるため、開発用プラグインが本番環境に混入することを防ぎます。

Requirements

• Node.js 18 以上
• kintone 環境（cybozu.com）

インストール

npm install -g @zygapp/kintone-plugin-devtool

npmパッケージ: https://www.npmjs.com/package/@zygapp/kintone-plugin-devtool

License

MIT