kintoneの一覧で条件に合う行に色を付ける方法｜標準機能・JavaScript・プラグイン

kintoneの一覧で「条件に合う行だけ色を変える」設定は、標準機能にはありません。標準でできるのは絞り込みで一覧を分けるところまでです。色を付けるには、公式APIの kintone.app.getFieldElements() を使ったJavaScriptを書くか、設定だけで済む無料プラグイン条件書式を使います。

標準機能でできること・できないこと

kintoneの一覧の設定画面には、そもそも色に関する項目がありません。ここを探して時間を使う方が多いので、先に書いておきます。

まず絞り込みで代替する

色が付けられなくても、一覧を分けるだけでかなり効きます。

1. アプリの設定 →「一覧」→「＋ 一覧を追加」
2. 表示形式は「表形式」、表示する項目を選ぶ
3. 絞り込み条件に「ステータス」＝「遅延」を指定
4. 「要対応」という名前で保存 →「アプリを更新」

これで、その一覧を開けば対応すべきレコードだけが並びます。プラグインを入れる前に、まずこれをやってください。

ただし弱点があります。

• 一覧を切り替えないと気づけない。 普段見ている一覧では、遅延も通常も同じ見た目です
• 全体の中での位置が分からない。 「30件のうち3件が遅延」という比率が見えません
• 複数の状態を同時に見られない。 「遅延」「保留」「高額」を一度に把握したい場合、一覧を3つ切り替えることになります

色分けは、この3つを埋めるために使います。逆に言えば、1つの状態だけを追いかける業務なら、絞り込みで十分です。

JavaScriptで一覧のセルに色を付ける

kintoneには、一覧の特定のフィールドのセルの要素をまとめて取得する公式API kintone.app.getFieldElements() があります。画面のHTMLを自前でたどらずに済むので、画面の作りが変わっても壊れにくいのが利点です。

「ステータスが『遅延』の行を、うすい赤にする」最小の例です。

(() => {
  'use strict';
  const COND = 'ステータス';   // 条件に使う項目
  const HIT = '遅延';
  // 行全体を塗るので、その一覧に出している項目を並べる
  const ROW_FIELDS = ['案件名', 'ステータス', '担当者', '納期'];
  const BG = '#FFD9D9';

  kintone.events.on('app.record.index.show', (event) => {
    // 一覧に出ていない項目は null が返るので除く
    const columns = ROW_FIELDS
      .map((code) => kintone.app.getFieldElements(code))
      .filter((cells) => cells !== null);

    event.records.forEach((record, i) => {
      const on = record[COND] && record[COND].value === HIT;
      columns.forEach((cells) => {
        cells[i].style.backgroundColor = on ? BG : '';
      });
    });
    return event;
  });
})();

20行ほどです。app.record.index.show は一覧を開いたとき・ページを送ったとき・並べ替えたときに毎回発火し、event.records の並び順と getFieldElements() が返すセルの並び順は一致します。だから i で突き合わせられます。

条件に合わないときに '' を入れて色を消しているのがポイントです。ページを送ったときに前の行の色が残らないようにするための1行で、これを省くと表示がずれます。

詳細画面で1つの項目に色を付ける場合は、kintone.app.record.getFieldElement('金額') で要素を取ります。イベントは app.record.detail.show です。

JavaScriptカスタマイズの基本は13章 JavaScript・API・外部連携にまとめています。

この書き方で足りなくなるところ

一番大きいのは、ルールが増えたときの管理です。 「金額が大きい案件も黄色にしたい」と言われるたびに開発者に依頼が必要になると、色分けは更新されなくなります。

設定だけで済ませる：条件書式（無料）

COTSUBUが公開している無料プラグイン条件書式は、上の内容を文章の形の設定画面で作れます。

もし ［ステータス］ が ［遅延］ と等しい なら、［行全体］ の背景を ［うすい赤］ にする

• 条件は「等しい／等しくない／含む／より大きい／以上／より小さい／以下／空欄／空欄でない」
• 複数の条件を「かつ／または」で組み合わせられる
• 数値と日付は大小で比べる（1000と900を文字の並びで比べない）
• 色は候補から選ぶ方式。読みにくい組み合わせを選ぶと設定画面が注意してくれる
• 色を付ける場所は「行全体」か「選んだ項目だけ」
• 一覧画面と詳細画面の両方に対応

無料・会員登録不要・外部と通信しません。 kintoneの公式APIだけで動くので、自治体のLGWAN環境や、閉じた社内ネットワークでも使えます。ライセンスの条文はプラグインのライセンスに掲載しています。

設定はこの6ステップです。

