はじめに

kintoneを使っていて、「重要なレコードを一目で見つけたい」と思ったことはありませんか？
ExcelやGoogleスプレッドシートのように条件書式を設定できれば、レコードの値に応じて行やフィールドの色を自動で変えられるので、画面を見ただけで状況がわかるUIを作れます。

従来、フィールドやレコード一覧のスタイルを動的に変えるには、DOMを直接操作するのが一般的でした。
しかし、DOMの直接操作には次のリスクがあります。

kintoneのUI刷新で予告なく動作しなくなる。
DOMの再描画時に適用したスタイルがリセットされる。
並び替えや絞り込みで意図しない行にスタイルが当たる。

2026年2月に追加された kintone.app.record.setFieldStyle() と、2026年4月に追加された kintone.app.setRecordListStyle() を使えば、こうしたリスクなしにフィールドやレコード一覧のスタイルをレコードの値や状態に応じて動的に変えられます。

本記事では、これら2つのAPIを使った条件書式カスタマイズの実装方法を解説します。

動作イメージ

このカスタマイズを適用すると次の動作を実現できます。

①レコードの詳細・編集画面で、期限が過去の日付のとき期限フィールドが赤くなる。
②一覧画面で、ステータスが「承認待ち」のフィールドが黄色くハイライトされる。
③一覧画面とレコードの詳細・編集画面で、ステータスに応じて同じ色が表示され、画面を切り替えても見た目が一貫する。

kintoneアプリの準備

次のフィールドを持つタスク管理アプリを用意します。

フィールドタイプ	フィールド名	フィールドコード
文字列（1行）	タスク名	task_name
ドロップダウン	ステータス	status
日付	期限	deadline

ステータスフィールドの選択肢は「未着手」「対応中」「承認待ち」「完了」を想定しています。
なお、期限フィールドの初期値は設定しない前提で解説します。

setFieldStyle() でフィールドのスタイルを変える

kintone.app.record.setFieldStyle() は、現在開いているレコードの特定フィールドにスタイルを設定するAPIです。
フィールドコードとスタイル設定オブジェクトを渡すだけで、文字色・背景色・太字・下線・取り消し線を動的に変えられます。

設定できるスタイルプロパティ

スタイルは次の3つの領域に分けて設定します。

`label`：フィールド名ラベルのスタイル（文字色・太字・下線・取り消し線）

プロパティ	設定できる値
`color`	`#ffffff` 形式のカラーコード
`fontWeight`	`normal` / `bold`
`textDecoration`	`none` / `underline` / `line-through`

`content`：表示内容のスタイル（文字色・背景色・太字・下線・取り消し線・枠線色）

プロパティ	設定できる値
`backgroundColor`	`#ffffff` 形式のカラーコード
`color`	`#ffffff` 形式のカラーコード
`fontWeight`	`normal` / `bold`
`textDecoration`	`none` / `underline` / `line-through`
`borderColor`	`#ffffff` 形式のカラーコード

`background`：フィールドを含む領域の背景色

プロパティ	設定できる値
`backgroundColor`	`#ffffff` 形式のカラーコード

各プロパティに 'DEFAULT' を渡すと、そのプロパティのスタイルのみを解除できます。
スタイル設定オブジェクト全体の代わりに 'DEFAULT' を渡すと、フィールドのすべてのスタイルを一括で解除できます。

実装例①：期限切れのフィールドを強調する

次のサンプルコードは、レコードの詳細・編集画面を開いたとき、期限が過去の日付なら期限フィールドを赤く強調する例です。

(() => {
  'use strict';

  const EVENTS = [
    'app.record.edit.show',
    'app.record.detail.show'
  ];

  kintone.events.on(EVENTS, async (event) => {
    const deadline = event.record.deadline.value;
    if (!deadline) return event;

    // 今日の日付を取得
    const today = new Date().toISOString().slice(0, 10);
    const isOverdue = deadline < today;

    if (isOverdue) {
      await kintone.app.record.setFieldStyle('deadline', {
        content: {
          color: '#cc0000',
          fontWeight: 'bold'
        },
        background: {
          backgroundColor: '#ffeeee'
        },
        label: {
          color: '#cc0000',
          fontWeight: 'bold'
        }
      });
    } else {
      await kintone.app.record.setFieldStyle('deadline', 'DEFAULT');
    }

    return event;
  });
})();

