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

環境

• kintone
• javascript

対象

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

前置き

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

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

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

🔧 1. フィールドにプレースホルダー（入力例）を表示する

    kintone.events.on(['app.record.create.show','app.record.edit.show'], function(event) {
      const fields = Object.values(cybozu.data.page.FORM_DATA.schema.table.fieldList)
      const field = fields.find(_ => _.var === '電話番号')
      const input = document.querySelector(`.value-${field.id} input`)
      if (input) {
        input.setAttribute('placeholder', '例: 090-1234-5678');
      }
    });

---

🔧 2. 保存前に空欄チェックしてアラート

    kintone.events.on('app.record.create.submit', function(event) {
      if (!event.record.担当者.value) {
        alert('担当者は必須項目です。');
        return false;
      }
    });

---

🔧 3. レコード保存前に文字数チェックを行う

    kintone.events.on('app.record.create.submit', function(event) {
      const text = event.record.備考.value || '';
      if (text.length > 20) {
        alert('備考は20文字以内で入力してください。');
        return false;
      }
    });

---

🔧 4. サブテーブル全行の背景色を変更

    kintone.events.on('app.record.detail.show', function(event) {
      const rows = document.querySelectorAll('.subtable-row-gaia');
      rows.forEach(row => {
        row.style.backgroundColor = '#f0f8ff';
      });
    });

---

🔧 5. 詳細画面で一部のフィールドを非表示に

    kintone.events.on('app.record.detail.show', function(event) {
      kintone.app.record.setFieldShown('顧客コード', false);
      return event;
    });

---

🔧 6. ステータスによって詳細画面のスペースの色を変える

  kintone.events.on('app.record.detail.show', function(event) {
    if (event.record.ステータス.value !== '緊急') return event;
    const spaceEl = kintone.app.record.getSpaceElement('HIGHLIGHT');
    if (spaceEl) {
      spaceEl.style.backgroundColor = '#ffeaea';  // 薄い赤
    }
    return event;
  });

---

🔧 7. ユーザーによって初期値を変える

    kintone.events.on('app.record.create.show', function(event) {
      const user = kintone.getLoginUser();

      // ユーザーによって優先度を変える
      if (user.code === 'tanaka') {
        event.record.優先度.value = '高';
      } else if (user.code === 'suzuki') {
        event.record.優先度.value = '低';
      } else {
        event.record.優先度.value = '中';
      }
    
      return event;
    });

---

🔧 8. 日付を「年-月」だけに表示（詳細画面）

    kintone.events.on('app.record.detail.show', function(event) {
      const el = kintone.app.record.getFieldElement('契約日');
      const dateStr = event.record.契約日.value;
      if (dateStr) {
        const y = new Date(dateStr).getFullYear();
        const m = new Date(dateStr).getMonth() + 1;
        el.textContent = `${y}年${m}月`;
      }
    });

---

🔧 9. 一覧画面で条件付きで行の背景を色分け

    kintone.events.on('app.record.index.show', function(event) {
      event.records.forEach((record, i) => {
        if (record.状態.value === '対応中') {
          const row = document.querySelectorAll('.recordlist-row-gaia')[i];
          row.style.backgroundColor = '#fffacc';
        }
      });
    });

---

🔧 10. モバイル端末でだけ要素を表示

    kintone.events.on('mobile.app.record.detail.show', function(event) {
      const el = kintone.mobile.app.getHeaderSpaceElement();
      const msg = document.createElement('div');
      msg.textContent = '📱 モバイル表示中';
      msg.style.padding = '4px';
      msg.style.backgroundColor = '#007bff';
      msg.style.color = '#fff';
      el.appendChild(msg);
    });

---

✅ まとめ

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

参考情報