プロジェクト管理をしているアプリで各プロジェクトのステータスを管理するとき、ステータスの表示が文字表記だと全体的なプロジェクトの進み具合を把握しにくい場合があります。
ステータスの文字表記をプログレスバーに置き換えることによって、プロジェクトの進捗状況を視覚的にわかりやすく把握できます。
今回は、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
からダウンロードします。
「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
