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

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

題材

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

データの条件に応じて書式を変更したいということはよくあるケースですし、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/license/mit/
 */
(() => {
  '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」の表示のみ変更となってますので、ここはシンプルですね。

まとめ

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

information

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