kintoneMCP使ったkintoneカスタマイズ開発環境整備

1.全体図の紹介

kintoneカスタマイズ開発のAI活用で
自動化を目指して今回の構成を導入しました。
(Windows環境のみの解説です)

各システムの役割

Claude Desktop：開発・自動化のハブ
AIによるコード生成、データ処理、各システムへの操作指示を行う中心的な存在

Github：ソース管理 & 自動化
コードのバージョン管理とGithub Actionsによる自動デプロイを担当

kintone：業務システム
業務データの取得元であり、カスタマイズコードのデプロイ先となるアプリケーション基盤

2.実装することで得られること

この連携により、kintoneカスタマイズ開発の一連のフローを自然言語での指示だけで完結できるようになります。

従来 → 本連携後

1. フィールド情報の確認
kintoneの管理画面でフィールド情報を確認
→ Claudeで自然言語や論理名でフィールド情報を確認

2. コード作成
ローカル環境でJavaScriptコードを作成
→ AIによるコードの自動生成

3. デプロイ
手動でkintoneにアップロード
→ Githubによるソースコード管理およびGithub Actionsによる自動アップロード

3. Claude Desktop と kintone を繋げる MCP の設定

前提条件

この設定を行う前に、以下を準備してください。

• Claude Desktop（最新版）
• kintone 環境のアクセス権限
• Node.js v18 以上

設定手順

Claude Desktop と kintone の連携には、MCP（Model Context Protocol）サーバーを使用します。

詳細な設定方法は、チームメンバーが執筆した以下の記事をご参照ください。

参考記事
Claude DesktopとkintoneをつなぐMCP Serverを作ってみた

4. Claude Desktop と Github を繋げる MCP の設定

前提条件

この設定を行う前に、以下を準備してください。

• Claude Desktop（最新版）
• Github アカウント
• Github Personal Access Token

Github Personal Access Token の取得

1. Github にログインし、
   Settings > Developer settings > Personal access tokens > Tokens (classic) へ移動
2. "Generate new token (classic)" をクリック
3. スコープを選択
   • repo (リポジトリへのフルアクセス)
   • workflow (Github Actions の管理)
4. トークンを生成する

MCP サーバーのインストール

コマンドプロンプトまたは PowerShell を開き、以下のコマンドを実行します。

npm install -g @modelcontextprotocol/server-github

注意: このパッケージは2025年4月に非推奨（deprecated）となっており、インストール時に警告が表示されますが、現時点では動作に問題ありません。今後、公式の新しい Github MCP Server（Docker版）への移行が推奨される可能性があります。

Claude Desktop の設定

Claude Desktop の設定ファイルに以下を追加します。

設定ファイルの場所

• Windows: %APPDATA%\Claude\claude_desktop_config.json

設定内容

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "取得したGithub Personal Access Token"
      }
    }
  }
}

5. Github と kintone を繋げる設定

Github Actions を使って、コードをpushすると自動的に kintone へデプロイされる仕組みを Claude Desktop に構築してもらいます。

5-1. Claude への指示

以下のように Claude に依頼します：

kintoneのカスタマイズコードをGithubで管理して、
pushしたら自動的にkintoneにデプロイする仕組みを作ってください。

要件：
- Github Actionsを使用
- mainブランチへのpush時に自動実行
- 変更されたアプリのみデプロイ
- kintone REST APIを直接使用

Claude が要件に応じて適切なリポジトリ構成、ワークフローファイル、デプロイスクリプトを提案・実装してくれます。

5-2. Github Secrets の設定

Claude に kintone の認証情報（ユーザー名、パスワード、ドメインなど）を伝えて、Github Secrets への登録を依頼します。

Claude が必要な情報を Github Secrets に自動登録してくれます。

5-3. 完成

これで、カスタマイズコードをpushすると自動的に kintone へデプロイされる仕組みが完成します。
※GithubのMCPツールから直接Github Actionをトリガーできない為
ダミーコミットを作成してpushすることでkintoneへのデプロイトリガーとする仕組みです

