【無料期間14日】Zenhubでissue運用について検討してみた

Githubを拡張するサービスZenhubを触りながらどんなことができるか業務で利用することを想定しながら検証していきたいと思います！

:::note info
【こんな方におすすめ】
・Zenhubを全く知らない方
・Zenhub導入を検討している方
:::

現在弊社ではGitlabを利用していますので、Gitlab比較しながら確認していきます。

## ZenhubとGithubを連携する
まずサイトに接続します。

https://www.zenhub.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/e60d4659-d78b-15dc-62e1-bc4c074be504.png)
右上あたりにある「Try for free」を押して順に画面に沿って進みます。


:::note warn
登録してから14日間は無料で使えるみたいですが、それ以降は課金が発生するので注意してください。
:::

Githubと連携すると下記のような画面に切り替わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/cc8f725e-45b7-2674-911c-29a1e074e4b3.png)

### ZenhubのChrome拡張をダウンロード
画面上あたりにエクステンションのダウンロードボタンがあるので押してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/22e36339-f9d2-5430-4a05-e839a9db5c79.png)

ChromeのエクステンションをダウンロードするとGithubにリダイレクトされます。
![名称未設定-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/2a54d7b8-0489-d120-511e-669245e44868.jpeg)

### Githubのリポジトリで表示を確認
GitHubとの連携時に登録したリポジトリに移動すると「Zenhub」の項目が追加されていると思います。
そちらをクリックすると下記のようなBoardが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/042cbc9a-b16b-45ff-9c24-03164fa260e1.png)

WebAppの場合は`z → s`でショートカットを開けるのですが、Github側だと操作できないようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/53c6ba68-4bb0-019d-ca59-5a0264570834.png)

:::note info
1アクション多くなりますが、Chrome拡張にショートカットを設定して「Manage oganization」からショートカットを開くこともできます！
サイドメニューに「Shortcuts」の項目があるのでそちらからでも確認はできます。
:::

### よく使うだろうと思うショートカット
よく使うことになりそうだと思うショートカットを抜粋して紹介します。

|キー|アクション|
|--|--|
|z　→　b　|Open Board|
|n → i|Create New Issue|
|shift + z |Open Repo Switcher (extension)|
|shift + w |Open Workspace Switcher|

「Open Repo Switcher」は登録したリポジトリを切り替えられます。

「Open Workspace Switcher」はWorkspaceを切り替えられます。
Workspaceは1つのリポジトリに複数作ることができます。

:::note info
登録するリポジトリやラベルでフィルタをかけたものを表示できるのでissueの管理を分けたり、包括的に全てのプロジェクトissueを確認するには便利だと思いました!
:::

## Boardの操作
Boardでの基本操作を確認していきます。

### フィルターや表示の変更
listの上部にあるメニューでフィルターやissueのカードの表示設定ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/647649dc-f8b6-1387-176f-a25a8785f699.png)

:::note info
フィルターについてはGitlabよりも操作性が良い気がしました！
GitlabはZenhubのようにフィルターが分かれておらず、検索窓をクリックすることでフィルタリングする項目を設定していきます。
:::

「New Github Issue」の隣にあるアイコンを押すとBoardの表示設定が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/2fcc3b75-6b26-a484-7bc2-c9a1b94221d7.png)


### issueの追加やその他操作
各リストの右上にあるプラスでissueの追加し、その左にあるメニューを開くとリストでの操作を実施できるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/42e0b11d-b0f2-7b3f-5b4c-33b7b3f842b8.png)

## issueの編集
issueカードをクリックして編集できる項目をサラッと確認してみます。
気になった項目だけ抜粋していきます。

### Estimate
チームでプランニングポーカーをしている方は非常に便利な項目です。
issueの対応に必要な工数を入力できます。

プランニングポーカーに「hatjitsu」を使われている方も多いと思いますが、Zenhubはならissue上でプランニングポーカーができるので別のツールを使う必要がありません。

https://hatjitsu.toolforge.org/

### MilestoneとSprints
MilestoneはGithubの機能、SprintsはZenhubの機能のようです。
GitlabのMilestoneに近いのはSprintsの方で週のデータを集計、表示してくれます。

:::note warn
Githubの機能だったり、Zenhubの機能だったり使うサービスは1つでも運用時に混乱する原因になるかもしれないのでできるだけZenhubの機能の中でタスク管理や集計を簡潔できる方がいいのかと思いました。
:::

マイルストーンについての詳細はDocsをご覧ください。

