ZenHubとは

2015/12/03追記：待望のFirefox対応をしました！今日現在は、 https://www.zenhub.io/firefox からアドオンをインストールすることができます！
また、Firefox版の公開を記念して、初月割引や、ZenHubグッズ（！）がもらえるプロモーションコードがあるので、ZenHubを使ってみようか迷っていた方は、プロモーションコードを利用するとお得に始めることができます。

ZenHub公式ブログの記事はこちら
https://www.zenhub.io/blog/firefox-fans-can-now-use-zenhub-with-their-favourite-browser/

---

2015/07/01追記：このエントリー中のスクリーンショットは、古いバージョンのZenHubのものです。追記時点での最新の機能については[ZenHub2.0について](http://qiita.com/GeckoTang/items/1402c48181c4663e68c5)を参照してください。

---

# ZenHubとは

専用の拡張をインストールすると、GitHubそのものが拡張される。
GitHubに足りないアジャイルらしさを組み込むもの。

- リポジトリを簡単に切り替えられる機能
- タスクボード（カンバン）
- ファイルアップロード機能をより便利にする
- コードのコメントやイシューのコメントに+1できる機能
- issueの情報をJSONファイルでエクスポートできる謎機能

## ZenHubでできること

### リポジトリを簡単に切り替えられる機能

リポジトリ名の横にボタンが増え、クリックするとリポジトリ一覧が表示される。
インクリメンタルサーチでリポジトリを簡単に切り替えることができる。
Ctrl+nで下候補に移動、Ctrl+pで上候補に移動できる。

![zenhub1.gif](https://qiita-image-store.s3.amazonaws.com/0/29064/8939ecc4-f2aa-2037-0991-c9a104323567.gif "zenhub1.gif")

地味に便利ですね。

### タスクボード

リポジトリのページの右側にBoardsというメニューが増えている。
それをクリックすると以下の様なページがロードされる。

![スクリーンショット 2014-11-14 18.24.31.png](https://qiita-image-store.s3.amazonaws.com/0/29064/0c2ea8a0-7af7-67f7-0fcd-11a5f09b524a.png "スクリーンショット 2014-11-14 18.24.31.png")

自分の好きなフローを選択する。無難なのは真ん中のやつか。
もしくはCreate your ownから自分で作ることもできる。
なお、このラベル（BacklogとかTo Doなどはあとから変えられる）

そして、実際に作った画面は以下である。

![スクリーンショット 2014-11-14 18.27.41.png](https://qiita-image-store.s3.amazonaws.com/0/29064/94236e75-07b4-406e-761c-04afa7c0b31e.png "スクリーンショット 2014-11-14 18.27.41.png")

そしてissueを作る。

![スクリーンショット 2014-11-14 18.30.15.png](https://qiita-image-store.s3.amazonaws.com/0/29064/ed5ed502-8e29-21bc-5860-a3e7ff779a2e.png "スクリーンショット 2014-11-14 18.30.15.png")

右側にPipelineというのがあるので、デフォはBacklogになっている（ここでは残務）が、進行中であれば別のものを選択したりできる。

![スクリーンショット 2014-11-14 18.31.57.png](https://qiita-image-store.s3.amazonaws.com/0/29064/998d03c4-e426-8102-844c-b2630a2ab2e0.png "スクリーンショット 2014-11-14 18.31.57.png")

issueが作成されていれば、PivotalやHuBoardのように、issueが一覧される。
移動したりラベルを変えるとリアルタイムで反映される。この並び順はおそらくZenHub側に保存される。

![zenhub2.gif](https://qiita-image-store.s3.amazonaws.com/0/29064/bf5981f4-5531-e1dc-6dcf-c519e90f1a2f.gif "zenhub2.gif")


必要があればカラムを追加したり削除したりする。

![スクリーンショット 2014-11-14 18.34.01.png](https://qiita-image-store.s3.amazonaws.com/0/29064/afb34302-b845-8da4-c933-be21be585742.png "スクリーンショット 2014-11-14 18.34.01.png")


カラムを削除した際に、そのカラムにあったissueはBacklogへ移動する。

HuBoardのようにここからissueの状態（assignやlabel）を変更することはできない。
issueをクリックして該当issueが別窓で開くのでそこから変えなくてはいけないのが面倒か。

![スクリーンショット 2014-11-14 18.35.21.png](https://qiita-image-store.s3.amazonaws.com/0/29064/724fa50d-c3aa-6d12-ce45-525dbf9357a8.png "スクリーンショット 2014-11-14 18.35.21.png")

また、LabelsやMilestone、Assigneeなどでissueをフィルターできるのは便利。

### ファイルアップロード機能をより便利にする

これはこれで便利な機能。
GitHubのコメント欄にドラッグアンドドロップでファイルを添付できるようになる。
通常は、PNG/GIF/JPGしかアップロードできないのですが、ドラッグアンドドロップでアップロードする機能を使うと、どんなファイルでもアップロードできるようになる。

![zenhub3.gif](https://qiita-image-store.s3.amazonaws.com/0/29064/e6d09151-9857-e8d4-e5b4-252e92706200.gif "zenhub3.gif")


通常は ``https://cloud.githubusercontent.com`` にアップされるのですが、そこから上げた場合は``https://files.zenhub.io/``以下にアップされる。そしてそこへのリンクが作られる。

一応httpsであるのでまぁ、問題はないのかな。依存する先が増えちゃう気はするけど。
便利っちゃあ便利。アップロードできる容量などについては調べていない。

### コードのコメントやイシューのコメントに+1できる機能

issueに+1したり

![スクリーンショット 2014-11-14 18.46.37.png](https://qiita-image-store.s3.amazonaws.com/0/29064/09c45fd9-ab82-faa5-8985-01f4a427e54e.png "スクリーンショット 2014-11-14 18.46.37.png")

issueのコメントを+1したり

![スクリーンショット 2014-11-14 18.39.10.png](https://qiita-image-store.s3.amazonaws.com/0/29064/237e6486-aca2-9327-685b-b93890ba77ec.png "スクリーンショット 2014-11-14 18.39.10.png")

PRsのコメントに対して+1したり

![スクリーンショット 2014-11-14 18.43.38.png](https://qiita-image-store.s3.amazonaws.com/0/29064/d9e36b77-becc-33b3-6fff-1a2c46afaa24.png "スクリーンショット 2014-11-14 18.43.38.png")

+1されたことが通知されたり（特にポップアップとかバッジで通知されたりはしない）

![スクリーンショット 2014-11-14 18.44.22.png](https://qiita-image-store.s3.amazonaws.com/0/29064/6509f498-1fa4-5fe2-2ef4-d99e9ff37e6c.png "スクリーンショット 2014-11-14 18.44.22.png")


- +1したデータはZenHub側に保存されている。
- +1した相手に対して、Chromeの拡張を通じて+1したことが通知される

コメントで +1 したり絵文字で表現してた部分だったので、これは地味に良いと思う。

### issueの情報をJSONファイルでエクスポートできる謎機能 

![スクリーンショット 2014-11-14 18.47.55.png](https://qiita-image-store.s3.amazonaws.com/0/29064/40609c68-9f16-1156-2901-41b3e19fe870.png "スクリーンショット 2014-11-14 18.47.55.png")

issueのページでExport Issueを押すと、Blob的なのでJSONを作って、ダウンロードできる。
https://github.com/geckotang/zenhub-demo/issues/1 をエクスポートしたものが以下。
使途不明JSON。

```json
[
 {
  "url": "https://api.github.com/repos/geckotang/zenhub-demo/issues/1",
  "labels_url": "https://api.github.com/repos/geckotang/zenhub-demo/issues/1/labels{/name}",
  "comments_url": "https://api.github.com/repos/geckotang/zenhub-demo/issues/1/comments",
  "events_url": "https://api.github.com/repos/geckotang/zenhub-demo/issues/1/events",
  "html_url": "https://github.com/geckotang/zenhub-demo/issues/1",
  "id": 48761532,
  "number": 1,
  "title": "Qiitaに記事を書く",
  "user": {
   "login": "geckotang",
   "id": 683965,
   "avatar_url": "https://avatars.githubusercontent.com/u/683965?v=3",
   "gravatar_id": "",
   "url": "https://api.github.com/users/geckotang",
   "html_url": "https://github.com/geckotang",
   "followers_url": "https://api.github.com/users/geckotang/followers",
   "following_url": "https://api.github.com/users/geckotang/following{/other_user}",
   "gists_url": "https://api.github.com/users/geckotang/gists{/gist_id}",
   "starred_url": "https://api.github.com/users/geckotang/starred{/owner}{/repo}",
   "subscriptions_url": "https://api.github.com/users/geckotang/subscriptions",
   "organizations_url": "https://api.github.com/users/geckotang/orgs",
   "repos_url": "https://api.github.com/users/geckotang/repos",
   "events_url": "https://api.github.com/users/geckotang/events{/privacy}",
   "received_events_url": "https://api.github.com/users/geckotang/received_events",
   "type": "User",
   "site_admin": false
  },
  "labels": [],
  "state": "open",
  "locked": false,
  "assignee": {
   "login": "geckotang",
   "id": 683965,
   "avatar_url": "https://avatars.githubusercontent.com/u/683965?v=3",
   "gravatar_id": "",
   "url": "https://api.github.com/users/geckotang",
   "html_url": "https://github.com/geckotang",
   "followers_url": "https://api.github.com/users/geckotang/followers",
   "following_url": "https://api.github.com/users/geckotang/following{/other_user}",
   "gists_url": "https://api.github.com/users/geckotang/gists{/gist_id}",
   "starred_url": "https://api.github.com/users/geckotang/starred{/owner}{/repo}",
   "subscriptions_url": "https://api.github.com/users/geckotang/subscriptions",
   "organizations_url": "https://api.github.com/users/geckotang/orgs",
   "repos_url": "https://api.github.com/users/geckotang/repos",
   "events_url": "https://api.github.com/users/geckotang/events{/privacy}",
   "received_events_url": "https://api.github.com/users/geckotang/received_events",
   "type": "User",
   "site_admin": false
  },
  "milestone": null,
  "comments": 1,
  "created_at": "2014-11-14T09:32:35Z",
  "updated_at": "2014-11-14T09:38:47Z",
  "closed_at": null,
  "body": "- [x] 説明用のリポジトリを作る\r\n- [ ] 画像を公開できる画像にする",
  "closed_by": null,
  "comments_list": [
   {
    "url": "https://api.github.com/repos/geckotang/zenhub-demo/issues/comments/63032141",
    "html_url": "https://github.com/geckotang/zenhub-demo/issues/1#issuecomment-63032141",
    "issue_url": "https://api.github.com/repos/geckotang/zenhub-demo/issues/1",
    "id": 63032141,
    "user": {
     "login": "geckotang",
     "id": 683965,
     "avatar_url": "https://avatars.githubusercontent.com/u/683965?v=3",
     "gravatar_id": "",
     "url": "https://api.github.com/users/geckotang",
     "html_url": "https://github.com/geckotang",
     "followers_url": "https://api.github.com/users/geckotang/followers",
     "following_url": "https://api.github.com/users/geckotang/following{/other_user}",
     "gists_url": "https://api.github.com/users/geckotang/gists{/gist_id}",
     "starred_url": "https://api.github.com/users/geckotang/starred{/owner}{/repo}",
     "subscriptions_url": "https://api.github.com/users/geckotang/subscriptions",
     "organizations_url": "https://api.github.com/users/geckotang/orgs",
     "repos_url": "https://api.github.com/users/geckotang/repos",
     "events_url": "https://api.github.com/users/geckotang/events{/privacy}",
     "received_events_url": "https://api.github.com/users/geckotang/received_events",
     "type": "User",
     "site_admin": false
    },
    "created_at": "2014-11-14T09:38:47Z",
    "updated_at": "2014-11-14T09:38:47Z",
    "body": "GIFアニとかで説明するといい部分もあるかも"
   }
  ]
 },
 {
  "textStatus": "success",
  "status": 304
 }
]
```


## 感想

- ZenHubがいい感じにGitHubを拡張してくれるので良い。
- カンバンとかはHuboardでも代用できるけど、よく見るGitHubにカンバンができるのでまとまってていい
- GitHubのマークアップとかが変わると大変そう
- JSONは何に使うのかわからない（issueごとにしか保存できないし）
- GHEで使えるのかは調べてない