Backlogのボードでタスク管理を便利にするChrome拡張「Backlogアジャイル開発用拡張機能」を作った話

今回はBacklogで日々のタスク管理をするにあたって、もう少しここができればというようなもう一歩こういう機能があったらいいのにと思う機能をChrome拡張機能で作成しました。

# Backlogとは
チームの業務を見える化してタスク漏れやスケジュールの遅延を防ぐ
Backlogはシンプルな操作性と親しみやすい見た目で、誰でも直感的に使えるプロジェクト管理・タスク管理ツールです。
(Backlogの公式ページより引用)

https://backlog.com/ja/

# 今回作成した拡張機能
Chromeウェブストアに公開したものです。
機能については下記のリンク先や下の説明をご覧ください。

https://chromewebstore.google.com/detail/knkdlgnplcklgiebpefjfajgkimciknm

JBUGでの発表資料をまとめたスライド

https://speakerdeck.com/toranoana/jbug-jing-du-number-1-hotoniji-neng-zhui-jia-surukuo-zhang-ji-neng-wozuo-tutahua

# もう少しほしい機能ってなんだったのか
日々のタスクをボードで確認をしていました。元々は別のタスク管理ツールを使っていましたが課題管理と含めていくということでBacklogに集約しました。
その結果以前のツールではできていたいくつかの機能がなくなったことで、タスクの状況を一見して見ることができなくなったということがありました。

## 1.タスクの個別の進捗状況が課題を個別を開かないとわからない
Backlogの課題には予定と実績の時間を入れる部分があります。ただ、この数値は課題を開かないとみれないという問題があると思います。日々のタスクの状況を見るとするとその分だけ課題を開く時間というのが積もっていくことになります。
なのでボードに表示されてる内容で進捗をはっきりわかるようにすることで時間短縮を行えると思いました。

## 2.残りのタスクがどのくらいなのかわからない
1の内容に近いですが、一定期間でできるタスクを考えると予定の累積がどうなっているのか、その予定がどのぐらいできているのかを個別に計算していく必要があると思います。本来の目的は現在の進捗が進んでいるのか遅れているのかを判断することですが、そのための時間が多くかかると感じていました。

## 3.期限を過ぎているのか、期限間際なのか一見してわからない
ボードの課題にも期限日は表示されているが、期限切れ間際でもまだ余裕のある課題も表記が同じで期限日間際になっていることがはっきり意識できなかったと感じました。

# 作成した機能
ほしい機能を以下のような拡張機能を作成しました。
## 1.課題のタイトルに予定と実績を表示する
タイトルに()や[]で数値を囲んで予定と実績をボードでもわかるようにして、さらに予定や実績が記入されていることを背景色を変えてはっきりとわかるようにしました。
今回は予定が記入されていおれば青色、予定に対して実績が70%を超えている場合は黄色、予定に対して実績が超えてしまっている場合は赤色へ背景色変える機能にしました。
予定を入れただけで背景色を入れたのは、予定を入れていないものをしっかり意識する意味もあります。

## 2.状態ごとの予定と実績の合計を集計する
状態で集計することで、一定の状態にある課題が作業できる時間やキャパシティに対して適切なのか、実はキャパシティを超えてしまってタスクが消化できない状態なのかを一見して見えるようにしました。
スクラム開発をおこなっているとスプリントのタスクを整理する際に、課題ごとに開いて予定を足し上げるということが必要になったので、合計を行うことの時間の短縮や集計ミスがなくなることで効率化につながると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/6c9af717-a4f9-0749-d781-1f27fc8117e3.png)


## 3.期限日に合わせて枠線をつける
期限日の23:59まで24時間以内であれば黄色の枠、期限日を超えている場合は赤色の枠を表示するようにしました。
本来期限日を迎えているのに未着手の状態だったり、作業中だけど期限日を過ぎていることがはっきりとわかるようになると思いました。

期限日の23:59まで24時間ない場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/9f4cedc5-3f4e-643a-e584-565910caf25e.png)

期限日の23:59を超えている場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/000d5f8a-279d-8bba-3faa-da6928dafb6e.png)

※1.2.1で処理済みと完了の予定と実績の集計と枠線の追加を行わないようにしました
終わっていないタスクの状況を見るための機能なので処理済みと完了では不要なのと、処理済みと完了に移動させた課題に警告の赤線が出るのは不要に注目されてしまうため

## 4.ボードで表示されている担当者のフィルターを行える機能
バージョン1.3以降でボードの表示されている課題を複数の担当者でフィルターを行える機能を追加しました。
未設定の課題＋特定の担当者などの課題に絞り込むことができるようになります。
また絞り込みに伴い予定と実績もフィルターされた課題のみの数値が表示されるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/0dbc57f9-d328-80e9-ffce-552ec6bff5c8.png)

ボタンを押した後のモーダルはこちらのブログを参考にdialogタグを使用しています。

https://toranoana-lab.hatenablog.com/entry/2024/03/15/170000

※1.3.2で担当者のフィルターに選択した状態を一括で解除するボタンを追加しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/80ebd8e7-7046-3fb1-7929-22c6b7166fb4.png)

## 5.(カテゴリーで絞り込んだ状態限定)課題の割合を状態ごとに整理する機能
案件の中で課題を作ると細かくは管理できますが、細かくなると全体としてどの程度の課題が完了しているのか、残っている課題の数が全体から見るとどの程度の割合のタスクなのか一見してわからなくなることがあったので対策の機能を追加しました。(バージョン1.4以降)
使い方
1)カテゴリーを選択して絞り込むとボタンが有効になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/190c3173-4c1c-b163-25bf-4711219448b9.png)
⇩
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/cabfc3e6-4816-9a7f-5363-cf0be03264a7.png)

2)ボタンを押す
課題が状態ごとにどの程度あるかを円グラフと割合で表示します。
円グラフの切れている部分が完了している部分となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/2fa35724-9280-8c86-7acd-c7b8cb6a9c98.png)



少し画面表示のタイムラグの関係で表示が過去の値が表示されるバグがあります。
課題の表示が終わった後に再度ボタンを押してみてください。
（9/16時点）





# まとめ
今回はBacklogのボードにある内容だけでタスク管理を簡単にするための機能を作成しました。
今後はAPIを使ってどれだけ簡単にできるようにしていくかを考えていきたいと思います。

# 不具合及び修正
1)~v1.2.1まで　バージョン1.2.1までの拡張機能がボードのURLがbacklog.jpのみでbacklog.comに対応できていませんでした。バージョン1.3以降は両方のURLで動くようになっています。
2)~v1.3.0まで　期限日に対応した枠線がついた後、期限日を変更した後枠線が消えない問題の修正
3)~v1.3.0まで　複数担当者フィルターの候補の取得処理にグローバル変数を使用していた部分を変更