@zygapp/kintone-customize-devtool

kintone カスタマイズ開発を超簡単に

Vite + HMR で kintone カスタマイズ開発を快適に。
コードを保存すれば、即座に kintone 画面に反映されます。

Features

Quick Start

1. インストール

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

2. プロジェクト作成

kcdev init my-app
cd my-app

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

• kintone ドメイン（例：example.cybozu.com）
• アプリ ID
• フレームワーク（React / Vue / Svelte / Vanilla）
• 言語（TypeScript / JavaScript）
• カスタマイズ対象（デスクトップ / モバイル）
• 適用範囲（ALL / ADMIN / NONE）
• 認証情報

3. 開発開始

kcdev dev

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

4. 本番デプロイ

kcdev build && kcdev deploy

Commands

`kcdev init [project-name]`

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

`kcdev dev`

開発サーバーを起動し、ローダーを kintone に自動デプロイします。

`kcdev build`

本番用ビルドを生成します。IIFE 形式で dist/ に出力されます。

`kcdev deploy`

ビルド成果物を kintone にデプロイします。

`kcdev types`

TypeScript プロジェクトで、kintone アプリのフィールド型定義を生成します。

`kcdev config`

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

`kcdev update`

Vite およびフレームワークプラグインを最新版に更新します。

How It Works

kintone
  ↓ classic script
kintone-dev-loader.js
  ↓ dynamic import
Vite dev server (ESM + HMR)
  ↓
src/main.*

kintone は classic script のみ対応ですが、kcdev は開発時に Vite の ESM + HMR を活用できるようローダーを自動生成・デプロイします。

開発者が意識するのは src/ 以下のコードだけ。 ローダーや設定ファイルは kcdev が管理します。

Requirements

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

インストール

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

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

License

MIT