kintoneカスタマイズ入門｜JavaScript連携の基本

kintoneカスタマイズとは

kintoneの標準機能で足りない場合、JavaScriptを使ってカスタマイズできます。スタンダードコース以上で利用可能で、アプリの見た目や動作を自由に拡張できます。

カスタマイズでできること

フィールドの値を自動計算する
入力時のバリデーション（検証）を追加する
条件に応じてフィールドの表示/非表示を切り替える
外部APIとのリアルタイム連携
独自のボタンやUIの追加
帳票の出力

基本的な仕組み

kintoneのJavaScriptカスタマイズは、イベント駆動型です。「レコードを保存した時」「一覧を表示した時」などのイベントに対して、処理を登録します。

主要なイベント

イベント	説明
app.record.create.show	レコード追加画面の表示時
app.record.edit.show	レコード編集画面の表示時
app.record.create.submit	レコード追加の保存時
app.record.edit.submit	レコード編集の保存時
app.record.index.show	一覧画面の表示時
app.record.detail.show	詳細画面の表示時

サンプル：保存時のバリデーション

kintone.events.on('app.record.create.submit', function(event) {
  var record = event.record;

  // 金額が0以下の場合はエラー
  if (Number(record['金額'].value) <= 0) {
    record['金額'].error = '金額は1以上で入力してください';
  }

  return event;
});

サンプル：フィールドの自動計算

kintone.events.on(['app.record.create.change.数量', 'app.record.create.change.単価'], function(event) {
  var record = event.record;
  var quantity = Number(record['数量'].value) || 0;
  var unitPrice = Number(record['単価'].value) || 0;

  record['合計金額'].value = quantity * unitPrice;

  return event;
});

カスタマイズファイルの設置方法

JavaScriptファイルを作成
kintoneのアプリ設定画面を開く
「JavaScript / CSSでカスタマイズ」を選択
ファイルをアップロード
動作を確認

注意すべきポイント

1. kintone UIのDOM操作は避ける

kintone標準のUIのHTML要素を直接操作すると、kintoneのアップデートで動かなくなるリスクがあります。公式のイベントAPIを使いましょう。

2. 非同期処理に注意

API呼び出しなどの非同期処理では、Promiseを正しく扱う必要があります。kintoneのイベントハンドラはPromiseの返却に対応しています。

3. テストを十分に行う

本番適用前に、テスト環境で十分にテストしましょう。特にデータの登録・更新に関わるカスタマイズは要注意です。

4. バージョン管理

カスタマイズのJavaScriptファイルはGitなどでバージョン管理しましょう。変更履歴が追えないと、トラブル時の原因特定が困難になります。

プラグインという選択肢

JavaScriptを書かなくても、プラグインで実現できるカスタマイズも多くあります。

帳票出力プラグイン
カレンダー表示プラグイン
条件書式プラグイン
一括更新プラグイン

まずはプラグインで対応できないか確認し、それでも足りない場合にJavaScript開発を検討するのがコスト効率的です。

AI活用によるカスタマイズ

Claude CodeなどのAIコーディングツールを使えば、kintoneのカスタマイズコードを効率的に生成できます。要件を自然言語で伝えるだけで、適切なイベント処理やバリデーションのコードが完成します。

まとめ

kintoneのJavaScriptカスタマイズは、標準機能では実現できない要件に対応する強力な手段です。ただし、開発・保守のコストも考慮し、まずはプラグインや標準機能の活用を検討しましょう。COTSUBUでは、kintoneのカスタマイズ開発を承っています。