setFieldStyleを使ってフィールドの見た目を動的に変更する

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

更新日：2026年04月08日

著者名：村濱一樹

(kintoneエバンジェリスト)

はじめに

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

フィールドのスタイルの設定 APIを使うと、レコードの追加／編集画面でフィールドの見た目を動的に変更できます。
本記事では、案件管理アプリを例に、単価や見込み時期に応じてフィールドの色を変え、ユーザーに注意を促す方法を紹介します。

kintoneの標準機能では、入力値が不正な場合に保存をブロックできます。
一方で、「保存はできるが、入力内容について注意してほしい」といったケースもあります。
そのような場面では、フィールドの色を変えることで、視覚的に警告を伝える方法が有効です。

従来、編集画面でフィールドの見た目を変更するにはDOM操作が必要でした。
しかし、フィールド要素を取得する APIはレコード追加／編集画面では使用できません。
そのため、kintoneのクラス名を直接指定する方法が取られることもありますが、kintoneのアップデートによって動かなくなるリスクがあります。
また、スペースフィールドに独自のUIを追加する方法もありますが、フィールド自体の見た目を変えることはできません。

2026年2月に追加されたkintone.app.record.setFieldStyle()を使えば、スペースフィールドやDOM操作に頼ることなく、公式APIだけでフィールドの見た目を変更できます。

完成イメージ

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

金額や見込み時期に応じて、フィールドの見た目を変更して注意を促します。
スタイルの変更のみで、保存はブロックしません。

単価が5万円を超えるとオレンジ色で注意を表示します。
単価が10万円を超えると赤色で強い警告を表示します。
見込み時期が過去の日付の場合、赤色と取り消し線で見込み時期の超過を伝えます。

下準備

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

kintoneアプリの準備をします。
今回は、 kintoneアプリストアにある「案件管理」を使います。

次のフィールドを使用します。

フィールド名	フィールドコード	フィールドタイプ
単価	単価	数値
見込み時期	日付_0	日付

サンプルコード

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

ファイル名を「sample.js」、文字コードを「UTF-8」で保存し、案件管理アプリに適用してください。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

  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
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117


