AIを使ったkintone開発の全体像と基本の進め方

AI / AI駆動開発

AIを使ったkintone開発の全体像と基本の進め方

固定リンクがコピーされました

(kintoneエバンジェリスト)

はじめに

固定リンクがコピーされました

生成AI（以下、AI）を使うと、kintoneのJavaScriptカスタマイズのコード案を短時間で作れるようになりました。
一方で、「どの作業をAIに頼めばよいのか」「生成されたコードをそのまま使ってよいのか」がわからず、使い始めるきっかけをつかめない人もいるのではないでしょうか。

本記事は、AIを活用して開発を進める「AI駆動開発」の基本を学びたい方に向けた入門記事です。
AIを使ったkintone開発を題材に、人とAIの役割分担や、開発を安全に進めるための考え方を整理します。
さらに、レコード一覧画面にボタンを追加するカスタマイズを例に、AIへの依頼から確認、修正までの基本の流れを紹介します。

本記事で扱うのは、開発の全体像と進め方です。
特定のAIツールの操作方法や、詳しい開発手法は扱いません。

AIを使ったkintone開発とは

固定リンクがコピーされました

AIを使ったkintone開発とは、人が目的や条件を決め、AIを調査、実装、エラー分析などに活用しながら進める開発です。
利用するAIツールによっては、コード案を作るだけでなく、kintoneの情報を取得したり、レコードを操作したりすることもあります。
AIに何を任せるかを決めるときは、AIが参照できる情報と実行できる操作を把握しておくことが重要です。
AIの出力や操作結果を確認したうえで、人が最終的に判断します。

人とAIの役割分担と、開発の流れは次のとおりです。

人は、目的や条件、AIに与える権限を決め、AIの出力や操作結果を確認して採用するかどうかを判断します。
AIは、与えられた情報と権限の範囲で、調査やコード生成、エラー分析、ツールを使った作業などを支援します。

kintone開発でAIを活用できる工程

固定リンクがコピーされました

kintone開発の多くの工程で、AIを活用できます。
AIに依頼できることと人が判断することを工程ごとに整理すると、次のようになります。

工程	AIに依頼すること	人が判断すること
やりたいことを整理する	要望を箇条書きにする。考慮漏れを指摘する	何を作るか、どこまで作るか
APIや実装方法を調べる	使えそうなAPIや実装方法を挙げる	公式ドキュメントと照らして正しいか
コードの案を出す	コード案を作る	採用するか、どこを直すか
エラーの原因を調べる	エラーメッセージやコードから原因の候補を挙げる	どの候補が正しいか
修正案を考える	修正したコード案を出す	修正によって別の動作が壊れないか
テストの観点を洗い出す	確認すべき操作や条件を挙げる	抜けている観点はないか、実際に動かして確認する

AIが提示した調査結果やコードは「案」として受け取り、人が確認して採用するかどうかを判断します。
AIに操作を任せる場合は、操作内容と実行結果を確認します。

補足

AIに相談して調べるだけでなく、kintone Documentation MCPサーバーを使って、AIにcybozu developer networkの公式ドキュメントを参照させることもできます。
AIが公式ドキュメントを参照しながら回答するため、存在しないAPIや古い書き方を提案されるリスクを減らせます。
詳しくは目的に合わせて次の記事へで紹介する記事を参照してください。

AIを使った開発の流れを試してみる

固定リンクがコピーされました

実際に、AIを使ってkintoneのカスタマイズを作ってみます。
ここでは、MCPサーバーを使わずに、AIとのやりとりだけで進める基本の流れを紹介します。

流れは次のとおりです。

やりたいことを日本語でAIに伝える。
AIがコードを生成する。
人がコードを確認する。
kintoneに適用して動作確認する。
必要に応じて、AIに修正を依頼する。

使用したAIツールとモデル

固定リンクがコピーされました

本記事では、次のAIツールとモデルを使いました。

AIツール：Claude（Webブラウザー版）
モデル：Claude Opus 5.5

AIツールやモデルが異なると、生成されるコードも変わります。
同じプロンプトを入力しても、本記事と同じコードになるとは限りません。

1. やりたいことを日本語でAIに伝える

固定リンクがコピーされました

まず、作りたいものを日本語でAIに伝えます。
今回は、レコード一覧画面にボタンを追加して、クリックするとメッセージを表示するカスタマイズを作ります。

AIには、次のプロンプトを入力しました。
ここでは基本の流れを確認するため、簡単なプロンプトから始めます。

1
2


kintoneのレコード一覧画面にボタンを追加して、クリックするとメッセージを表示するJavaScriptカスタマイズを作りたいです。
コードを書いてください。

プロンプトは、専門用語を使わずに日本語で書いてかまいません。
目的や条件をより詳しく伝えるプロンプトの書き方は、次の記事で紹介しています。

