Tips

Progress Bar JSライブラリーを使ってプロジェクトの進捗度をプログレスバーで表示してみよう！

著者名： Fuji Business International (External link) Mamoru Fujinoki

目次

はじめに

固定リンクがコピーされました

プロジェクト管理をしているアプリで各プロジェクトのステータスを管理するとき、ステータスの表示が文字表記だと全体的なプロジェクトの進み具合を把握しにくい場合があります。
ステータスの文字表記をプログレスバーに置き換えることによって、プロジェクトの進捗状況を視覚的にわかりやすく把握できます。

今回は、Progress Bar JSライブラリーを使用して、進捗状況のステータスをプログレスバーにして表示するサンプルアプリを作成してみます。

プロセス管理のステータス名で進捗を表示する

固定リンクがコピーされました

概要

固定リンクがコピーされました

kintoneのプロセス管理機能を使用して、プロジェクトの進捗を管理するアプリです。
プロセスのステータス名によって進捗度を設定してプログレスバーを表示します。

アプリに必要なフィールド

固定リンクがコピーされました

以下のテーブルおよび画像を参考に新規アプリを作成します。

フィールドの種類 フィールド名 フィールドコード 備考
ドロップダウン Project Type project_type 選択値：「Task」「Learning」
文字列（1行） Total Est. Hours total_hours 初期値：0
文字列（1行） Project project_name ー
日付 Start Date start_date 初期値：登録時の日付
日付 End Date end_date ー
文字列（1行） Progress progress Progress Barの表示用

プロセス管理の設定

固定リンクがコピーされました

以下の画像を参考に「プロセス管理」を設定します。

一覧のカスタマイズ

固定リンクがコピーされました

さらに以下の画像を参考に一覧をカスタマイズします。

「Progress」フィールドを「ステータス」フィールドの前に設定します。
このスペースにProgress Barを表示します。

カスタムプログラムの作成

固定リンクがコピーされました

以下のスニペットを参考にカスタムプログラムを記述します。

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

