LoginSignup
52
22

More than 5 years have passed since last update.

nulab の Backlog から カンバン・ガントチャート を作りました

Last updated at Posted at 2017-12-10

nulab の バックログ にカンバン機能がないので、作りました。 飽きるまで開発を続けていきます。
昔静的ページ上のJavascriptで作ったことがありましたが、今回は Kotlin と Spring Boot の組み合わせです。

デザインがものすごく適当だったり、掲載画像が最新でなかったりしますがご容赦ください。

コードは https://github.com/KenjiOhtsuka/backlog-board にあります。
https://backlog-board.herokuapp.com/project で動かしています。 (Heroku のフリープランなので、 眠っていることがあるかもしれません。)

準備

application-default.properties.sample をコピーして、
application-default.properties を作ります。
このファイルを使ってポート番号の指定ができます。

  • 例えば server.port=8081 と記述するとポート 8081 で起動できます。

起動

./gradlew bootrun -PactiveProfile=default

  • Ubuntu サーバにデプロイする例 (Spring Boot の基本のやり方から変わっていません)
    1. ./gradle build で jar ファイル を作る
    2. /var/lib/.... などの場所に置きます。
    3. sudo ln -s /etc/init.d/backlog /var/lib/... とシンボリックリンクを張ります。
    4. sudo chmod 777 /var/lib/... としてパーミッションを変更します。 これはもっと弱いパーミッションでもいいのかもしれません。(500でいけると思う)
    5. sudo service backlog start で起動します。

ログイン

Capture.PNG

スペースキーとAPIキーでログインできます。各ユーザはAPIキーを作る必要があります。

スペースキーとは xxxx.backlog.jp の xxxx の部分です。
APIキーは各ユーザで作ってください。

スペースキーとAPIキーさえあれば、どのサーバの情報でも取ってこれます。
なので全世界に公開して、使ってもらうっていう慈善活動もできます。 悪意をもってプログラムを変更すれば、スペースキーとAPIキーの組み合わせを取得できてしまうのですが。

プロジェクト一覧

project_list.jpg

Path : /project

ここですべての課題を見ることができます。
ここから、それぞれの課題のカンバン、課題リストへ遷移できます。

Trello風カンバン

Capture.PNG

Path : /project/XXX/board

Trello 風 にカンバンを作ってみました。
マイルストーンを選択したときにのみ表示されます。
マイルストーンとカテゴリから、該当する課題を取得して表示します。 もちろんドラッグアンドドロップできます。親課題と子課題が混在するとあれなので、子課題と単独課題が一覧に出力されるようになっています。

  • 各課題をクリックすると課題の説明が雑にポップアップで表示されます。
  • 見積工数・実績工数
    • 表示されている課題について、予定工数と実績工数の合計が、それぞれ上部に表示されます。
    • 見積工数、実績工数のところをクリックすると、簡単に時間を更新できるようになっています。
    • Closed にドロップするときに、 実績工数の入力をするためのポップアップが自動で開きます。 そこで入力がなければ Close にドロップできないようになっています。
    • Backlog 上 でも"時間"と表示されていますが、 私はこれをアジャイルでの見積もりポイントとして使用しています。
  • IssueType, Milestone, Category で絞り込むことができます。
    • 画像は古いです。
  • 画面を開いた直後は工数が正しく計算されていますが、画面で数値を変更すると計算がおかしくなる場合があります。

最近、 ToDo や Review はわかりにくいから Backlog に合わせて Open, Resolved にしたほうがいいという批判を受けました。。

未完了Issueのカンバン

backlog_board.jpg

Path : /project/XXXXX/unclosed_board

左側に親課題、右側に小課題が出てきます。
親課題のない課題は右側に出てきます。

ドラッグ&ドロップで、 状態を変えられます。

各課題の背景は、優先度に応じて変えています。
締め切りを過ぎると太字で表示されます。

課題リスト

issue_list.jpg

Path : /project/XXX/issue_list

終わっていない課題を一覧で見ることができます。
左側に親課題、右側に小課題。
親課題のない課題は、左側に表示されます。

ガントチャート

gantt.jpg

Path: /project/XXX/gantt

日付の設定されていない課題もガントチャートの項目として表示します。

バーの長さは次のようにしています。

  • 開始日、終了日がない場合 => 全期間にわたって表示
  • 開始日がなく、終了日がある場合 => 終了日まで表示
  • 開始日があり、終了日がない場合 => 期間は1日
  • 開始日、終了日がある場合 => その期間で表示

開始日、終了日のないものも表示しているので、全体の課題をみるのにはいいかなと。

バーをドラッグ&ドロップでうごかせます。
ドラッグ・アンド・ドロップで期間をリサイズできます。
保存はされませんがw

Github Repository

主な更新履歴

日付 内容
2017-12-07 カンバンと課題リストを作成
2017-12-12 プロジェクト一覧を作成し、取得できる全プロジェクトでカンバンと課題リストを表示可能にした
2017-12-16 ガントチャートを表示可能にした
2018-01-06 Trello風カンバンを追加した
2018-01-18 各ユーザでログインできるようにした
2018-02-01 ボードの Issue を、 IssueType で絞り込めるようにした。
2018-07-27 Heroku にデプロイ
2018-08-15 リダイレクト追加
2018-11-30 Kotlin 1.3, Spring Bppt 2.1.0, Gradle 5.0 にアップグレード

関連

その他

Contribute してくれる人いるといいですね・・・。
カンバン機能はnulabで開発中らしいですが。

52
22
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
22