GitLabのissueをGanttLabを使ってガントチャート化する

業務でGitLab CEでレポジトリ管理、タスク管理を行っています。タスクの実績をガントチャートで見える化したいとの要望が出てきたので、GanttLab.com | A live Gantt chart for GitLab and GitHubをつかって実現してみました。

Note: GanttLab自体がGanttLab.com | A new GanttLab is out 🎉に書かれているようにfull rewrite中らしく、まだまだ常用するには足りない機能がたくさんあります。
ちなみにGitLab PreminumのSilver以上であれば、Roadmap機能が使えるので、導入されているのであればそちらを使用するのが良いかと思います。

GanttLabのインストール

GitLab CE自体は社内のサーバーにdockerで立てているので、Ganttlabも同サーバーに立てることとします。
インストールの手順は、docs/download-and-install.md · master · GanttLab / GanttLab · GitLabにあります。

docker imageが用意されており、カスタマイズが必要なら自分でbuildする必要がありそうです。今回はカスタマイズする必要はなさそうなので、ありがたくofficialのdocker imageを使うことにします。
docker-composeでGitLab CE自体を動かしているので、docker-compose.ymlにGanttLab用の設定を追加します。

docker-compose.yml

ganttlab:
  image: 'ganttlab/ganttlab:latest'
  restart: always
  ports:
    - '8282:80'

docker-compose upすれば:8282でアクセスできるはずです。

GitLab CEと連携させる

:8282にアクセスすると、下記のようなGitLabとの連携ダイアログが出てきます。

personal access tokenが必要なので、事前に取得しておきます。

取得方法は、Personal access tokens | GitLab
Scopeはapiにしておきます。(下記のスクリーンショットはread_apiになっています）現状GanttLabの方からwriteアクセスするようなことはなさそうなので、read_api権限で問題ないのですが、将来的にwrite accessが必要な機能Ability to edit start and due dates right from GanttLab (#10) · Issues · GanttLab / GanttLab · GitLabが実装されそうです。

使い方

How it works /README.md · master · GanttLab / GanttLab · GitLab

に詳しいですが、

StartDateは、下記のルールに基づいて表示され、上から順番に優先されます。

1. issue description内のGanttStartから始まる行
2. (GitLabのみ)milestoneの開始日
3. issueが作られた日

Due Dateは下記の通りでこちらも同じく上から順番に優先されます。

1. issue description内のGanttDueから始まる行
2. (GitLabのみ)issueのDue date
3. (GitLabのみmilestoneのDue date
4. issueのstart date

GitLabの場合、Due dateはあるものの、Start dateは独立して用意されておらず、Issue description内のGanttStart: を使うのが良さそうなので、issue templateに書いておくのが良さそうです。

Issue template 例

.gitlab/issue_templates/template.md

GanttStart: 2020-XX-YY
/due in 1 weeks

GitLab Quick Actions | GitLabを用いればdue dateの入力をちょっとだけ楽することができます。