kintoneは業務アプリをすばやく作れるプラットフォームですが、独自UIや凝ったカスタマイズが必要になると、JavaScript開発・環境構築・デプロイ・テストデータの準備など、一気に手間が増えます。

この記事では、OSSの開発キット kintone-devkit と、AIコーディングエージェント Claude Code を組み合わせて、アプリ作成 → 独自UI実装 → テストデータ投入までを「AI駆動」で一気通貫する流れを、在庫・備品管理アプリを題材にハンズオン形式で解説します。手順をなぞるうちに、kintoneそのものの理解も深まる構成にしています。

対象読者

• kintoneのカスタマイズ開発に興味がある方
• AI駆動開発を業務システムづくりに取り入れたい方
• 情シス・社内SEで、開発の効率化を探している方

kintone-devkit は、TypeScript + Vite をベースにしたkintone開発キットです。1つのプロジェクトで複数のkintoneアプリをまとめて管理でき、主に次の機能を備えています。

• Viteによる高速ビルドとホットリロード
• スキーマ（フィールド・ビュー・レイアウト）のJSON管理／環境間デプロイ／差分検出
• レコード・添付ファイルのバックアップ／復元（API制限へ自動対応）
• プラグイン開発（署名・パッケージング・自動アップロード）

そして本記事の主役が、Claude Code 用のスキルを同梱している点です。代表的なものを挙げます。

つまり、リポジトリをcloneしてClaude Codeを起動し、スキルを呼ぶだけで、AI駆動開発の土台が整います。「自分でコマンドを叩く」だけでなく「AIにスキルを使わせて、人はレビューに回る」スタイルになります。

これから進める流れを図にすると次のとおりです。

flowchart TD
  A[設計ドキュメントを書く] --> B["/kintone-provision\nアプリ作成"]
  B --> C["/kintone-schema\nスキーマ把握"]
  C --> D["独自UI実装\nkintone.events.on"]
  D --> E["/kintone-deploy\n本番反映"]
  E --> F["/kintone-mock + /kintone-record\nテストデータ投入"]
  F --> G["/kintone-e2e\n動作検証"]

まずは安全に練習できる環境を用意します。kintoneは 開発者ライセンス で無償の開発環境（専用サブドメイン）を作れます。本番テナントを汚さずに試せるので、学習用にはこれが最適です。

次にリポジトリを取得します。

git clone https://github.com/oga114/kintone-devkit
cd kintone-devkit
npm install
cp .env.example .env

.env に接続情報を設定します。

KINTONE_BASE_URL=https://your-domain.cybozu.com
KINTONE_USERNAME=your_username
KINTONE_PASSWORD=your_password
# パスワードの代わりにAPIトークンでも可
KINTONE_API_TOKEN=xxxxxxxxxxxxxxxx
KINTONE_ENV=dev

💡 kintoneの認証は2系統あります。ユーザー認証（パスワード）と、アプリ単位のAPIトークンです。APIトークンはアプリごとに発行し、閲覧／追加／編集／削除といった権限をスコープで絞れます。最初はパスワード認証で全体を触り、運用に寄せる段階でトークンに切り替えると理解しやすいです。

独自UIを作る前に、土台となる概念を押さえておくと、後の工程が一気にラクになります。

• アプリ ≒ 1つのテーブル（フィールド＝列、レコード＝行）
• スペース … アプリをまとめる器＋掲示板（スレッド）機能
• ビュー … 同じデータの「見せ方」。一覧の絞り込み・並び替え・カスタマイズビュー
• プロセス管理 … レコードのステータスを承認フローで回す、kintone独自の強力な機能
• ACL … スペース／アプリ／レコード／フィールドの各階層で権限を設定できる

REST APIの主要エンドポイントは、レコード操作の records、フォーム定義の app/form/fields、ビューの app/views あたりを押さえておけば十分です。

題材は 在庫・備品管理アプリです。まずは設計ドキュメントを書きます（/kintone-docs でたたき台を生成させてもOKです）。たとえば次のようなフィールド構成にします。

• 備品名（文字列1行）
• 管理番号（文字列・重複禁止）
• カテゴリ（ドロップダウン）
• 数量（数値）
• 最低在庫数（数値）
• 保管場所（文字列）
• 担当者（ユーザー選択）
• ステータス（ドロップダウン：在庫あり／要発注／廃棄）

この設計ドキュメントをClaude Codeに渡し、/kintone-provision を実行すると、スペースとアプリが自動構築されます（ドライランで確認してから本番反映、という流れが安全です）。

アプリの雛形だけ手元に欲しい場合は、対話形式のコマンドも使えます。

npm run create

対話で「アプリ名」と「環境パターン」を選びます。環境パターンは 1:単一環境 / 2:ソースコード分離 / 3:スキーマ同期 の3種類で、差分デプロイを活用するなら パターン3 がおすすめです。