1. アプリの設定 →「プラグイン」→「条件書式」の歯車アイコン
2. 「色を付ける画面」で、一覧画面・詳細画面のどちらに色を付けるかを選ぶ
3. 「＋ ルールを追加」で条件を作る（「＋ 条件を追加」で増やし、「すべてに当てはまるとき／どれか1つでも当てはまるとき」を選ぶ）
4. 文字色・背景色を選ぶ。選ぶとすぐ下に見本が出る
5. 「色を付ける場所」で「行全体」か「選んだ項目だけ」を選ぶ
6. 「保存する」→「アプリを更新」

知っておくべき動きのルール

• ルールは上から順に見て、先に当てはまったものが採用されます。並べ替えは「▲」「▼」
• 「行全体」を塗ったうえから「項目」を塗るので、項目の指定が前に出ます
• 一覧で行全体を塗ると、その一覧に出ている項目の列に色が付きます。左端のチェックボックスや操作ボタンの列には付きません
• 色が付くだけで、レコードの値は変わりません
• 新規作成・編集の画面、印刷画面には色を付けません
• サブテーブルの中の列は、条件にも対象にも使えません
• カレンダー表示やカスタマイズビューでは色が付きません

色の使い方は、決めてから付ける

色分けは、入れた直後がいちばん効いて、半年後に効かなくなります。原因はほぼ「色が増えたこと」です。

色は3つまでにする

赤・黄・通常（色なし）の3段階で足ります。4色目を足したくなったら、それは一覧を分けるべき別の軸です。青も緑も紫も付いた一覧は、どれも目立たないのと同じになります。

赤は「いま手を打つもの」だけに使う

赤が10件並ぶ一覧は、赤を見なくなります。赤はその日のうちに動くものに限定し、「気にしておくもの」は黄色にしてください。赤の件数が常時二桁になったら、条件がゆるすぎます。

背景はうすく、文字は黒のまま

いちばん失敗しないのは「背景＝うすい色／文字色＝そのまま」です。黒い文字のままなので必ず読めます。こい背景を選ぶときは、文字色を白にしてください。条件書式の設定画面は、読みにくい組み合わせを選ぶと注意を出します（保存はできますが、直すことをおすすめします）。

色だけに意味を持たせない

色が見分けにくい方には、赤も黄色も同じに見えることがあります。大事な状態は、色に加えて項目の値でも分かるようにしてください。 「ステータス」列が一覧に出ていれば、色が伝わらなくても文字で読めます。色は「気づかせる」ためのもので、「伝える」のは値の役目です。

そして、何色が何を意味するかをアプリの説明に書いてください。 アプリの説明欄に「赤＝期限超過／黄＝3日以内」と1行書いておくと、後から入った人が迷いません。引き継がれない色のルールは、そのうち誰も触れなくなります。

期限の色分けとの住み分け

同じ「一覧の色分け」でも、今日を基準にするかどうかで使う道具が変わります。

条件書式の無料版は、条件に入れる日付が固定の値です。「今日」「今月末」のような動く日付は扱いません。一方で期限・残日数は、一覧を開いた日の日付で判定し直すため、保存してから日がたってもずれません。期限の色分けの詳細はkintoneで期限・残日数を表示して色を付ける方法にまとめています。

両方入れても問題ありません。 期限の色は期限・残日数に任せ、それ以外の条件を条件書式で作る、という分け方が素直です。

色で見せるか、項目を隠すか

見せたうえで目立たせるのが色分け、そもそも見せないのが表示の出し分けです。入力画面をすっきりさせたい場合はkintoneで条件によって項目を出し分ける方法をご覧ください。なお、一覧の列が多すぎて色を付けても目立たない場合は、色を足す前に一覧の列を減らすのが先です（→5章 アプリ設計の基本）。

よくある質問

kintoneの標準機能で、条件に合う行の色を変えられますか

変えられません。kintoneの一覧には、条件によって文字色や背景色を変える設定そのものがありません。標準でできるのは、絞り込み条件で「遅延だけの一覧」を作って分けることまでです。色を付けるにはJavaScriptか、条件書式プラグインを使います。

ドロップダウンの選択肢ごとに色を付けられますか

標準ではできません。選択肢の文字列に色を設定する機能がないためです。「ステータスが『遅延』なら赤」のように、値を条件にして色を付ける形で実現します。

サブテーブル（テーブル）の中のセルにも色を付けられますか

条件書式プラグインでは付けられません。kintoneの公式APIでテーブルの中のセルの要素を取得できないためです。公式APIの範囲だけで作る方針のため、画面の内部構造を無理にたどることはしていません。

「納期が今日より前なら赤」のように、動く日付で色を付けられますか

無料版の条件書式では、条件に入れる日付は固定の値です。今日を基準にした色分けは、期限・残日数プラグインが担当します。期限の色分けはそちらを、金額やステータスなど値そのものの色分けは条件書式を使ってください。

条件書式プラグインは無料ですか

無料です。会員登録も不要で、MITライセンスのため商用でも使えます。外部のサーバーと通信しないので、自治体のLGWAN環境や閉じた社内ネットワークでも動きます。