AIでkintone開発を始める前に知っておきたいプロンプトとMCP

注意

AIには、APIトークンやパスワードなどの認証情報や、顧客の個人情報、業務上の機密情報などを渡さないでください。
利用するAIサービスによっては、入力内容がサービス提供事業者のログに残ったり、モデルの学習に使われたりする可能性があります。

2. AIがコードを生成する

固定リンクがコピーされました

AIは、次のコードを生成しました。

 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


/*
 * kintone JavaScriptカスタマイズ
 * レコード一覧画面のヘッダーにボタンを追加し、クリックでメッセージを表示する
 */
(() => {
  'use strict';

  const BUTTON_ID = 'custom-message-button';
  const MESSAGE = 'ボタンがクリックされました！';

  kintone.events.on('app.record.index.show', (event) => {
    // 一覧の切り替え・ページ送りでもイベントが再発火するため、重複追加を防ぐ
    if (document.getElementById(BUTTON_ID)) {
      return event;
    }

    // 一覧画面のヘッダーメニュー右側のスペース
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();
    if (!headerSpace) {
      return event;
    }

    const button = document.createElement('button');
    button.id = BUTTON_ID;
    button.type = 'button';
    button.textContent = 'メッセージ表示';
    button.style.marginLeft = '8px';

    button.addEventListener('click', () => {
      alert(MESSAGE);
    });

    headerSpace.appendChild(button);
    return event;
  });
})();

AIやプロンプトによっては、コードと合わせて、使用したAPIや適用方法の説明も返します。
今回は、コードの適用方法に加えて、「一覧の切り替えやページ送りのたびにイベントが発生するため、ボタンの重複追加を防いでいる」という説明がありました。

説明も、コードと同じく人が確認する対象です。

3. 人がコードを確認する

固定リンクがコピーされました

生成されたコードは、kintoneへ適用する前に人が確認します。
AIのコードは一見正しく見えても、依頼と違う動作をしたり、存在しないAPIを使っていたりすることがあるためです。

次の観点で確認します。

確認する観点	今回のコードでの確認結果
どの画面、どのイベントで動くか	レコード一覧画面の表示イベント（`app.record.index.show`）で動く
使っているAPIが実在するか	`kintone.events.on`と`kintone.app.getHeaderMenuSpaceElement`は、どちらも公式ドキュメントに記載がある
説明と実際のコードが合っているか	ボタンの重複を防ぐ処理が、説明どおりにコードに含まれている
レコードの追加や削除など、狙っていない動作が入っていないか	ボタンの追加とメッセージの表示だけで、レコードは操作していない
認証情報などが埋め込まれていないか	APIトークンやパスワードは含まれていない
どのようなコードが生成されたか、自分で説明できるか	各行の役割を説明できる

ここで挙げたのは、今回のような小さなカスタマイズで最低限確認したい観点です。
外部サービスとの連携やレコードを更新する処理など、より複雑なコードを確認する場合は、次の記事のレビュー観点も参照してください。

生成AIを利用したkintoneカスタマイズの注意点とレビュー観点

APIが実在するかどうかは、cybozu developer networkの公式ドキュメントで確認します。
今回のコードで使っているAPIは、次のページで確認できます。

最後の「自分で説明できるか」は特に重要です。
説明できないコードは、不具合が起きたときに原因を調べられず、運用で困ることになります。
わからない箇所は、生成AIに説明を求め、公式ドキュメントと照らしながら理解しましょう。

4. kintoneに適用して動作確認する

固定リンクがコピーされました

確認が済んだら、コードをJavaScriptファイルとして保存し、kintoneアプリに適用します。
適用方法は、次のページを参照してください。

JavaScriptやCSSでアプリをカスタマイズする（kintoneヘルプ）

適用するアプリは、業務で使っているアプリではなく、テスト用のアプリにします。
アプリを開き、次の点を確認します。

レコード一覧画面にボタンが表示される。
ボタンをクリックすると、メッセージが表示される。
一覧を切り替えたり、ページを送ったりしても、ボタンが重複して表示されない。

今回作成したテスト用アプリでは、レコード一覧画面のメニューの右側に「メッセージ表示」ボタンが表示されました。

ボタンをクリックすると、ブラウザー標準のダイアログ（alert）でメッセージが表示されました。

5. 必要に応じて、AIに修正を依頼する

固定リンクがコピーされました

動作を確認して、変えたいところが見つかったら、AIに修正を依頼します。
今回は、同じ会話で2回の修正を依頼しました。

まず、ボタンの表示名とメッセージの内容を変えるため、次のように依頼しました。

1

ボタンの表示名を「集計を開始」に、クリック時のメッセージを「集計を開始します」に変更してください。

