条件によってkintone(キントーン)文字の色を変更する

kintoneのレコード一覧表示の際に

  • 男性は青色、女性は赤色で表示したい
  • 年齢が80歳以下の方は赤色で表示したい
  • 転倒危険性がある場合は、背景を黄色で文字の色を赤色で表示したい

そういった表示方法を変更することで、一覧を見やすくしたいですよね。

今回はcybozu developer networkで公開されている、新デザイン 条件書式プラグインを利用することで上記3つの表示方法を可能にしてみます。

プラグインを利用するので、kintoneのスタンダードコースでの契約が必要です。

【kintoneフォント色 変更方法 プラグインと連携サービス(Customine)でkintoneの文字の色を変えてみる

条件分岐表示させるkintoneアプリ

  • 性別・・・・ドロップダウン
  • 氏名・・・・文字列(1行)
  • 年齢・・・・数値
  • 転倒危険性・ドロップダウン
kintone一覧

以上のフィールドを配置したアプリを作成し、kintoneの一覧表示方法を色々とプラグインを使って変更していきます。

新条件書式プラグインをkintoneアプリに反映させる

kintoneプラグイン追加

新条件書式プラグインをアプリに追加し、設定のプラグインから表示方法を設定していきます

kintoneプラグイン設定
新条件書式プラグイン設定


新条件書式プラグインは、以下の画面で設定していきます。

〇書式条件フィールド

どの条件で表示方法を変更するのか、男性女性で表示色を変えたいのであれば書式条件フィールドは「性別」を選択します。選択方法はドロップダウンで選択できます。

〇条件式

条件値で入力した文字や値に対してどのような条件の際に表示を変更するのか指定します

  • 条件値を含む
  • 条件値を含まない
  • =(等しい)
  • ≠ (等しくない)
  • ≦(以下)
  • <(より小さい)
  • ≧(以上)
  • >(より大きい)

〇条件値
その名の通りです。男性や女性、条件で分けたい数値など自由に入力可能です。

〇書式変更フィールド
上記で指定した条件と一致した場合にどのフィールドの書式を変更するのかドロップダウン形式で選択します。

性別が男性の場合で、氏名を青色に変更する場合は書式変更フィールドで「氏名」を選択します。

〇文字色
表示する文字の色を選択できます。デフォルトは黒色です。パレットで色を選択することも可能です。

〇背景色
表示する背景色を選択できます。デフォルトは透明です。パレットで色を選択することも可能です。

〇文字サイズ
表示する文字のサイズを変更できます

  • 変更なし(デフォルト)
  • 小さい
  • やや小さい
  • やや大きい
  • 大きい

〇文字装飾
文字を太字にしたり装飾します

  • 変更なし(デフォルト)
  • 太字
  • 斜線
  • 打ち消し線

性別で氏名の文字色を変えるkintoneプラグイン設定

男性女性で表示する色を変える場合は、最低でも2つの条件を設定する必要があります。

〇書式条件フィールド
性別

〇条件式
・=(等しい)

〇条件値
男性
女性
の2パターン

〇書式変更フィールド
今回は性別を選択、氏名の色を変更したい場合は「氏名」を選択します。

〇文字色
#0000ff・・・男性の場合青色
#ff0000・・・女性の場合赤色
の2パターン

〇背景色
今回はデフォルトの透明のまま

〇文字サイズ
・変更なし(デフォルト)

〇文字装飾
・変更なし(デフォルト)

新条件書式色設定イメージ


上記の設定を新条件書式プラグインで行うと、以下の画像の様に性別の男性という表示が青色に、女性という表示が赤色になりました。

kintone一覧変更イメージ

他にも色々と応用できるかと思いますが、続いて定めた数値よりも低い場合は赤色でkintoneのレコード一覧時に表示できるように設定をしてみます。

数値を条件に、文字の色を変更する

続いて定めた数値よりも入力された数値が低い場合数値の色を赤字にする設定です。

今回は年齢80歳以下の場合年齢の数値を赤色で表示してみます。

〇書式条件フィールド
年齢

〇条件式
・≦(以下)

〇条件値
80

〇書式変更フィールド
今回は年齢を選択、氏名の色を変更したい場合は「氏名」を選択します。

〇文字色
#ff0000・・・赤色

〇背景色
今回はデフォルトの透明のまま

〇文字サイズ
・変更なし(デフォルト)

新条件書式プラグイン設定イメージ

〇文字装飾
・変更なし(デフォルト)
上記の設定を新条件書式プラグインで行うと、以下の画像の様に性別の年齢の80歳以下の値の表示が赤色になりました。

最後は選択肢によって、黄色や赤色を用いて目立つようにkintoneのレコード一覧で表示できるように設定します。

年齢変更イメージ

特定の値で、フィールド背景の色を変更する

最後は、転倒危険性がある場合は背景を黄色で文字の色を赤色で表示し、目立つような表示をしてみます。

今回は転倒の危険性が「ある」という選択肢を選んだ場合、文字の背景が黄色になり、文字の色が赤色で更に文字の大きさと太さを変更して表示してみます。

〇書式条件フィールド
転倒危険性

〇条件式
・=(等しい)

〇条件値
ある

〇書式変更フィールド
転倒危険性

〇文字色
#ffff00・・・黄色

〇背景色
#ff0000・・・赤色

〇文字サイズ
・大きい

文字背景設定
設定変更後イメージ

〇文字装飾
・太字

上記の設定を新条件書式プラグインで行うと、以下の画像の様に転倒危険性が「ある」と項目を選択された場合文字の背景は黄色く、文字の色は赤く、大きく太く表示されますので、視覚的に「この方は転倒の危険性がある」と理解できます。

レコード一覧だけではなく、レコードの詳細画面でも表示が設定した通りに表示されるため、業務効率に繋がる可能性もあります。

もちろんやり過ぎるとカラフル過ぎて逆に業務効率を下げる可能性があり、注意が必要です。