SiG Staff Blog

福井と金沢にある株式会社SIG 総合研究所で働きたい方、ご連絡ください。

ヌーラボ社のBacklogの課題を見える化(チャート)するツールを作成しました

モチベーション

Backlogのバーンダウンチャートだけだと、今後のスケジュールがどう移り変わるか、どの人が負担が多いかなどが分かりにくかったので、 Open APIで課題データを取得して、チャートにしたかった。 あと、Nuxt.jsの本を買ったから使ってみたかったというのが本音である。

使い方

  1. Node.jsをインストールします。 nodejs.org
  2. ソースをCloneします。 git@github.com:beeflim/backlogBI.git
  3. ライブラリをインストールします。 npm install
  4. テスト用サーバーを起動します。 npm run dev
  5. http://localhost:3000 にアクセスします。

画面の説明

1. TOPページ

f:id:Bee_Flim:20190417123507p:plain
TOPページ
各表の説明と仕様に当たっての注意事項が書いてあります。

  1. 設定画面

    f:id:Bee_Flim:20190417123924p:plain
    設定画面
    左上のボタンを謳歌するとこの画面が開きます。 スペースIDとAPIキーを設定してください。

  2. プロジェクトの選択

    f:id:Bee_Flim:20190417124747p:plain
    プロジェクト選択
    自分が参加しているプロジェクトの一覧が表示されるので、チャート表示したいプロジェクトを選択してください。

  3. マイルストーンの選択

    f:id:Bee_Flim:20190417124934p:plain
    マイルストーンの選択
    選択したプロジェクトのマイルストーンが表示されるので、チャート表示したいマイルストーンを選択したください。

  4. チャートの選択

    f:id:Bee_Flim:20190417125300p:plain
    チャート
    表示したいチャートを選択します。

  5. 各種チャート

    1. 進捗率(全体)

      f:id:Bee_Flim:20190417125418p:plain
      f:id:Bee_Flim:20190417125847p:plain マイルストーン全体の現在の進捗が折れ線グラフで表示されます。 現在時点で完了しているチケットで、予定と実績の差の平均を計算し、今後の進捗がどのように進むかをざっくり表示してくれます。 緑色と赤色の領域に入ると、安全、危険がわかります。(アバウトな計算で表示しているので参考程度に)

    2. 進捗率(個別) f:id:Bee_Flim:20190417125937p:plain 進捗率(全体)を担当者別に表示します。 予想の線を参考に、どの人に余裕があるか、どの人に余裕がないかがわかります。

    3. チケット消化状況 f:id:Bee_Flim:20190417130242p:plain 現在時点でのチケットの消化量を表示します。 完了日が未来のものは別の棒で表示します。 遅延をしているのか、隠れ前倒し(先のタスクを終わらせている)なのか、などがわかります。 隠れ前倒しが起きている時は何かトラブルが起きている兆候なので注意するなどができます。

    4. 複合評価(個別) f:id:Bee_Flim:20190417130518p:plain 折れ線グラフと棒グラフなどから、メンバー別に現在の状況を評価して、コメントが表示されます。 コメントはざっくりなので、参考程度までに。

作ってみて

Nuxt.jsを使うと、簡単にWEBサイトが作れるなと言う感想を持ちました。 Backlog APIでやりたいように取れないときがあったので、ちょっと面倒だった。

総合的には楽に作れたのでNuxt.js学んでみようかなと思います。 vue.js周りは日本語ドキュメントが充実していていいですね。

また機能を追加したいと思っているので、PRやIssueを是非お願いします。

github.com

この本を読んで作りました