kintone カスタマイズ CLI ツール

kintone のカスタマイズを簡単かつ効率的に開発するための TypeScript 対応 CLI ツールです！

🎯 特徴

• TypeScript 完全対応: TypeScript/JavaScript の両方をサポート
• 対話式プロジェクト生成: ガイド付きでプロジェクトを簡単作成
• 自動ビルドファイル管理: ビルド後に自動的に config.json を更新
• リアルタイム開発: ローカル環境で変更が即座に kintone に反映
• CDN・ローカルファイル対応: CDN URL とローカルファイルを混在可能
• 柔軟なビルド: Vite の高速ビルドを活用
• 簡単なデプロイ: コマンド 1 発で本番環境に反映
• プラグイン対応: vite.plugins.ts/js を自動検出

🔧 コマンド一覧

kintone-customizer <command>

| コマンド | 説明 | | -------------- | ------------------------------------------------------ | | init | 対話式で config.json を生成し、プロジェクトを初期化 | | dev | 開発サーバー起動とリアルタイム自動デプロイ | | build | TypeScript/JavaScript をビルド（config.json 自動更新） | | deploy | kintone に本番デプロイ | | dev:deploy | 開発モードで逐次デプロイ（CSS ファイル追加対応） | | build:deploy | ビルドとデプロイを同時実行 |

🛠️ 機能

1. TypeScript/JavaScript 対応

エントリーポイントを TypeScript（.ts）または JavaScript（.js）で作成可能：

// src/main.ts (TypeScript)
import "./style.scss";

kintone.events.on("app.record.index.show", (event: any) => {
  console.log("Hello, kintone customize!");
  return event;
});

// src/main.js (JavaScript)
import "./style.scss";

kintone.events.on("app.record.index.show", function (event) {
  console.log("Hello, kintone customize!");
  return event;
});

2. Vite プラグインを簡単追加

プロジェクトルートにあるvite.plugins.tsまたはvite.plugins.jsにプラグインを追加：

// vite.plugins.ts
import { Plugin } from "vite";
import vue from "@vitejs/plugin-vue";

const plugins: Plugin[] = [vue()];

export default plugins;

3. CDN とローカルファイルの混在

config.json で外部 CDN、ローカルファイル、ビルドファイルを自由に組み合わせ：

{
  "desktop": [
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
    "lib/utils.js",
    "dist/main.js",
    "dist/main.css"
  ],
  "mobile": []
}

4. 自動ビルドファイル管理

• ビルド成功時にdist/ファイルを自動で config.json に追加
• CSS ファイルがビルドされない場合は自動削除
• エントリーファイル不存在時の dist フォルダー自動クリーンアップ

🚀 始め方

1. インストール

   npm install -g @zygapp/kintone-customizer-cli

2. プロジェクトを初期化 対話形式で config.json が生成されます。

   create-kintone-customizer <ディレクトリ名|kintone-customizer>

   または既存ディレクトリで：

   kintone-customizer init

3. 設定確認 対話形式で作成された./config.jsonを確認・調整します。

   {
     "app": "123",
     "name": "app",
     "mainJsPath": "src/main.ts",
     "desktop": [],
     "mobile": [],
     "scope": "ALL",
     "baseUrl": "https://example.cybozu.com",
     "auth": {
       "username": "username",
       "password": "password"
     }
   }

   | プロパティ | 型 | 必須 | 説明 | | --------------- | :----------------: | :--: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | app | String|Number | ✅️ | kintone アプリ ID | | name | String | ✅️ | 出力されるファイル名を設定します。※ 半角英数字 | | mainJsPath | String | ✅️ | ビルド対象の JS ファイルのパスを指定します。 | | desktop | Boolean|Array | ✅️ | デスクトップ用カスタマイズファイルのパスを配列で指定CDN URL、ローカルファイル、ビルドファイル（dist/）を組み合わせ可能falseまたは空配列の場合は kintone に適用されません※1 | | mobile | Boolean|Array | ✅️ | モバイル用カスタマイズファイルのパスを配列で指定CDN URL、ローカルファイル、ビルドファイル（dist/）を組み合わせ可能falseまたは空配列の場合は kintone に適用されません※1 | | scope | String(enum) | ✅️ | カスタマイズの適用範囲ALL：すべてのユーザーの場合ADMIN：アプリの管理者だけの場合NONE：適用しない場合 | | baseUrl | String | ✅️ | デプロイ対象の kintone 環境 URL | | auth | Object | ✅️ | 認証情報 | | auth.username | String | 🔼 | 【条件必須】アプリ設定権限をもつ kintone ユーザーのアカウント IDauth.apiKeyを設定する場合は必須 | | auth.password | String | 🔼 | 【条件必須】アプリ設定権限をもつ kintone ユーザーのパスワードauth.apiKeyを設定する場合は必須 | | auth.apiKey | String | 🔼 | 【条件必須】アプリ設定権限をもつアプリの API キーauth.usernameおよびauth.passwordを設定する場合は必須 |

   ※1 入力例:

   {
     "desktop": [
       "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
       "lib/utils.js",
       "dist/main.js",
       "dist/main.css"
     ],
     "mobile": false
   }

4. ローカル環境で開発 自動ビルド・デプロイでリアルタイム開発を実現

   # npm
   npm run dev
   
   #yarn
   yarn dev

5. ローカル環境でビルド

   # npm
   npm run build
   
   #yarn
   yarn build

6. 本番環境にデプロイ

   # npm
   npm run deploy
   
   #yarn
   yarn deploy

7. ビルドとデプロイを同時実行

   # npm
   npm run build:deploy
   
   #yarn
   yarn build:deploy

📝 ライセンス

このプロジェクトは MIT ライセンスのもとで提供されています。

👨‍💻 開発者情報

加藤@合同会社 ZYG https://www.zyg.jp