GitHubとGitLabのIssueをガントチャートで表示できるSPA作った

セールスポイント

• GitHub/GitLabのIssueを無料で、環境なしですぐにガントチャート化できる！
• GitHub/GitLabに対してブラウザからREST APIをたたくだけなので、ブラウザからGitHub/GitLabにアクセスさえできれば利用できる！
• セルフホストしているGitLabサーバでも利用可能！
• asigneeとラベルでフィルタでき、依存関係が表せる！
• フィルタ条件はURLパラメータに保持しているので、Aチームのタスクなどをラベルを用意してブックマークすればチームごとの進捗管理などでも利用可能！
• issueは開始日、期限日の情報を設定可能、ソートも可能

背景

社内でGitlabを使って開発を回しているのですが、SIerに勤めているとやはり進捗管理の要望が強く上がってきます。普通はGitHubやGitLabでGit管理する場合、JiraやRedmine,Backlogなどのチケット管理ツールを利用して進捗管理や課題管理を行うのですが、そういった環境をすぐには用意できない場合もあります。そんな中でGitHubやGitLabのAPIを利用してガントチャートを作れないかと思い至ったのが開発のモチベーションです。

作りたいもの

以下を想定してGitHubとGitLabのIssueをガントチャートで表示できるものができないかと考えました。

5W1H	このOSSの場合
Who（だれが）	SIer
When（いつ）	ウォーターフォール開発など
Where（どこで）	プロキシ認証など制約のある社内環境
What（なにを）	GitHub/GitLabのIssue
Why（なぜ）	チケット管理ツールなしでの進捗管理をするため
How（どのように）	ガントチャートで、バックエンドなしで

類似OSS

以下先人たちです。ラベルでフィルタリングできなかったり、自前でHostingしないといけなかったりで私たちは利用を断念しました。※セルフホストのGitLabで利用したいというのが一番大きかったです。

• GanttLab: https://github.com/ganttlab/ganttlab
• gh-issues-gantt: https://github.com/ericabouaf/gh-issues-gantt

このテーマで深く考察している海外記事があったので参考に載せておきます。

作ったもの

Demoはこちら

https://lamact.github.io/react-issue-ganttchart/?giturl=https%3A%2F%2Fgithub.com%2Flamact%2Freact-issue-ganttchart&labels=
※トークンが必要です。下記をご覧ください。

Githubはこちら

使い方

1. 準備するもの

Gitレポジトリ(URL) とパーソナルアクセストークンを用意してください。

①GitHub/GitLabレポジトリのURL

(github.com / gitlab.com / your.self-host.gitlab.com)

ex) https://github.com/lamact/react-issue-ganttchart

②パーソナルアクセストークン

GitHub: https://github.com/settings/tokens/new

Scopes: public_repo, write:discussion, read:org
手順: https://docs.github.com/ja/github/authenticating-to-github/creating-a-personal-access-token

GitLab: https://gitlab.com/-/profile/personal_access_tokens

Scopes: api
手順: https://gitlab-docs.creationline.com/ee/user/profile/personal_access_tokens.html#creating-a-personal-access-token

2. 設定・使い方

セルフホストしない場合、Github Pagesにホスティングしてあるこちらを使ってください。

設定項目	説明
Git Repository URL *	①GitHub/GitLabレポジトリのURL (上記で準備)
Access Token	②パーソナルアクセストークン (上記で準備)
filter by labels	Issueのラベル (複数選択可/プルダウンで候補リスト表示)
Asignee	IssueのAsignee (プルダウンで候補リスト表示)

ライセンス・セキュリティなど

• ライセンスはMITではなく、 GPL-2.0なのでご注意ください。※商用利用は可能です。

• このアプリはSPA(Single Page Application)です。ブラウザ上のみで動くため、外部のサーバに対してIssueの内容やトークンが送信されることはありません。フィルタクエリはURLパラメータに、トークンはCookieに保持されます。Demoサイトのgit_urlを自プロジェクトのURLに変更すればそのままセキュアに利用可能です。それでもセキュリティが気になる人は自前でHostingも可能なのでそちらでお願いいたします。

テクニカルな小話

• React Hook初めて使ってみましたが、動作が軽快で気に入りました！
• フィルタクエリをURLに保持する実装はかなり大変でしたが、この機能でブックマークしておけば毎回フィルタを入れる必要がなくなったのでお気に入りです。
• ガントチャート表示にはDHXを利用しました。機能やドキュメントが多く拡張もしやすかったです。ただ、Pro版でないと制約も多く、ガントチャートの左横のカラムの幅を変えられなかったり、オブジェクトの追加ができなかったりと細かいところで引っ掛かりました。
• 開発にはGit Podを利用してみました。vscodeとまったく同じ操作感をブラウザ上できるので感動しました。※月50ｈまでの制限があります。
• 開始日、期限日、progressなどはissueの説明欄にyamlで書き込むようにしてます。
• テストコード書いてますが、カバレッジ追いついてません、申し訳ないです。。。
• 趣味の延長で時間もなかったため、もろもろコードに至らない点が多くてすみません。Pull Requestお待ちしております。

最後に

Star,Pull Requestお待ちしております!