スクラム開発で使うバーンダウンチャートの管理をGitで行えるようにしたいと思い、リポジトリをForkしてGithub Pagesでみられるツール(https://k8shiro.github.io/GithubBurnDownChart/index.html )を作りました。
リポジトリ: https://github.com/k8shiro/GithubBurnDownChart
背景
スクラム開発では、バックログアイテムの消化の見通しにバーンダウンチャートが使われることが多いと思います。
このバーンダウンチャートの管理方法に悩んでいて、
- Excel
- 使いたくない、差分管理できないしファイルの共有が面倒
- チケット管理ツールに付いているやつ(OpenProjectを使っている)
- カスタマイズ性が悪い、微妙にツールの想定と違う使い方をしていて付属のバーンダウンチャートが使えない
- googleスプレッドシート
- これで良いのだが、会社の都合で使えない
といった状況で、うまい管理方法を探していました。
結局、要件としては
- チームで共有しやすい
- 差分管理ができる
- カスタマイズできる
- 表示できる
なのですが、これを満たす良い方法が見つからなかったので自分でcsvをGitで管理し、これをGithub Pagesでグラフ表示できるようにしてみました。
作ったもの
以下のようにのようにGithub Pagesでグラフがみられるようになります。実際のページは
こちらです。
このグラフでは
- 理想線 : スクラム開始時のバックログアイテムがスクラム終了時点で全て消化された場合の線(リリース時の0になる)
- 計画線 : 開始時の計画通りに進んだ時のバーンダウンチャートの変化を表す線です
- 実績線 : スプリントごとに更新される実際の残りのバックログアイテムのポイント合計の線です
- 完了済み : 実績線は残りの合計ですが、こちらは完了済みのアイテムの合計ポイントです(バーンアップ)
が表示され、またcsvの内容がグラフ下のテーブルで確認できます。
使い方
- こちらのGithubのリポジトリを複製してください(cloneして自前のGithubリポジトリにpush or Fork)
- 1で作成した自分のリポジトリでGithub Pagesの公開設定をしてください
- リポジトリの Settings > Options > GitHub Pages でSourceをmainブランチにしてsaveするだけ
- リポジトリ内にあるburndownchart.csvを更新してPushしてください(csvのフォーマットは後述)
※ Github Pagesの公開設定・更新後、反映まで時間がかかることがあります。
※ リポジトリ名をGithubBurnDownChart以外にした場合、csvの読み込みpathを修正する必要があります。burndownchart.jsの下部のpathを修正してください。
burndownchart.csvの更新
上記のGithub Pagesの設定を行ったら、後はスプリントごとにburndownchart.csvを更新していくだけです。
初回は開始前〜リリースまでの枠(下表の0回目〜7回目)を作り、0回目に完了アイテム合計を0、それ以外をバックログアイテムのポイント合計(下表だと200)を入れます。また、リリース(下表では7回目)に計画線にリリース時の残る予定のポイント(下表では60)と理想線に0を入れます。
以降はスプリント終了ごとに更新します。スプリント終了時点での終了したアイテムのポイント合計を完了アイテム合計に(下表1回目なら18)、バックログに残っているアイテムのポイント合計を実績線に(下表なら182)を追記します。計画線と理想線は空白で大丈夫です。
スプリント | 完了アイテム合計 | 実績線 | 計画線 | 理想線 |
---|---|---|---|---|
0回目(開始前) | 0 | 200 | 200 | 200 |
1回目 | 18 | 182 | ||
2回目 | 38 | 162 | ||
3回目 | 58 | 152 | ||
4回目 | 80 | 130 | ||
5回目 | ||||
6回目 | ||||
7回目(リリース) | 60 | 0 |
仕組み
src/burndownchart.jsで大体の処理を行っています。アップロードしたcsvをXMLHttpRequest()で取ってきてcsvテキストを配列化、Chart.jsでグラフ描画しているだけです。
まとめ
Gitでcsvを管理し、これをGithub Pagesでグラフ表示できるようにしました。後はGitHub Actions等でcsv生成もすれば完全自動化できそうです。