kintone × JavaScriptカスタマイズ で使える小技10選その２（コピペOKサンプルコード）

環境

• kintone
• javascript

対象

• javaScriptのカスタマイズも試したい人

前置き

kintoneのカスタマイズは基本的にプラグインが効率的ですが、対応できないケースもあります。
少量の調整には customine などのサービスは割高になることも。
そんなとき、JavaScriptの知識があれば柔軟に対応できる場面も多いです。

JavaScriptカスタマイズで便利なプラグイン

📌こちらのプラグイン入れておくと便利です。

🔧 1. 条件に応じてフィールドを動的に表示/非表示

kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.create.change.契約種別', 'app.record.edit.change.契約種別'], function(event) {
  const contractType = event.record.契約種別.value;
  
  // 「新規」の場合のみ「紹介者」フィールドを表示
  if (contractType === '新規') {
    kintone.app.record.setFieldShown('紹介者', true);
    kintone.app.record.setFieldShown('紹介コード', true);
  } else {
    kintone.app.record.setFieldShown('紹介者', false);
    kintone.app.record.setFieldShown('紹介コード', false);
  }
  
  return event;
});

---

🔧 2. 重複レコードチェック（保存前にREST APIで検索）

kintone.events.on(['app.record.create.submit'], function(event) {
  const companyName = event.record.会社名.value;
  const email = event.record.メールアドレス.value;
  
  // 会社名とメールアドレスの組み合わせで重複チェック
  const query = `会社名 = "${companyName}" and メールアドレス = "${email}"`;
  
  return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
    app: kintone.app.getId(),
    query: query
  }).then(function(resp) {
    if (resp.records.length > 0) {
      alert('同じ会社名とメールアドレスの組み合わせが既に登録されています。');
      return false;
    }
    return event;
  }).catch(function(error) {
    console.error('重複チェックエラー:', error);
    return event;
  });
});

---

🔧 3. 日付の前後関係を保存時にチェック（開始日 < 終了日）

kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) {
  const startDate = event.record.開始日.value;
  const endDate = event.record.終了日.value;
  
  if (startDate && endDate) {
    if (new Date(startDate) > new Date(endDate)) {
      alert('開始日は終了日より前の日付を入力してください。');
      return false;
    }
  }
  
  return event;
});

---

🔧 4. スペースフィールドに「クリップボードにコピー」ボタンを設置

kintone.events.on('app.record.detail.show', function(event) {
  const spaceEl = kintone.app.record.getSpaceElement('COPY_BTN_SPACE'); // スペースID
  if (!spaceEl) return;

  const btn = document.createElement('button');
  btn.innerText = '📋 顧客IDをコピー';
  btn.onclick = function() {
    const textToCopy = kintone.app.record.get().record['顧客ID'].value;
    navigator.clipboard.writeText(textToCopy).then(() => {
      alert('コピーしました！');
    });
  };
  
  spaceEl.appendChild(btn);
});

---

🔧 5. 入力値を自動で「全角英数字→半角英数字」に変換する

kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
  const targetField = '電話番号'; // 対象フィールドコード
  
  const events = [
    `app.record.create.change.${targetField}`, 
    `app.record.edit.change.${targetField}`
  ];

  kintone.events.on(events, function(e) {
    let val = e.record[targetField].value;
    if (val) {
      // 全角英数字を半角に変換
      e.record[targetField].value = val.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
      });
    }
    return e;
  });
});

---

🔧 6. サブテーブル内での「重複」を禁止する

kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) {
  const rows = event.record['明細テーブル'].value;
  const codes = rows.map(row => row.value['商品コード'].value);
  
  // Setを使って重複を除去し、元の数と比較
  const uniqueCodes = new Set(codes);
  
  if (codes.length !== uniqueCodes.size) {
    event.error = '明細内で商品コードが重複しています。';
  }
  
  return event;
});

---

🔧 7. アクションボタン（プロセス管理）を押した時に確認ダイアログを出す

kintone.events.on('app.record.detail.process.proceed', function(event) {
  // アクション名が「承認する」の場合のみ確認
  if (event.action.value === '承認する') {
    if (!confirm('本当に承認してもよろしいですか？\n承認後は修正できなくなります。')) {
      return false; // キャンセル時は処理を中断
    }
  }
  return event;
});

---

🔧 8. サブテーブルの行数をカウントする（保存時）

kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) {
  const record = event.record;
  
  // サブテーブル「注文明細」の行数を「合計点数」フィールドにセット
  const count = record['注文明細'].value.length;
  record['合計点数'].value = count;
  
  return event;
});

---

🔧 9. 保存時に別フィールドへ自動コピー

kintone.events.on([
  'app.record.create.show',
  'app.record.edit.show',
  'app.record.create.submit',
  'app.record.edit.submit'
], (event) => {

  event.record.名前コピー.value = event.record.名前.value;
  event.record.名前コピー.disabled = true;

  return event;
});

🔧 10. ボタンを追加してフィールドをクリアする

  kintone.events.on('app.record.edit.show', () => {
  if (document.getElementById('clearBtn')) return;
  
  
  const btn = document.createElement('button');
  btn.id = 'clearBtn';
  btn.textContent = '担当者クリア';
  
  
  btn.onclick = () => {
  const rec = kintone.app.record.get();
  rec.record.担当者.value = [];
  kintone.app.record.set(rec);
  };
  
  //スペースIDにclear_spaceを設定
  kintone.app.record.getSpaceElement('clear_space').appendChild(btn);
  });

---

✅ まとめ

JavaScriptを使うことで、kintoneはもっと便利になります。
APIが公開されているのでより自分に必要なカスタマイズを見つけてみて下さい。

参考情報