AI駆動開発が浸透し、kintoneのカスタマイズをAIに任せるという方法も珍しくなくなってきました。
しかし、AIにkintoneカスタマイズのコードを書かせると、一見動きそうなものは返ってくるものの次のような問題に直面することがあります。

• 存在しないAPIや非推奨のAPI・書き方を使ったコードが生成される。
• どの情報を根拠にコードが生成されたのかわからない。

その結果、動作確認やデバッグ、コードレビューに時間がかかってしまうこともあります。
特に、kintone開発に慣れていない方にとっては、AIの書いたコードが信頼できるか見極めるのも難しいです。
こうした問題を解決してくれるのが、kintone Documentation MCPサーバーです。
AIが常に最新の技術情報を検索・取得することで、cybozu developer networkに掲載されている最新のAPI仕様やコーディングガイドラインに沿ったコードを生成しやすくなります。
さらに、kintoneの操作を自然言語で行えるkintone MCPサーバーと組み合わせることで、実際のアプリ構成を踏まえたコードも作れます。

本記事では、この2つのMCPサーバーを併用するユースケースを2つ紹介します。

それぞれのMCPサーバーは、次のような役割を担います。

• kintone Documentation MCPサーバー：開発者向けのkintone公式ドキュメントをAIが検索／取得できます。
• kintone MCPサーバー：AIから自然言語でkintoneを操作できます。アプリ作成やフィールド追加、レコード操作などが実行できます。

これらの関係性を図にすると、次のようになります。
AIが目的に応じて2つのMCPサーバーを使い分けるイメージです。

ここからは、2つのMCPサーバーを組み合わせた活用方法について、2つのユースケースを紹介します。

• ユースケース1：アプリにフィールドを追加する。
  • AIが自らドキュメントを参照し、エラーの解決まで導く例を紹介します。
• ユースケース2：JavaScriptカスタマイズを生成する。
  • AIが最新のAPI情報を取得し、今の仕様に沿った書き方でコードを生成する例を紹介します。

動作環境

本記事では、Claude for Desktop（モデル：Opus 4.7）を使用して動作確認しました。

各MCPサーバーのセットアップ

各MCPサーバーのセットアップ手順については、それぞれ次の記事で解説しています。

• kintone MCPサーバーのクイックスタート
• kintone Documentation MCPサーバー（β）

アプリの準備

各MCPサーバーのセットアップができたら、次にkintoneアプリの準備をします。
今回は、アプリストアにサンプルとして用意されている 「問い合わせ管理」 アプリを利用します。

カスタマイズの要件に合わせて、既存のアプリにフィールドを追加したい場面で使えるユースケースです。
ここでは「問い合わせ管理」アプリに、製品カテゴリーで分類するためのフィールドと、対応進捗率を管理するためのフィールドを追加します。
このユースケースでは、AIが自らドキュメントを参照し、エラーを解決まで進める流れを見ていきます。

プロンプトの用意

XXXの部分は、ご自身の環境の「問い合わせ管理」アプリのIDに書き換えてください。

1
2
3
4
5
6

問い合わせ管理アプリ（ID:XXX）に、次のフィールドを追加してください。

- 製品カテゴリー（ドロップダウン:ハードウェア/ソフトウェア/クラウドサービス/周辺機器/その他）
- 対応進捗率（数値:0〜100、単位は %）

追加が完了したらデプロイまで行ってください。

実行結果を確認する

問い合わせ管理アプリに、製品カテゴリーと対応進捗率の2つのフィールドが追加され、環境に反映されていれば成功です。

エラー発生時のAIの動き

今回のユースケースの中で、AIは一度エラーに直面しました。
「製品カテゴリー」のフィールドコードにカテゴリーを指定したところ、次のエラーが表示されました。

​ [400] [CB_VA01] 入力内容が正しくありません ​

このエラーメッセージだけではどこが悪いのかわかりません。
そこで、AIはkintone Documentation MCPサーバーで フィールドを追加する APIのドキュメントを参照し、カテゴリーはフィールドコードに指定できないことが判明します。

「カテゴリー」は、kintoneのカテゴリ機能に使われている特殊なフィールドコードで、ユーザーが新規追加するフィールドコードとして指定できません。
kintoneヘルプ： フィールドコードの設定ルール

原因が判明したので、AIはフィールドコードをカテゴリーからProductCategoryに変更して再度実行し、フィールドの追加に成功しました。
2つのMCPサーバーを併用することで、エラーが発生してもAIが公式ドキュメントを根拠に解決まで進めてくれるため、開発をスムーズに進められます。

kintoneアプリにJavaScriptカスタマイズを追加したい場面で使えるユースケースを紹介します。
今回は「問い合わせ管理」アプリで、対応状況を「完了」にしたとき対応進捗率が100%未満なら、対応進捗率フィールドを強調するカスタマイズを追加します。
2つのMCPサーバーを併用することで、AIはコードを書く前にkintone MCPサーバーで実際のアプリ構成を確認し、kintone Documentation MCPサーバーで最新のドキュメントからAPIの仕様を確認できます。

プロンプトの用意

先ほどと同様、XXXの部分は、ご自身の環境の「問い合わせ管理」アプリのIDに書き換えてください。

1
2
3