AIは、ボタンの表示名とメッセージの2ヵ所を書き換えたコードを返しました。
合わせて、「集計の処理を入れる場合は、対象のフィールドコードと集計方法を教えてもらえれば追加する」という提案もありました。
AIは、依頼していない機能の追加を提案することもあります。
提案を採用するかどうかは、最初に決めた目的と照らして人が判断します。

次に、メッセージをブラウザーのダイアログではなく、kintoneの画面に表示するため、次のように依頼しました。

1

クリック時のメッセージは、alertではなく、kintoneの画面上部に表示されるメッセージで出してください。

AIは、Web検索でcybozu developer networkのドキュメントを確認したうえで、alertをkintone.showNotificationに置き換えました。
2回の修正を経たコードは、次のとおりです。

 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


/*
 * kintone JavaScriptカスタマイズ
 * レコード一覧画面のヘッダーにボタンを追加し、クリックでメッセージを表示する
 */
(() => {
  'use strict';

  const BUTTON_ID = 'custom-message-button';
  const MESSAGE = '集計を開始します';

  kintone.events.on('app.record.index.show', (event) => {
    // 一覧の切り替え・ページ送りでもイベントが再発火するため、重複追加を防ぐ
    if (document.getElementById(BUTTON_ID)) {
      return event;
    }

    // 一覧画面のヘッダーメニュー右側のスペース
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();
    if (!headerSpace) {
      return event;
    }

    const button = document.createElement('button');
    button.id = BUTTON_ID;
    button.type = 'button';
    button.textContent = '集計を開始';
    button.style.marginLeft = '8px';

    button.addEventListener('click', () => {
      // 画面上部にメッセージを表示（INFO: 青 / SUCCESS: 緑 / ERROR: 赤）
      kintone.showNotification('INFO', MESSAGE);
    });

    headerSpace.appendChild(button);
    return event;
  });
})();

AIからは、「表示されたメッセージは自動では消えない」「同時に表示できるメッセージは1つだけ」という注意点の説明もありました。
このような説明も、公式ドキュメントで確認します。

画面上部にメッセージを表示する

修正されたコードも、手順3と同じ観点で確認してから適用します。
AIは、依頼した箇所以外を書き換えることもあるためです。

修正後のコードを適用すると、ボタンの表示名が「集計を開始」に変わりました。
クリックすると、画面上部にメッセージが表示されました。

AIとの開発は「依頼、確認、試す、修正」のくり返し

固定リンクがコピーされました

ここまでの流れをまとめると、AIを使った開発は次のサイクルのくり返しです。

AIに依頼する。
AIからコード案を受け取る。
人がコード案を確認する。
kintoneで試す。
修正が必要なら、再びAIに依頼する。

AIが生成したコードを業務で使い始めるには、人によるレビューとテストが欠かせません。
生成されたコードを採用するかどうかは、内容の確認と動作確認を経て、人が判断します。

目的に合わせて次の記事へ

固定リンクがコピーされました

本記事の内容を踏まえて、目的に合わせて次の記事に進んでください。

AIに伝える内容や、AIに情報を渡すしくみを知りたい場合
- AIでkintone開発を始める前に知っておきたいプロンプトとMCP
AIが生成したコードの安全性を確認したい場合
- 生成AIを利用したkintoneカスタマイズの注意点とレビュー観点
AIに最新の公式ドキュメントを参照させたい場合
- kintone Documentation MCPサーバー
AIからkintoneのアプリ情報を取得したり、レコードを操作したりしたい場合
- kintone MCPサーバー

おわりに

固定リンクがコピーされました

本記事では、AIを使ったkintone開発の考え方と、AIを活用できる工程、基本の開発の流れを紹介しました。

AIは、調査やコード案の作成、エラー分析など、kintone開発の多くの工程で役立ちます。
一方で、何を作るかを決め、AIの回答を確認し、採用するかどうかを判断するのは人です。
「依頼、確認、試す、修正」のサイクルを回しながら、AIを開発に取り入れてみてください。

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

kintone：2026年10月版
生成AIツール：Claude（Webブラウザー版）
AIモデル：Claude Opus 5.5

kintone API

AI / AI駆動開発

AIを使ったkintone開発の全体像と基本の進め方

目次

はじめに

AIを使ったkintone開発とは

kintone開発でAIを活用できる工程

補足

AIを使った開発の流れを試してみる

使用したAIツールとモデル

1. やりたいことを日本語でAIに伝える

注意

2. AIがコードを生成する

3. 人がコードを確認する

4. kintoneに適用して動作確認する

5. 必要に応じて、AIに修正を依頼する

AIとの開発は「依頼、確認、試す、修正」のくり返し

目的に合わせて次の記事へ

おわりに

公式コミュニティ

この記事に関連する過去の質問