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

（Author : Fuji Business International Mamoru Fujinoki）

Index

• はじめに
• プロセス管理のステータス名で進捗を表示する
• ラジオボタンの選択肢で進捗を表示する
• チェックボックスのチェック数の割合により進捗を表示する
• テーブル行のサブタスクの完了ステータスに応じて進捗を表示する
• おわりに

はじめに

プロジェクト管理をしているアプリで、各プロジェクトのステータスを管理する時、

ステータスの表示が文字表記であると、全体的なプロジェクトの進み具合を把握しにくい場合があります。

ステータスの文字表記をプログレスバーに置き変えることによって、プロジェクトの進捗状況を視覚的にわかりやすく把握できるようになります。

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

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

概要

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

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

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

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

プロセス管理の設定

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

一覧のカスタマイズ

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

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

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

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

動作の確認

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

「アプリの設定」→ 「JavaScript / CSSでカスタマイズ」ページにて、ダウンロードした「progressbar.js」および作成したカスタム JavaScript ファイルをアップロードし、「アプリを更新」します。

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

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

概要

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

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

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

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

一覧のカスタマイズ

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

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

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

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

動作の確認

「アプリの設定」→ 「JavaScript / CSSでカスタマイズ」ページにて、前回の動作確認でダウンロードした「progressbar.js」および今回作成したカスタム JavaScript ファイルをアップロードし、「アプリを更新」します。

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

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

概要

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

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

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

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

一覧のカスタマイズ

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

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

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

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

動作の確認

「アプリの設定」→ 「JavaScript / CSSでカスタマイズ」ページにて、前回の動作確認でダウンロードした「progressbar.js」および今回作成したカスタム JavaScript ファイルをアップロードし、「アプリを更新」します。

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

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

概要

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

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

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

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

一覧のカスタマイズ

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

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

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

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

動作の確認

「アプリの設定」→ 「JavaScript / CSSでカスタマイズ」ページにて、前回の動作確認でダウンロードした「progressbar.js」および今回作成したカスタム JavaScript ファイルをアップロードし、「アプリを更新」します。

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

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

サブタスクの例：「仕様の作成」、「市場調査」、「関連部署へのヒアリング」、「概要図の作成」、「プレゼン日程の調整」

おわりに

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

参照サイト

Progress Bar.JS

この Tips は、2023年2月版 kintone で確認したものになります。