実行すると次のようになります。

利用できる画面とモバイル対応

画面	PC	モバイル
レコード追加画面	✅	✅
レコード編集画面	✅	✅
レコード詳細画面	✅（2026年4月〜）	✅（2026年4月〜）
レコード印刷画面	✅（2026年4月〜）	—

モバイル版では kintone.mobile.app.record.setFieldStyle() を使います。

本記事では setFieldStyle() の基本的な使い方のみを紹介しています。
具体的な活用例や、DOM操作からの移行例など、より詳しい解説はcybozu developer networkの記事をご参照ください。

setRecordListStyle() でレコード一覧のスタイルを変える

kintone.app.setRecordListStyle() は、表形式の一覧画面で行・列単位にスタイルを設定するAPIです。
レコードIDとフィールドコードで対象を特定できるため、DOM構造に依存しない安全な実装が実現できます。

設定できるスタイルプロパティ

ヘッダー行（header）とデータ行（body）のそれぞれに対して、コンテンツ（content）と背景（background）の2領域を設定できます。

`content`：表示内容のスタイル（文字色・背景色・太字・下線・取り消し線・枠線色）

プロパティ	設定できる値
`backgroundColor`	`#ffffff` 形式のカラーコード
`color`	`#ffffff` 形式のカラーコード
`fontWeight`	`normal` / `bold`
`textDecoration`	`none` / `underline` / `line-through`
`borderColor`	`#ffffff` 形式のカラーコード

`background`：背景色

プロパティ	設定できる値
`backgroundColor`	`#ffffff` 形式のカラーコード

setFieldStyleと同様に、'DEFAULT' を渡すと個別／一括でスタイルを解除できます。

実装例②：ステータスが「承認待ち」のフィールドを強調する

次のサンプルコードは、一覧画面を開いたとき、ステータスが「承認待ち」のレコードのステータスフィールドを黄色でハイライトする例です。

(() => {
  'use strict';

  kintone.events.on('app.record.index.show', async (event) => {
    const body = event.records
      .filter((record) => record.status.value === '承認待ち')
      .map((record) => ({
        recordId: record.$id.value,
        style: [{
          columnType: 'FIELD',
          column: 'status',
          content: {
            color: '#7d5c00',
            fontWeight: 'bold'
          },
          background: {
            backgroundColor: '#fff8e0'
          }
        }]
      }));

    if (body.length > 0) {
      await kintone.app.setRecordListStyle({ body });
    }

    return event;
  });
})();

実行すると次のようになります。

利用できる画面とモバイル対応

画面	PC	モバイル
レコード一覧画面（表形式）	✅	✅

モバイル版では kintone.mobile.app.setRecordListStyle() を使います。

モバイル版のsetRecordListStyle()では content.borderColor と content.backgroundColor の設定は非対応です。
その他の制限事項については、setRecordListStyle() - APIドキュメントを確認してください。

本記事では setRecordListStyle() の基本的な使い方のみを紹介しています。
DOM操作からの移行例など、より詳しい解説はcybozu developer networkの記事をご参照ください。

アンチパターンから学ぶ条件書式の実装（一覧画面）

2つのAPIを組み合わせる

ここまではフィールド単位、行単位それぞれのスタイル設定を見てきました。
ここからは2つのAPIを組み合わせて、一覧画面とレコード画面で表示が連動する一貫した条件書式を作っていきます。

実装例③：ステータスに応じて一覧行とフィールドの色を連動させる

次のサンプルコードは、ステータスの値に応じて、一覧行の背景色とレコード画面のフィールド色を連動させる例です。
ステータスと色の対応を STATUS_STYLE オブジェクトに一元管理しているため、スタイルの追加・変更が1か所で完結します。
また、一覧画面ではインライン編集後にもスタイルが追従するよう、app.record.index.edit.submit.successイベントでも再適用しています。

