はじめに
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で動作を確認しています。