問い合わせ管理アプリ（ID:XXX）に次のようなカスタマイズを追加してほしいです。
編集画面で、対応状況を「完了」にしようとした時に対応進捗率が100%未満の場合、進捗率フィールドを赤背景+太字で強調表示するカスタマイズです。
kintone Documentation MCPサーバーを使って、ドキュメントを参照しながらJavaScriptのコードを書いてください。

AIの動き

このプロンプトを実行すると、AIは2つのMCPサーバーのツールを呼び出しながら、次の流れでコードを生成します。

1. kintone MCPサーバーで、対象アプリのフィールド情報を取得します。
   ここで具体的なフィールドコードが分かり、コード生成時に正しいフィールドコードを使えます。

   

2. kintone Documentation MCPサーバーのsearch_docsで、関連するドキュメントをcybozu developer network全体から検索します。
   今回はフィールドのスタイルを変更するAPIや、編集画面のイベントについて関連ページを探しています。

   

3. kintone Documentation MCPサーバーのget_pageで、検索結果の中から必要なページを指定して内容を取得し、APIの仕様を確認します。
   これにより、setFieldStyle()の具体的な使い方や、編集画面でフィールドのスタイルを変更する方法が分かります。

   

生成されたJavaScriptコード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

/*
 * 問い合わせ管理アプリ用カスタマイズ
 * 「対応状況」を「完了」にした際、「対応進捗率」が100%未満なら
 * 進捗率フィールドを赤背景＋太字で強調表示する
 */
(() => {
  'use strict';

  // 強調スタイル（赤背景＋太字）
  const HIGHLIGHT_STYLE = {
    content: {
      backgroundColor: '#FEE2E2',
      fontWeight: 'bold',
      borderColor: '#EF4444'
    },
    label: {
      color: '#DC2626',
      fontWeight: 'bold'
    }
  };

  // 条件に応じて進捗率フィールドのスタイルを更新する
  const updateProgressRateStyle = async (record) => {
    const status = record.Status.value;
    const progressRate = Number(record.ProgressRate.value);

    if (status === '完了' && progressRate < 100) {
      await kintone.app.record.setFieldStyle('ProgressRate', HIGHLIGHT_STYLE);
    } else {
      await kintone.app.record.setFieldStyle('ProgressRate', 'DEFAULT');
    }
  };

  // 編集画面表示時に初期状態を反映
  kintone.events.on('app.record.edit.show', async (event) => {
    await updateProgressRateStyle(event.record);
    return event;
  });

  // 対応状況の変更時にスタイルを更新
  kintone.events.on('app.record.edit.change.Status', (event) => {
    updateProgressRateStyle(event.record).catch((error) => {
      console.error('進捗率フィールドのスタイル更新に失敗しました:', error);
    });
    return event;
  });

  // 対応進捗率の変更時にスタイルを更新（100%にしたら解除されるように）
  kintone.events.on('app.record.edit.change.ProgressRate', (event) => {
    updateProgressRateStyle(event.record).catch((error) => {
      console.error('進捗率フィールドのスタイル更新に失敗しました:', error);
    });
    return event;
  });
})();

このコードで使用しているkintone.app.record.setFieldStyle()は2026年2月に追加された新しいAPIです。
このような新しいAPIをAIが利用するには、何らかの方法で最新の公式ドキュメントの情報を取得する必要があります。

実行結果を確認する

生成されたJavaScriptファイルを「問い合わせ管理」アプリに適用し、動作を確認します。

編集画面で対応状況を「完了」に変更し、対応進捗率が100%未満のときに対応進捗率フィールドが強調されれば成功です。

MCPサーバーを使わなかった場合との比較

kintone Documentation MCPサーバーを使わずに同じプロンプトを実行したところ、次のようなコードが生成されました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// kintone Documentation MCPサーバーなしで生成されたコード（抜粋）
function setProgressRateHighlight(highlight) {
  var fieldEl = kintone.app.record.getFieldElement('ProgressRate');
  if (!fieldEl) return;
  if (highlight) {
    fieldEl.style.backgroundColor = HIGHLIGHT_STYLE.backgroundColor;
    fieldEl.style.fontWeight = HIGHLIGHT_STYLE.fontWeight;
  } else {
    fieldEl.style.backgroundColor = '';
    fieldEl.style.fontWeight = '';
  }
}

2つのコードを比較すると、次のような違いがあります。

このように、kintone Documentation MCPサーバーを使うことで、AIは最新の情報に基づいたコードを生成できました。

本記事では、kintone MCPサーバーとkintone Documentation MCPサーバーを併用して使う2つのユースケースを紹介しました。
ユースケース1では、エラーが出てもAIは自ら公式ドキュメントを参照して解決まで進めることを確認しました。
ユースケース2では、AIが最新の公式ドキュメントを参照することで、新しく追加されたAPIを取り入れたコードを生成できることを確認しました。

2つのMCPサーバーを併用すると、AIにkintone特有のコンテキストを渡せるようになり、kintone APIの仕様や実際のアプリ構成に基づいたコードを出力できます。

今回紹介したユースケース以外でも、新しく追加されたAPIを簡単に試したいときや、既存のカスタマイズをリファクタリングしたいときなどに活用できます。
みなさんもぜひ試してみてください。

本記事は、次の環境で動作を確認しています。

• kintone：2026年5月版
• kintone MCPサーバー：v1.3.15
• kintone Documentation MCPサーバー：v1.9
• Claude for Desktop： v1.8555.2