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

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 ファイル を作る
    1. `/var/lib/....` などの場所に置きます。
    1. `sudo ln -s /etc/init.d/backlog /var/lib/...` とシンボリックリンクを張ります。
    1. `sudo chmod 777 /var/lib/...` としてパーミッションを変更します。 これはもっと弱いパーミッションでもいいのかもしれません。(500でいけると思う)
    1. `sudo service backlog start` で起動します。


## ログイン

![Capture.PNG](https://qiita-image-store.s3.amazonaws.com/0/25846/fdfc3ff1-c4c6-9e87-811a-b3ca71a823f9.png)

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

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

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

## プロジェクト一覧

![project_list.jpg](https://qiita-image-store.s3.amazonaws.com/0/25846/807c6a4a-796b-24c3-d29a-442f11cd52ca.jpeg)

Path : /project

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

## Trello風カンバン

![Capture.PNG](https://qiita-image-store.s3.amazonaws.com/0/25846/674e4c63-fef0-56e2-5c8b-52a5335fc400.png)

Path : /project/XXX/board

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

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

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

## 未完了Issueのカンバン

![backlog_board.jpg](https://qiita-image-store.s3.amazonaws.com/0/25846/2f7e547c-fac9-38a8-0596-c07c6ec9b044.jpeg)

Path : /project/XXXXX/unclosed_board

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

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

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

## 課題リスト

![issue_list.jpg](https://qiita-image-store.s3.amazonaws.com/0/25846/4fbbb626-dc72-05ed-99b1-c65547462fc3.jpeg)

Path : /project/XXX/issue_list

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

## ガントチャート

![gantt.jpg](https://qiita-image-store.s3.amazonaws.com/0/25846/722b7c41-3cf2-79ba-b398-67f2257f567e.jpeg)

Path: /project/XXX/gantt

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

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

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

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

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

## Github Repository

https://github.com/KenjiOhtsuka/backlog-board

### 主な更新履歴

| 日付 | 内容 |
|:--|:--|
| 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](https://backlog-board.herokuapp.com/project/FIRST/board) にデプロイ |
| 2018-08-15 | リダイレクト追加 |
| 2018-11-30 | Kotlin 1.3, Spring Bppt 2.1.0, Gradle 5.0 にアップグレード |

## 関連

* <cite>[BACKLOG の通知を SLACK に連携するスクリプト](https://improve-future.com/ja/send-backlog-notification-to-slack-with-google-apps-script.html)</cite>

## その他

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