今後は Claude に「このアプリのカスタマイズを実装してデプロイして」と依頼するだけで、コード生成からデプロイまで自動実行されます。

6.kintoneカスタイズ実装例

今回は 文字列フィールド(自動計算)の値をリッチテキストに結合して反映させるカスタマイズ を
この構成の開発環境で実装する流れを紹介します。

(※)写真赤色枠の文字列を青色に結合する

Claude Desktop のプロジェクト機能を活用

この実装では Claude Desktop の プロジェクト機能 を使用することを推奨します。

プロジェクトを使うことで：

• アプリ情報やフィールド定義を記憶し、毎回説明する手間を削減
• 一貫したコーディングスタイルを維持

設定しておくと便利な情報：

• 対象の kintone アプリ情報
• Github ユーザー名
• その他固定化したい指示は随時追加

※今回はアプリIDおよびGithubユーザー名および処理フローのたびに確認フェーズを入れる
プロジェクト指示を入力してあります

実装の流れ

1. Claude Desktop でプロジェクト内のチャットを開始しプロンプトを入力する。

カスタマイズを実装します

メイン処理
・競合情報テキスト[ppt用]
・競合他社情報[1][ppt用]
・競合他社情報[2][ppt用]
・競合他社情報[3][ppt用]
を結合しリッチテキストの競合他社情報[ppt用]に反映させる

補足
・各フィールド結合時には改行を入れる

トリガー
・関連フィールド変更時にリアルタイムで変更する

2.Claude Desktop がMCP経由でkitnone対象アプリのフィールド構造を確認する

フィールド構造を確認しました。以下のフィールドが対象です:
結合元フィールド:

competitor_text (競合情報テキスト[ppt用]) - SINGLE_LINE_TEXT (計算式)
copmetitor_data_1 (競合他社情報[1][ppt用]) - SINGLE_LINE_TEXT (計算式)
copmetitor_data_2 (競合他社情報[2][ppt用]) - SINGLE_LINE_TEXT (計算式)
copmetitor_data_3 (競合他社情報[3][ppt用]) - SINGLE_LINE_TEXT (計算式)

結合先フィールド:

competitor_data_ppt (競合他社情報[ppt用]) - RICH_TEXT

3.実装方法の確認

メイン処理

4つのテキストフィールドを改行で結合
リッチテキストフィールド competitor_data_ppt に反映

トリガー

competitor_text
copmetitor_data_1
copmetitor_data_2
copmetitor_data_3

上記4フィールドのいずれかが変更されたときにリアルタイムで実行

※自動生成された実装JSスクリプト

javascript

// 各フィールドの値を取得
const texts = [
  record.competitor_text.value,
  record.copmetitor_data_1.value,
  record.copmetitor_data_2.value,
  record.copmetitor_data_3.value
];

// 空でない値のみを改行で結合
const combinedText = texts
  .filter(text => text && text.trim())
  .join('\n');

// リッチテキストに設定
record.competitor_data_ppt.value = combinedText;

4.Git反映の実施指示をプロンプトで入力

Git反映を実施

Claudeの回答

・カスタマイズファイルの確認→エラー
・ディレクトリ構造の確認
・既存ファイルの確認→存在しない場合には新規作成
・既存ファイルが存在する場合には確認
・コードへの反映
Git反映が完了

5.kintone環境への反映を実施指示をプロンプトで入力

kintoneへの反映を実施

Claudeの回答

・デプロイを実行します
デプロイが完了したのでkintoneで確認してください

6.kintoneへの反映の確認

実装されていることを確認しました

7.最後に

kintoneカスタマイズが自然言語作成され実装まで自動化されることで、今までのコーティング作業やプラグイン設定にかかっていた時間が大幅に短縮されます。またユーザーの細かな要求に答えることも「簡単」にできます。
今後はチームとして環境を整備しGitに保存されている開発標準を元にすることで全員が同じレベルでAIによるコーティングが可能な状況を進めます。