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 で動作を確認しています。