(() => {
  'use strict';

  // ステータスごとのスタイル定義（一元管理）
  // 「未着手」はデフォルトの見た目を維持するため、ここでは定義しない
  const STATUS_STYLE = {
    '承認待ち': { background: '#fff8e0', color: '#7d5c00' },
    '対応中':   { background: '#e8f4ff', color: '#1a5ea8' },
    '完了':     { background: '#f0fff4', color: '#1a6635' }
  };

  // -----------------------------------------------------------------
  // 一覧画面：ステータスに応じて行の背景色を変える
  // -----------------------------------------------------------------

  // 1レコード分のスタイル設定オブジェクトを作る共通処理
  const buildListStyleBody = (record) => {
    const style = STATUS_STYLE[record.status.value];

    // 該当しないステータス（未着手など）はスタイルを解除
    if (!style) {
      return { recordId: record.$id.value, style: 'DEFAULT' };
    }

    return {
      recordId: record.$id.value,
      style: [{
        columnType: 'FIELD',
        column: 'status',
        content: {
          color: style.color,
          fontWeight: 'bold'
        },
        background: {
          backgroundColor: style.background
        }
      }]
    };
  };

  // 一覧画面を開いたとき：表示中の全レコードにスタイルを適用
  kintone.events.on('app.record.index.show', async (event) => {
    const body = event.records.map(buildListStyleBody);
    await kintone.app.setRecordListStyle({ body });
    return event;
  });

  // インライン編集の保存後：変更されたレコードのスタイルを再適用
  kintone.events.on('app.record.index.edit.submit.success', async (event) => {
    const body = [buildListStyleBody(event.record)];
    await kintone.app.setRecordListStyle({ body });
    return event;
  });

  // -----------------------------------------------------------------
  // レコード画面：ステータスに応じてフィールドの色を変える
  // -----------------------------------------------------------------

  // ステータス値からスタイルを適用する共通処理
  const applyStatusStyle = (statusValue) => {
    const style = STATUS_STYLE[statusValue];

    // 該当しないステータス（未着手など）はスタイルを解除
    if (!style) {
      return kintone.app.record.setFieldStyle('status', 'DEFAULT');
    }

    return kintone.app.record.setFieldStyle('status', {
      content: {
        color: style.color,
        fontWeight: 'bold'
      },
      background: {
        backgroundColor: style.background
      }
    });
  };

  // 画面を開いたタイミングのイベント
  const SHOW_EVENTS = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show'
  ];

  // ステータスを変更したタイミングのイベント
  const CHANGE_EVENTS = [
    'app.record.create.change.status',
    'app.record.edit.change.status'
  ];

  kintone.events.on(SHOW_EVENTS, async (event) => {
    await applyStatusStyle(event.record.status.value);
    return event;
  });

  // changeイベントはPromiseを待たないため、awaitせず実行
  kintone.events.on(CHANGE_EVENTS, (event) => {
    applyStatusStyle(event.record.status.value);
    return event;
  });

})();

実行すると次のようになります。
一覧画面ではステータスに応じてフィールドの色が変わり、レコード画面に遷移してもステータスフィールドが同じ色で表示されます。
インライン編集やレコード画面でステータスを変更すると、その変更が即座にスタイルに反映されることも確認できます。

API早見表

用途	API	対象画面
フィールドのスタイル設定	PC：`kintone.app.record.setFieldStyle()` モバイル：`kintone.mobile.app.record.setFieldStyle()`	レコード追加・編集・詳細（PCのみ印刷も対応）
フィールドのスタイル取得	PC：`kintone.app.record.getFieldStyle()` モバイル：`kintone.mobile.app.record.getFieldStyle()`	レコード追加・編集・詳細（PCのみ印刷も対応）
レコード一覧のスタイル設定	PC：`kintone.app.setRecordListStyle()` モバイル：`kintone.mobile.app.setRecordListStyle()`	レコード一覧（表形式）
レコード一覧のスタイル取得	PC：`kintone.app.getRecordListStyle()` モバイル：`kintone.mobile.app.getRecordListStyle()`	レコード一覧（表形式）

おわりに

setFieldStyle() と setRecordListStyle() を使うことで、DOM操作に頼らず保守性の高い条件書式を実装できます。

kintoneのUI刷新の影響を受けないことは、長く使われるアプリのカスタマイズにとって大きな利点です。
「ある日突然カスタマイズが動かなくなった」というトラブルを防ぐためにも、DOMベースの実装からAPIを活用した実装への切り替えを検討してみてください。

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

参考リンク

cybozu developer network - APIドキュメント

cybozu developer network - Tips記事