レコード一覧とレコード詳細画面で条件書式を設定する

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

更新日：2026年07月30日

はじめに

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

本記事では、アプリのレコード一覧とレコード詳細画面の表示時に、フィールドの条件によってセルの背景色・文字色を変更する方法を説明します。

動作イメージ

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

レコード一覧画面

ステータスの背景色を強調しつつ、フィールドの値に応じて文字色を変更しています。

レコード詳細画面

「至急」の文字色が変更されています。

デモ環境

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

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/66/

ログイン情報は cybozu developer networkデモ環境で確認してください。

カスタマイズを適用するアプリ

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

アプリストアの「総務への依頼受付」を使用します。

サンプルコード

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

次のJavaScriptのコードを参考に、sample.jsという名前で保存し、「JavaScript/CSSでカスタマイズ」に追加します。

 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


/*
 * conditional Formatting sample program
 * Copyright (c) 2026 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  // レコード一覧画面の表示後にフィールド値の条件に応じて、文字色、フィールドの背景色を変更する
  kintone.events.on('app.record.index.show', async (event) => {
    const bgColor = '#fff8dc';
    const body = [];

    for (const record of event.records) {
      const statusStyle = {
        columnType: 'FIELD',
        column: 'ステータス',
        background: {
          backgroundColor: bgColor
        },
        content: {
          color: '#0000ff' // 文字色を青にする
        }
      };

      switch (record.ステータス.value) {
        case '未着手':
          statusStyle.content.color = '#ff0000'; // 文字色を赤にする
          break;
        case '処理中':
          statusStyle.content.color = '#0000ff'; // 文字色を青にする
          break;
        default:
          statusStyle.content.color = '#0000ff'; // 文字色を青にする
          break;
      }

      const style = [statusStyle];

      if (record.Urgent.value.includes('至急')) {
        style.push({
          columnType: 'FIELD',
          column: 'Urgent',
          content: {
            color: '#ff0000',
            fontWeight: 'bold'
          }
        });
      }

      body.push({
        recordId: record.$id.value,
        style
      });
    }

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

    return event;
  });

  // レコード詳細画面の表示後にフィールド値に応じて文字色を変更する
  kintone.events.on('app.record.detail.show', async (event) => {
    if (event.record.Urgent.value.includes('至急')) {
      await kintone.app.record.setFieldStyle('Urgent', {
        content: {
          color: '#ff0000',
          fontWeight: 'bold'
        }
      });
    }
    return event;
  });
})();

サンプルコードの解説

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

一覧画面に表示されているレコードに対して繰り返し処理を行い、ステータスフィールドの背景色を設定しています。

16
17
18
19
20
21
22
23
24
25
26


    for (const record of event.records) {
      const statusStyle = {
        columnType: 'FIELD',
        column: 'ステータス',
        background: {
          backgroundColor: bgColor
        },
        content: {
          color: '#0000ff' // 文字色を青にする
        }
      };

ステータスの値に応じて、文字色を設定しています。

28
29
30
31
32
33
34
35
36
37
38


      switch (record.ステータス.value) {
        case '未着手':
          statusStyle.content.color = '#ff0000'; // 文字色を赤にする
          break;
        case '処理中':
          statusStyle.content.color = '#0000ff'; // 文字色を青にする
          break;
        default:
          statusStyle.content.color = '#0000ff'; // 文字色を青にする
          break;
      }

「至急」フィールドにチェックが入っている場合、文字色を変更します。

42
43
44
45
46
47
48
49
50
51


      if (record.Urgent.value.includes('至急')) {
        style.push({
          columnType: 'FIELD',
          column: 'Urgent',
          content: {
            color: '#ff0000',
            fontWeight: 'bold'
          }
        });
      }

レコード詳細画面で、フィールドの値に応じて文字色を変更しています。

67
68
69
70
71
72
73
74
75
76
77


  kintone.events.on('app.record.detail.show', async (event) => {
    if (event.record.Urgent.value.includes('至急')) {
      await kintone.app.record.setFieldStyle('Urgent', {
        content: {
          color: '#ff0000',
          fontWeight: 'bold'
        }
      });
    }
    return event;
  });

使用したAPI

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

おわりに

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

今回は、フィールドの条件に応じて背景色や文字色を変更する方法を紹介しました。
見た目を工夫することで、重要な情報をより分かりやすく表示できます。
ぜひ、デモ環境やご自身のアプリで試してみてください。

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

kintone API

一覧画面のカスタマイズ