https://docs.github.com/ja/issues/using-labels-and-milestones-to-track-work/creating-and-editing-milestones-for-issues-and-pull-requests

## 長い期間開発する場合はProjectでまとめて1つ1つの要素はEpicにしておく
Zenhubにはグルーピングの単位が色々ありますが、機能や施策によっては長期間開発するものもあると思います。

スプリントごとにissueを作成してやるのでもいいですが、まとまって確認できた方が実装漏れもなくせますし、のちに振り返る場合も見やすと思います。

また、「Roadmap」という機能もあるのでスケジュール管理もGithub上でできるので、**これまでスプレットシートや他のツールを利用していたなら全てGithubに集約できので業務効率が良くなる可能性がある**と考えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/4311845b-8708-7913-48c5-defc695b7f64.png)

## Workspaceを利用するならWorkflowsも設定しておきたい
Workflowsを設定しておくとWorlspace同士のissueの移動を連携できます。
仮に下記のように設定したとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/a6c9d170-000d-583b-4848-1873c427f48e.png)

issueを移動すると作成した別のWorkspaceでもissueが同期して移動されます。
![isuue_move.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/501a0367-f927-a425-e1b3-c1555c15f626.gif)

少し変更を加えてみます。
別で作ったWordspaceでは「Icebox」「Product Backlog」「Sprint Backlog」「In Progress」のステータスのものを全て「In Progress」として扱いたい場合（そんなことないと思いますが…）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/89dcb78f-228d-e2d8-04bc-bb95ffd3d92f.png)

issueを「Icebox」に移動すると「hikariDev_2」のworkspaceでは設定したとおり「In progress」にissueが移動されます。
![issue_move.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/7abb1602-cf35-2778-8a90-4fc8e8d02690.gif)

## Slackとの連携
できればissueのステータスが変更されれば自動で通知が来たり、自動でテストの依頼が送られるなどできたらいいですよね…できるだけ開発者が開発に集中できる環境を作りたいと思っています。

そこでSlackとの連携方法を調べてみました。
参考にした記事はこちらです。

https://www.vektor-inc.co.jp/post/github-slack-2018/


下記にアクセスしてSlackとGitlabを連携させます。

https://slack.github.com/

手順に沿って連携したいSlackのチャンネルなどを入れるとSlackの方に通知が来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/f5ab7709-e9aa-5ffa-a402-a70a2fedf290.png)

「Connect Github account」をクリックすると別タブに認証コードが表示されます。
認証コードをコピーして「Enter code」をクリック認証コードを入力します。
![名称未設定-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/59b953df-5721-b278-f60a-364719453d10.jpeg)

Slackのチャンネルの設定でGithubのアプリを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/6b0627d6-4bc4-b20a-9e17-c7ed37740cd0.png)

Githubのアプリを追加したらコメントのところで下記のコードを実行します。
```
/github subscribe GitHubのオーナ名/リポジトリ名
```

アプリがリポジトリにインストールされていなかったら下記のような表示が出るので指示に従って入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/1aad7900-f7b1-7744-e878-48a42e4cc788.png)

完了すると通知を受け取れる準備が整ったようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/19f2b21b-2e0f-c03b-c1ec-b2600c7f7e79.png)

試しにコミットやプルリクエストを作成してみると下記のように通知が来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/db5e5c75-102d-efc2-0694-aae5401ce780.png)

:::note info
コミットされるたびに通知されるのは微妙ですが、メンバーの作業ログや進捗、タスク実績の計測などを正確に把握・計測したい時なんかは役立ちそうだと思いました！
:::

詳細の設定方法はこちらに記載がありました。

https://github.com/integrations/slack#customize-your-notifications

:::note warn
issueの移動を検知してSlackにメッセージを送信したり、Slackのワークフローと連携させたりしたかったですが、現時点ではよくわかりませんでした…。
調べてわかったら記事にしたいと思います。
:::

## 【まとめ】Zenhubを触ってみて
弊社ではGitlabのBoard機能を利用していますが、フィルター機能やその他機能に関してもGithub+Zenhubの方が使い勝手が良さそうだと言うのが所感です。

機能の名称等は若干異なりますが使い勝手もGitlabと大きく変わらない印象を受けました。
仮に移管する場合にもそれほど学習コストはかからないかと思います。

:::note info
Slackと上手く連携してこれまで手作業でやっていた通知や依頼が自動化できるとかなり幸せだと思います。
もう少し深く調査して色々試してみたいと思います！
:::