第 14 回 kintone JavaScript カスタマイズのプログラム実例を学ぼう②（条件書式設定）

著者名：村濱一樹

（kintone エバンジェリスト）

題材

今回はレコード一覧とレコード詳細画面で条件書式を設定するというサンプルプログラムについて学んでいきましょう。
kintone アプリは、kintone アプリストアにある「総務への依頼受付」を使っています。

データの条件に応じて書式を変更したいということはよくあるケースですし、for 文と if 文の両方を使う必要があるので、今までの腕試しも兼ねてみてみましょう。

プログラム

プログラムは下記です。少しずつピックアップして、内容を解説していきます。

 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


/*
 * 条件書式の文字装飾のサンプルプログラム
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/licenses/mit-license.php
 */
(() => {
  'use strict';
  // レコード一覧画面の表示後にフィールド値の条件に応じて、文字色、フィールドの背景色を変更する
  kintone.events.on('app.record.index.show', (event) => {
    const bgColor = '#fff8dc';
    const elStatus = kintone.app.getFieldElements('ステータス');
    const elUrgent = kintone.app.getFieldElements('Urgent');

    for (let i = 0; i < elStatus.length; i++) {
      const record = event.records[i];
      elStatus[i].style.backgroundColor = bgColor;

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

      if (record.Urgent.value[0] === '至急') {
        elUrgent[i].style.color = '#ff0000';
        elUrgent[i].style.fontWeight = 'bold';
      }
    }
  });

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

全体の構成

今回のサンプルプログラムは大きく 2 つのパーツに分けて説明できます。
1 つ目はレコード一覧画面を表示した後のイベント、2 つ目はレコード詳細画面を表示した後のイベントです。
それぞれのイベントには「ステータスごとに書式を変更する操作」と、「特定の文字と一致する時に書式を変更する操作」を設定しています。

レコード一覧画面を表示した後のイベント（app.record.index.show）

「レコード一覧画面」が表示されたときに、以下の処理が実行されます。

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


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

    for (let i = 0; i < elStatus.length; i++) {
      const record = event.records[i];
      elStatus[i].style.backgroundColor = bgColor;

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

      if (record.Urgent.value[0] === '至急') {
        elUrgent[i].style.color = '#ff0000';
        elUrgent[i].style.fontWeight = 'bold';
      }
    }
  });

レコード詳細画面を表示した後のイベント（app.record.detail.show）

「レコード詳細画面」が表示されたときに、以下の処理が実行されます。

39
40
41
42
43
44
45
46


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

レコード一覧画面を表示した後のイベントのコード

レコード一覧画面を表示した後のイベントのコードは 4 つの工程に分けて考えることができます。

変数宣言と初期化
for 文を使ってレコードの数だけ繰り返し処理
switch 文を使って「ステータス」の値に応じて文字の色を変更
if 文を使って「Urgent」の値に応じて文字の色を変更

1. 変数宣言と初期化

コードの最初の方で、先にいくつか変数の宣言がされています。

背景色の指定

12

    const bgColor = '#fff8dc';

これは背景色を設定しています。
#fff8dc というのはカラーコードと呼ばれるもので、16 進数（0-9, a-f）で #000000 〜 #ffffff まであります。
カラーコードは必要に応じて好きな値を指定できます。

書式を変更したい部分の Element（要素）の取得

13
14


    const elStatus = kintone.app.getFieldElements('ステータス');
    const elUrgent = kintone.app.getFieldElements('Urgent');

この行は、書式変更したい部分の要素（Element）を取得しています。

kintone.app.getFieldElements(fieldCode) とすることで要素を取得して、この後の for 文で書式を変更していくような構成になっています。
詳細は、レコード一覧のフィールド要素を取得するを確認してください。

2. for 文を使ってレコードの数だけ繰り返し処理

ここでは、すべてのレコードの書式を変更するために、繰り返し処理を使っています。

for 文の繰り返し条件

16

    for (let i = 0; i < elStatus.length; i++) {

この for 文は「elStatus 変数の配列の長さだけ繰り返す」という条件になっていますね。
elStatus 変数にはさきほど取得した要素の配列がはいっているので、画面に表示されているレコード分だけ処理する、と同じ意味になります。

3. switch 文を使って「ステータス」の値に応じて文字の色を変更

switch 文というものを使って、条件分岐処理をしています。
条件分岐は、if 文でもできるのですが、条件分岐が多いと switch 文のほうが見やすかったり整理しやすい場合もあるので、状況に応じて使い分けることができます。
下記では、 record['ステータス'].value が「未着手」のときは文字色を「赤」に、「処理中」やそれ以外の場合は文字色「青」にします。

20
21
22
23
24
25
26
27
28
29
30


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

switch 文について

switch 文は次のように書きます。
条件分岐が多くなってくると、 switch 文を使用した方が見やすくなります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


switch(変数){
 case 値A: // 変数の値が値Aの時実行される。
   処理A
   break; // 処理Aが終わったらSwitch文から抜ける。(breakがないとこれより下の処理もしてしまう)
 case 値B: // 変数の値が値Bの時、実行される。
   処理B
   break; // 処理Bが終わったらSwitch文から抜ける。
 default : // 変数の値が上記の条件に当てはまらない時、実行される。
   デフォルト処理
   break; // デフォルト処理が終わったらSwitch文から抜ける。
}

4. if 文を使って「Urgent」の値に応じて文字の色を変更

32
33
34
35


      if (record.Urgent.value[0] === '至急') {
        elUrgent[i].style.color = '#ff0000';
        elUrgent[i].style.fontWeight = 'bold';
      }

「Urgent の値に応じて文字の色を変更する」部分の補足ですが、チェックボックスフィールドの「Urgent」の値の中身は配列です。
そのため、「Urgent」の値を指定するときは、[0] のように、インデックス番号を指定して配列の要素を取得します（インデックス番号は 0 始まりです）。
チェックボックスフィールドのフィールド形式や、配列の扱い方の詳細については、リンク先の記事を参照してください。

レコード詳細画面を表示した後のイベントのコード

「Urgent」の値が「至急」の場合、太い赤字にします。

42
43
44
45


    if (event.record.Urgent.value[0] === '至急') {
      elUrgent.style.color = '#ff0000';
      elUrgent.style.fontWeight = 'bold';
    }

一覧画面のときと比べると、for 文などで繰り返す必要もなく、サンプルでは「Urgent」の表示のみ変更となってますので、ここはシンプルですね。

まとめ

条件書式のプログラムについて学びました。
今回のようにフィールドの要素の取得の方法と繰り返し / 条件分岐の処理を使えば自由に色などを変更できます。
次回以降もいくつかのサンプルコードを細かくみていきましょう。

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

旧：はじめよう JavaScript