GitBucketのissueで作業量を設定できるプラグイン

== 2018/4/7 追記 ==========================================
本記事ではChrome拡張とDockerによって実現していましたが、
その後GitBucket Plugin化しました。

[gitbucket-issue-estimation-plugin](https://github.com/Takumon/gitbucket-issue-estimation-plugin)

[リリースページ](https://github.com/Takumon/gitbucket-issue-estimation-plugin/releases/tag/0.1)からjarファイルをダウンロードして`<GITBUCKET_HOME>/plugins/`に置くだけで導入可能です。
== =======================================================


Git Advent Calendarが埋まっていなかったので、大晦日ですが代わりに投稿させていただきました。

## はじめに
[GitBucket](https://gitbucket.github.io/)のマイルストーンの進捗率はissueの件数ベースなので、issueごとに作業量のバラつきがあったりすると現実的な進捗率と乖離してしまいます。

そこで今回はChrome拡張とDockerイメージを作成して、
issueに作業量を設定できるようにして、マイルストーンで作業量ベースの進捗率を確認できるようにしました。

Chrome拡張とDockerイメージはどちらも公開しているので簡単に導入できます。是非試してみてください。


* *Chrome拡張*
    * [gitbucket-issue-estimation-client](https://chrome.google.com/webstore/detail/gitbucket-issue-estimatio/hfnjaoikgpephpfbniemgfpkcbafgidj?hl=ja)
* *Dockerイメージ*
    * [gitbucket-issue-estimation-server](https://hub.docker.com/r/takumon/gitbucket-issue-estimation-server/)

## 導入すると
[GitBucket](https://gitbucket.github.io/)のissueで作業量が設定できるようになり、
![導入後_イシュー画面.png](https://qiita-image-store.s3.amazonaws.com/0/49915/61006bc9-2d82-f0b0-64a2-07923c7739c7.png)

マイルストーンで作業量ベースの進捗率が見れるようになります。
![導入後_マイルストーン画面.png](https://qiita-image-store.s3.amazonaws.com/0/49915/6a4b86d8-2973-ec84-86bc-6289e42bd666.png)

またissue一覧画面でも作業量を設定できるようになります。
![導入後_イシュー一覧画面.png](https://qiita-image-store.s3.amazonaws.com/0/49915/9c858e3b-5dc1-1424-f34f-5b26ac6e20fd.png)




## 導入手順
### 1. Docker側
GitBucketと同じネットワーク環境に作業量保存用のサーバを立てます。Dockerが導入されていることが前提です。

* docker-compose.ymlを作成（MongoDBのボリューム用にdocker-compose.ymlファイルと同階層にdbフォルダを作成してください）

```docker:docker-compose.yml
version: "3.3"
services:
  server:
    image: takumon/gitbucket-issue-estimation-server
    ports:
      - 3000:3000
    depends_on:
      - mongo
    links:
      - mongo
    environment:
      MONGO_URL: mongodb://mongo:27017/test
  mongo:
    image: mongo:3.5.12
    ports:
      - 27017:27017
    volumes:
      - ./db:/data/db
```

* docker-conpose.ymlがあるフォルダで下記を実行

```bash:
$ docker-compose up -d
```


### 2. GitBucket側
Chrome拡張をインストールする前に、GitBucketのトークンを発行してメモしておきます。

* GitBucketヘッダー右上アイコン > Account Setting を選択
![導入手順_GitBucketトークン発行_1.png](https://qiita-image-store.s3.amazonaws.com/0/49915/426761f7-c199-e19e-c619-a182dd05b0ea.png)
<br>

* 左メニュー Applicationsを選択し、Generate new tokenのToken descriptionにトークンの概要を記載、その後`Generate token`ボタンをクリック
![導入手順_GitBucketトークン発行_2.png](https://qiita-image-store.s3.amazonaws.com/0/49915/d186f702-f7db-521e-6d6d-edca3186d915.png)
<br>

* 発行されたトークンをコピー（後の手順で使います）
![導入手順_GitBucketトークン発行_３.png](https://qiita-image-store.s3.amazonaws.com/0/49915/0c804faf-fd13-80d2-8ce9-e504922bb54a.png)


### 3. Chrome Extension側
* Chromeを開きChromeウェブストアで[gitbucket-issue-estimation-client](https://chrome.google.com/webstore/detail/gitbucket-issue-estimatio/hfnjaoikgpephpfbniemgfpkcbafgidj?hl=ja)をインストール
![導入手順_GitBucket_拡張インストール_4.png](https://qiita-image-store.s3.amazonaws.com/0/49915/c3ceff98-1717-bef0-0de9-86176068a65c.png)
<br>

* 右上の「E」アイコンをクリック、下記情報を入力し`Save`ボタンクリック
    * **gitbucket-issue-estimation-server URL**
        * サーバ側の手順で立てたサーバのURL 例： `http://127.0.0.1:3000` 
    * **GitBucket Token**
        * GitBucket側の手順でメモしたトークン
![導入手順_GitBucketトークン発行_4.png](https://qiita-image-store.s3.amazonaws.com/0/49915/f6ab379b-a852-6eb4-f648-a14d7519f3eb.png)
<br>

## 具体的な仕組み
Docker側はMongoDBとNode.jsを使っていて、issueの作業量の検索登録・更新・削除APIを提供しているだけです。
Chrome拡張側で下記のように全体をコントロールしています。

**(1)** ・・・　GitBucketの画面からissueとマイルストーンの情報を取得、issueの作業量、作業量ベースの進捗率を画面に挿入
**(2)** ・・・　画面から取得したissueの情報をもとに詳細情報を取得
**(3)** ・・・　issueの作業量を検索・登録・更新・削除

![全体像.png](https://qiita-image-store.s3.amazonaws.com/0/49915/cad520c3-7d9c-fa47-2bb0-72c54f688236.png)



## Chrome拡張作成時にGitBucket APIまわりで躓いたこと
[GitBucketのAPI](https://github.com/gitbucket/gitbucket/wiki/API-WebHook)は[GithubのREST API v3](https://developer.github.com/v3/)に準拠していますが、一部実装されていない部分があったので、Chrome拡張作成時に躓きました。

### `state=all`が効かない
未解決issueと解決済issue両方をいっぺんに取得したかったのですが、GitBucketのAPIでは`state=all`が効きません。そのため`state=open`と`state=closed`を指定して２回に分けて取得する実装にしました。

#### `per_page`が効かない（1度に25件が最大）
GitBucketのAPIでは`per_page`（検索時の１ページあたりの件数）が実装されていません。
そのためマイルストーンに紐づくissue取得時は、１ページ目を検索して取得結果が25件の場合は次のページも検索するような実装にしました。

#### `closed_at`（クローズ日）が取得できない
Chrome拡張作成当初は、バーンダウンチャートを表示しようと思っていたのですが、issueのクローズ日が取得出来ないので断念しました。

#### ※ 参考にさせていただいたサイト
* [PythonでGitBucketのIssueをExcel出力する（その後）](https://qiita.com/5zm/items/b0b620cdeb9596108418#1%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E6%9C%80%E5%A4%A725%E4%BB%B6%E3%81%A7%E5%85%A8issue%E3%81%8C%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)
* [PythonでGitBucketのIssueをExcel出力する（API呼び出し編）](https://qiita.com/5zm/items/57d7abca8e0d447e326d#2-gitbucket%E3%81%AEapi%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6issues%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0)


## まとめ
本来こういう追加機能はGitBucketプラグインで作るべきなのかもしれませんが、今回はChrome拡張とDockerイメージで実現してみました。
Chrome拡張は任意の画面にJavaScriptやCSSを差し込めるので、既存のWebサービスををちょっと便利にするのにはうってつけですね。