/*
 * setFieldStyleを使って案件の注意喚起を行うサンプルプログラム
 * Copyright (c) 2026 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  // 単価の閾値
  const PRICE_CAUTION = 50000;
  const PRICE_WARNING = 100000;

  // 注意スタイル（オレンジ）
  const CAUTION_STYLE = {
    content: {
      backgroundColor: '#FEF3C7',
      borderColor: '#F59E0B'
    },
    label: {
      color: '#D97706',
      fontWeight: 'bold'
    }
  };

  // 警告スタイル（赤）
  const WARNING_STYLE = {
    content: {
      backgroundColor: '#FEE2E2',
      borderColor: '#EF4444'
    },
    label: {
      color: '#DC2626',
      fontWeight: 'bold'
    }
  };

  // 日付警告スタイル（赤＋取り消し線）
  const DATE_WARNING_STYLE = {
    content: {
      backgroundColor: '#FEE2E2',
      borderColor: '#EF4444',
      textDecoration: 'line-through'
    },
    label: {
      color: '#DC2626',
      fontWeight: 'bold'
    }
  };

  // 単価フィールドのスタイルを更新する
  const updatePriceStyle = async (record) => {
    const price = Number(record.単価.value) || 0;

    if (price > PRICE_WARNING) {
      await kintone.app.record.setFieldStyle('単価', WARNING_STYLE);
    } else if (price > PRICE_CAUTION) {
      await kintone.app.record.setFieldStyle('単価', CAUTION_STYLE);
    } else {
      await kintone.app.record.setFieldStyle('単価', 'DEFAULT');
    }
  };

  // 見込み時期フィールドのスタイルを更新する
  const updateDateStyle = async (record) => {
    const dateValue = record.日付_0.value;

    if (!dateValue) {
      await kintone.app.record.setFieldStyle('日付_0', 'DEFAULT');
      return;
    }

    const targetDate = new Date(dateValue);
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    if (targetDate < today) {
      await kintone.app.record.setFieldStyle('日付_0', DATE_WARNING_STYLE);
    } else {
      await kintone.app.record.setFieldStyle('日付_0', 'DEFAULT');
    }
  };

  // 全フィールドのスタイルを更新する
  const updateAllStyles = async (record) => {
    await updatePriceStyle(record);
    await updateDateStyle(record);
  };

  // 画面表示イベント
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show'
  ], async (event) => {
    await updateAllStyles(event.record);
    return event;
  });

  // 単価フィールドの変更イベント
  kintone.events.on([
    'app.record.create.change.単価',
    'app.record.edit.change.単価'
  ], async (event) => {
    await updatePriceStyle(event.record);
    return event;
  });

  // 見込み時期フィールドの変更イベント
  kintone.events.on([
    'app.record.create.change.日付_0',
    'app.record.edit.change.日付_0'
  ], async (event) => {
    await updateDateStyle(event.record);
    return event;
  });
})();

サンプルコードの解説

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

スタイルの定義

kintone.app.record.setFieldStyle()に渡すスタイルオブジェクトは、content（入力欄）、label（ラベル）、background（背景）の3つの領域で構成されます。
本サンプルでは、contentとlabelの2つの領域を使い、注意と警告の2段階でスタイルを定義しています。

CAUTION_STYLE：オレンジ色の注意表示（単価が5万円超）
WARNING_STYLE：赤色の警告表示（単価が10万円超）
DATE_WARNING_STYLE：赤色＋取り消し線（見込み時期が過去）

textDecorationプロパティに'line-through'を指定すると、フィールドの値に取り消し線を表示できます。

スタイルの更新処理

updatePriceStyle()とupdateDateStyle()は、フィールドの値に応じてスタイルを切り替えます。
警告の条件に該当しない場合は'DEFAULT'を指定して、kintone標準のスタイルに戻します。

61

await kintone.app.record.setFieldStyle('単価', 'DEFAULT');

複数のカスタマイズと併用する場合

同じアプリに複数のJavaScriptカスタマイズを適用している場合、kintone.app.record.setFieldStyle()で他のカスタマイズが設定したスタイルを上書きしてしまう可能性があります。

フィールドのスタイルの取得 APIで現在のスタイルを取得し、変更したいプロパティだけを上書きする形でマージすると安全です。

61
62
63
64
65


const currentStyle = await kintone.app.record.getFieldStyle('単価');
await kintone.app.record.setFieldStyle('単価', {
  content: {...currentStyle.content, backgroundColor: '#FEE2E2'},
  label: {...currentStyle.label, fontWeight: 'bold'}
});

...currentStyle.contentはスプレッド構文で、現在のcontentのスタイルをすべて展開したうえで、backgroundColorだけを新しい値で上書きしています。
こうすることで、他のカスタマイズが設定したプロパティを意図せず消してしまうことを防げます。

イベントの登録

画面表示時（show）と値変更時（change）にスタイルを更新します。
kintone.app.record.setFieldStyle()は非同期APIのため、イベントハンドラーをasync関数にしてawaitで呼び出します。

警告

このサンプルではrecord[fieldCode].errorを使用していません。
そのため、スタイルが変わっても保存はブロックされません。
保存をブロックしたい場合は、レコード追加画面で保存するときのイベントやレコード編集画面で保存するときのイベントを利用し、record[fieldCode].errorにメッセージを設定してください。

おわりに

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

本記事では、kintone.app.record.setFieldStyle()を使ってフィールドの見た目を動的に変更し、レコードの保存をブロックせずにユーザーへ注意を促す方法を紹介しました。

このAPIを活用することで、「レコードの保存はできるが注意してほしい」といった状況に対し、視覚的なフィードバックをシンプルに実装できます。

本記事では単価や日付をもとにスタイルを切り替えましたが、条件分岐と組み合わせることでさまざまな場面に応用できます。

ステータスに応じてフィールドの色を変え、対応状況を視覚的に伝える。
チェックボックスの選択内容に応じて、関連フィールドを強調する。
ログインユーザーの権限に応じて、確認してほしいフィールドを目立たせる。
数値フィールド同士を比較し、予算超過などを警告する。

ぜひこのAPIを活用して、ユーザーが迷わない入力フォームを実現してみてください。

このTipsは、2026年3月版kintoneで動作を確認しています。

kintone API

入力制御／補助