/*
 * Progress Bar sample program
 * Copyright (c) 2023 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  // レコード一覧イベント
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 1234) { // 作成した一覧のIDを指定
      return event;
    }
    const records = event.records;// 一覧レコードの取得
    const elements = kintone.app.getFieldElements('progress'); // 一覧の「Progress」フィールドの要素を取得
    const appId = kintone.app.getId();// アプリのIDを取得

    for (let i = 0; i < records.length; i++) {
      const id = Number(records[i].$id.value);// 一覧のレコードIDを取得
      const body = {
        app: appId,
        id: id
      };
      kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body, (resp) => { // 取得したレコードIDの詳細情報を取得
        // success
        console.log('Success');
        elements[i].width = '200px'; // Progress Barの表示幅の設定
        const record = resp.record;
        const bar = new ProgressBar.Line(elements[i], { // Progress Barの表示方法指定
          strokeWidth: 4,
          easing: 'easeInOut',
          duration: 1400,
          color: '#FFEA82',
          trailColor: '#eee',
          trailWidth: 1,
          svgStyle: {width: '100%', height: '100%'},
          text: { // 表示するテキストのスタイル設定
            style: {
              color: '#999',
              right: '0',
              top: '30px',
              padding: 0,
              margin: 0,
              transform: null,
              'text-align': 'center'
            },
            autoStyleContainer: true
          },
          from: {color: '#FFEA82'},
          to: {color: '#ED6A5A'},
          step: (state, stepBar) => {
            stepBar.setText(Math.round(stepBar.value() * 100) + ' %'); // Progress Barに表示するテキストの設定
          }
        });
        let progress = 0;
        switch (record.ステータス.value) { // プロセス管理のステータスに応じたBarの長さの設定
          case '未着手':
            progress = 0;
            break;
          case '作業中':
            progress = 25;
            break;
          case 'レビュー中':
            progress = 50;
            break;
          case '再調整中':
            progress = 75;
            break;
          case '再レビュー中':
            progress = 75;
            break;
          case '完了':
            progress = 100;
            break;
          default:
            progress = 0;
            break;
        }
        bar.animate((progress / 100).toFixed(1)); // 0.0から1.0の数値を設定
      }, (error) => {
        // error
        console.log(error);
      });
    }
    return event;
  });
})();

動作の確認

固定リンクがコピーされました

Progress Barのライブラリーを Github (External link) からダウンロードします。
「progressbar.js」のファイルをダウンロードします。

「アプリの設定」→「JavaScript / CSSでカスタマイズ」ページにて、次のファイルを指定して保存します。

  • ダウンロードした「progressbar.js」
  • 今回作成したカスタムJavaScriptファイル

保存したら、アプリを更新します。

新規レコードを作成し、画像のように一覧で「Progress」フィールドにおいて、Progress Barが表示されれば完成です。

ラジオボタンの選択肢で進捗を表示する

固定リンクがコピーされました

概要

固定リンクがコピーされました

進行状況をラジオボタンで選択し、プロジェクトの進捗管理をするアプリです。
選択した進行状況のオプションに応じて進捗度を設定し、プログレスバーを表示します。

アプリに必要なフィールド

固定リンクがコピーされました

以下のテーブルおよび画像を参考に新規アプリを作成します。

フィールドの種類 フィールド名 フィールドコード 備考
ドロップダウン Project Type project_type 選択値：「Task」「Learning」
文字列（1行） Total Est. Hours total_hours 初期値：0
文字列（1行） Project project_name ー
日付 Start Date start_date 初期値：登録時の日付
日付 End Date end_date ー
ラジオボタン Status status 選択値：未確認、必要作業の確認中、作業中、完了
文字列（1行） Progress progress Progress Barの表示用

一覧のカスタマイズ

固定リンクがコピーされました

さらに以下の画像を参考に一覧をカスタマイズします。

「Progress」フィールドを「ステータス」フィールドの前に設定します。
このスペースにProgress Barを表示します。

カスタムプログラムの作成

固定リンクがコピーされました

以下のスニペットを参考にカスタムプログラムを記述します。

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

/*
 * Progress Bar sample program
 * Copyright (c) 2023 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  // レコード一覧イベント
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 1234) { // 作成した一覧のIDを指定
      return event;
    }
    const records = event.records;// 一覧レコードの取得
    const elements = kintone.app.getFieldElements('progress'); // 一覧の「Progress」フィールドの要素を取得
    const appId = kintone.app.getId();// アプリのIDを取得

    for (let i = 0; i < records.length; i++) {
      const id = Number(records[i].$id.value);// 一覧のレコードIDを取得
      const body = {
        app: appId,
        id: id
      };
      kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body, (resp) => { // 取得したレコードIDの詳細情報を取得
        // success
        console.log('Success');
        elements[i].width = '200px';// Progress Barの表示幅の設定
        const record = resp.record;
        const bar = new ProgressBar.Line(elements[i], {// Progress Barの表示方法指定
          strokeWidth: 4,
          easing: 'easeInOut',
          duration: 1400,
          color: '#FFEA82',
          trailColor: '#eee',
          trailWidth: 1,
          svgStyle: {width: '100%', height: '100%'},
          text: {// 表示するテキストのスタイル設定
            style: {
              color: '#999',
              right: '0',
              top: '30px',
              padding: 0,
              margin: 0,
              transform: null,
              'text-align': 'center'
            },
            autoStyleContainer: true
          },
          from: {color: '#FFEA82'},
          to: {color: '#ED6A5A'},
          step: (state, stepBar) => {
            stepBar.setText(Math.round(stepBar.value() * 100) + ' %');// Progress Barに表示するテキストの設定
          }
        });
        let progress = 0;
        switch (record.status.value) { // 選択した進行状況に応じたBarの長さの設定
          case '未確認':
            progress = 0;
            break;
          case '必要作業の確認中':
            progress = 33;
            break;
          case '作業中':
            progress = 66;
            break;
          case '完了':
            progress = 100;
            break;
          default:
            progress = 0;
            break;
        }
        bar.animate((progress / 100).toFixed(1)); // 0.0から1.0の数値を設定
      }, (error) => {
        // error
        console.log(error);
      });
    }
    return event;
  });
})();

動作の確認

固定リンクがコピーされました

「アプリの設定」→「JavaScript / CSSでカスタマイズ」ページにて、次のファイルを指定して保存します。

保存したら、アプリを更新します。

いくつか新規レコードを作成し、画像のように一覧の「Progress」フィールドにおいて、Progress Barが表示されれば完成です。

チェックボックスのチェック数の割合により進捗を表示する

固定リンクがコピーされました

概要

固定リンクがコピーされました

定期タスクのリストをチェックボックスで設定し、完了したタスクをチェックすることでプロジェクトの進捗管理をするアプリです。
定期タスクのリストより、チェックされた完了タスクの割合に応じて進捗度を設定し、プログレスバーを表示します。

アプリに必要なフィールド

固定リンクがコピーされました

以下のテーブルおよび画像を参考に新規アプリを作成します。

フィールドの種類 フィールド名 フィールドコード 備考
ユーザー選択 ユーザー選択 user ー
日付 Date task_date 初期値：登録時の日付
チェックボックス 定期タスク daily_tasks 選択値：「メールの処理」「スケジュールの確認」「書類の整理」「自分宛て郵便物の確認」「掃除」
文字列（1行） Progress progress Progress Barの表示用

一覧のカスタマイズ

固定リンクがコピーされました

さらに以下の画像を参考に一覧をカスタマイズします。

「Progress」フィールドを「Date」フィールドの前に設定します。
このスペースにProgress Barを表示します。

カスタムプログラムの作成

固定リンクがコピーされました

以下のスニペットを参考にカスタムプログラムを記述します。

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/*
 * Progress Bar sample program
 * Copyright (c) 2023 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  // レコード一覧イベント
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 1234) { // 作成した一覧のIDを指定
      return event;
    }
    const records = event.records;// 一覧レコードの取得
    const elements = kintone.app.getFieldElements('progress');// 一覧の「Progress」フィールドの要素を取得
    const appId = kintone.app.getId();// アプリのIDを取得

    for (let i = 0; i < records.length; i++) {
      const id = Number(records[i].$id.value);// 一覧のレコードIDを取得
      const body = {
        app: appId,
        id: id
      };
      kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body, (resp) => { // 取得したレコードIDの詳細情報を取得
      // success
        console.log('Success');
        elements[i].width = '200px';// Progress Barの表示幅の設定
        const record = resp.record;
        const bar = new ProgressBar.Line(elements[i], {// Progress Barの表示方法指定
          strokeWidth: 4,
          easing: 'easeInOut',
          duration: 1400,
          color: '#FFEA82',
          trailColor: '#eee',
          trailWidth: 1,
          svgStyle: {width: '100%', height: '100%'},
          text: {// 表示するテキストのスタイル設定
            style: {
              color: '#999',
              right: '0',
              top: '30px',
              padding: 0,
              margin: 0,
              transform: null,
              'text-align': 'center'
            },
            autoStyleContainer: true
          },
          from: {color: '#FFEA82'},
          to: {color: '#ED6A5A'},
          step: (state, stepBar) => {
            stepBar.setText(Math.round(stepBar.value() * 100) + ' %');// Progress Barに表示するテキストの設定
          }
        });
        let progress = 0;
        const task_count = record.daily_tasks.value.length;// 完了したタスクに応じたBarの長さの設定
        progress = task_count / 5;
        bar.animate((progress).toFixed(1)); // 0.0から1.0の数値を設定
      }, (error) => {
      // error
        console.log(error);
      });
    }
    return event;
  });
})();

動作の確認

固定リンクがコピーされました

「アプリの設定」→「JavaScript / CSSでカスタマイズ」ページにて、次のファイルを指定して保存します。

保存したら、アプリを更新します。

いくつか新規レコードを作成し、画像のように一覧の「Progress」フィールドにおいて、Progress Barが表示されれば完成です。

テーブル行のサブタスクの完了ステータスに応じて進捗を表示する

固定リンクがコピーされました

概要

固定リンクがコピーされました

プロジェクトのサブタスクをテーブルに設定し、サブタスクのステータスでプロジェクトの進捗管理をするアプリです。
テーブル内の完了しているサブタスクの割合に応じて進捗度を設定し、プログレスバーを表示します。

アプリに必要なフィールド

固定リンクがコピーされました

以下のテーブルおよび画像を参考に新規アプリを作成します。

フィールドの種類 フィールド名 フィールドコード 備考
数値 Total Est. Days total_days 初期値：0
文字列（1行） Project project_name ー
日付 Start Date start_date 初期値：登録時の日付
日付 End Date end_date ー
テーブル サブタスク subtasks ー
文字列（1行） タスク名 task_name ー
ドロップダウン 進捗状況 progress_status 選択値：「未対応」「対応中」「完了」
文字列（1行） Progress progress Progress Barの表示用

一覧のカスタマイズ

固定リンクがコピーされました

さらに以下の画像を参考に一覧をカスタマイズします。

「Progress」フィールドを「Total Est. Days」フィールドの前に設定します。
このスペースにProgress Barを表示します。

カスタムプログラムの作成

固定リンクがコピーされました

以下のスニペットを参考にカスタムプログラムを記述します。

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

/*
 * Progress Bar sample program
 * Copyright (c) 2023 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  // レコード一覧イベント
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 1234) { // 作成した一覧のIDを指定
      return event;
    }
    const records = event.records;// 一覧レコードの取得
    const elements = kintone.app.getFieldElements('progress');// 一覧の「Progress」フィールドの要素を取得
    const appId = kintone.app.getId();// アプリのIDを取得

    for (let i = 0; i < records.length; i++) {
      const id = Number(records[i].$id.value);// 一覧のレコードIDを取得
      const body = {
        app: appId,
        id: id
      };
      kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body, (resp) => { // 取得したレコードIDの詳細情報を取得
        // success
        console.log('Success');
        elements[i].width = '200px';// Progress Barの表示幅の設定
        const record = resp.record;
        const bar = new ProgressBar.Line(elements[i], {// Progress Barの表示方法指定
          strokeWidth: 4,
          easing: 'easeInOut',
          duration: 1400,
          color: '#FFEA82',
          trailColor: '#eee',
          trailWidth: 1,
          svgStyle: {width: '100%', height: '100%'},
          text: {// 表示するテキストのスタイル設定
            style: {
              color: '#999',
              right: '0',
              top: '30px',
              padding: 0,
              margin: 0,
              transform: null,
              'text-align': 'center'
            },
            autoStyleContainer: true
          },
          from: {color: '#FFEA82'},
          to: {color: '#ED6A5A'},
          step: (state, stepBar) => {
            stepBar.setText(Math.round(stepBar.value() * 100) + ' %');// Progress Barに表示するテキストの設定
          }
        });
        let progress = 0;
        record.subtasks.value.forEach(subtask => {
          if (subtask.value.progress_status.value === '完了') { // 完了ステータスのサブタスクの割合に応じたBarの長さの設定
            progress++;
          }
        }
        );
        bar.animate((progress / 5).toFixed(1)); // 0.0から1.0の数値を設定
      }, (error) => {
        // error
        console.log(error);
      });
    }
    return event;
  });
})();

動作の確認

固定リンクがコピーされました

「アプリの設定」→「JavaScript / CSSでカスタマイズ」ページにて、次のファイルを指定して保存します。

保存したら、アプリを更新します。

いくつか新規レコードを作成し、画像のように一覧の「Progress」フィールドにおいて、Progress Barが表示されれば完成です。

レコードにサブタスクを登録していない場合は、Progress Barの表示は0％になります。
進捗表示を確認するためにはテーブルのサブタスクを登録してください。
ここでは、サブタスクの例として以下の項目を配置しています。

  • 仕様の作成
  • 市場調査
  • 関連部署へのヒアリング
  • 概要図の作成
  • プレゼン日程の調整

おわりに

固定リンクがコピーされました

今回紹介したProgress Barのライブラリーを使うと、プロジェクト管理のアプリで進捗状況を視覚化し、各タスクのステータスをすばやく知ることができます。
Progress Barライブラリーを使えば、さまざまな進捗ステータスの設定方法に対応が可能です。

参照サイト

固定リンクがコピーされました

Progress Bar.JS (External link)

information

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