フィールド設計の勘所：lookup（他アプリの値をコピーして取り込む）と「関連レコード一覧」（他アプリのレコードを参照表示する）の違いを理解しておきましょう。また計算フィールドで「最低在庫数 − 数量」を出せば、不足数を自動算出できます。

アプリができたら、スキーマをJSON化して構造を把握します。

npm run schema -- inventory                  # dev環境のスキーマをJSON化
KINTONE_ENV=prod npm run schema -- inventory # 別環境も取得
npm run schema:diff                          # 環境間の差分を確認

スキル版は /kintone-schema・/kintone-fields・/kintone-diff です。取得したJSONには、各フィールドの code（API用の内部名）・type・選択肢などが入っています。

この code が、このあとのカスタマイズJSからフィールドを指すキーになります。さらに、スキーマJSONは「環境間デプロイの正本」になり、devで作った構成をprodへ差分適用できます。code は最初に固めておくのが鉄則です。

いよいよ独自UIです。src/apps/inventory/index.ts にイベントハンドラを書きます。例として、一覧画面で在庫不足の行を強調してみます。

kintone.events.on('app.record.index.show', (event) => {
  const rows = document.querySelectorAll('.recordlist-row-gaia');
  event.records.forEach((record, i) => {
    const qty = Number(record.quantity.value);
    const min = Number(record.min_stock.value);
    if (qty < min) {
      // CSSで赤背景や「要発注」バッジを付ける
      rows[i]?.classList.add('low-stock');
    }
  });
  return event;
});

開発から反映までのコマンドはこの通りです。

npm run dev -- inventory    # ホットリロードで試作（保存即反映）
npm run typecheck          # 型チェック
npm run build -- inventory # 本番ビルド
npm run upload -- inventory # kintoneへアップロード

一括反映はスキル /kintone-deploy（カスタマイズ＋スキーマをまとめてデプロイ）でも行えます。

🧠 イベントの使い分け：app.record.index.show（一覧表示）／ detail.show（詳細表示）／ create.submit・edit.submit（保存直前のバリデーション）など、発火タイミングごとに使い分けます。レコードは event オブジェクト経由で読み書きし、最後に event を return するのが基本作法です。kintone.api を使えばREST操作も可能です。

在庫管理アプリなら、こんな独自UIが考えられます。

• 一覧：在庫不足を色付け＋「要発注」バッジ
• 詳細：ワンクリックで「発注メモ追加」ボタン
• 一覧上部：カテゴリ別の在庫サマリーパネル

動作確認には現実的なデータが欠かせません。ここはAIの得意分野です。

1. /kintone-mock に「在庫・備品管理アプリに現実的なダミーを50件」と指示 → スキーマに沿ったモックデータを生成
2. /kintone-record でREST APIから一括登録
3. /kintone-query（自然言語→クエリ）や backup で投入結果を確認

npm run backup -- inventory          # 投入後にバックアップ
npm run backup:restore -- inventory  # 復元して可搬性を確認

🧠 レコードの一括登録APIには、1リクエストあたりの件数上限があります。超える場合は分割（ページネーション／カーソル）が必要ですが、devkitが自動で処理してくれます。失敗時の部分登録・ロールバックの挙動も把握しておくと運用で安心です。

仕上げにE2Eテストです。/kintone-e2e は Playwright MCP を使い、ブラウザを自動操作して「一覧表示 → 絞り込み → 詳細 → 独自UI操作」の主要導線を検証します。

🧠 kintoneの画面は動的描画が多く、DOMが後から差し替わります。待機処理やセレクタの安定化が、独自UIを壊さずに改修し続けるための保険になります。

• 設計ドキュメントを最初にきちんと書く：provision / docs の品質は、入力する設計書の質に比例します。
• code（フィールド内部名）を最初に固定する：後から変えるとカスタマイズJSが壊れます。
• dev環境で完結させる：開発者ライセンス環境で安全に試し、検証後にprodへ差分デプロイします。
• AIに丸投げしない：生成物（スキーマ・コード・データ）は必ずレビューを。API上限や権限といったkintone特有の制約は、人が押さえる前提で進めます。

kintone-devkit と Claude Code を組み合わせると、アプリ作成 → 独自UI → テストデータ → E2E までを、ほぼ会話ベースで進められます。ポイントは、AIに任せる部分（定型コードやデータ生成）と、人が押さえる部分（設計とkintoneの制約理解）を切り分けること。

この記事の流れをなぞれば、AI駆動開発の感覚と、kintoneの基礎の両方が同時に身につきます。まずは開発者ライセンスで環境を作り、在庫管理アプリから試してみてください。

リポジトリはこちらです：github.com/oga114/kintone-devkit