Help us understand the problem. What is going on with this article?

ZenHubとは

More than 3 years have passed since last update.

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についてを参照してください。


ZenHubとは

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

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

ZenHubでできること

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

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

zenhub1.gif

地味に便利ですね。

タスクボード

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

スクリーンショット 2014-11-14 18.24.31.png

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

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

スクリーンショット 2014-11-14 18.27.41.png

そしてissueを作る。

スクリーンショット 2014-11-14 18.30.15.png

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

スクリーンショット 2014-11-14 18.31.57.png

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

zenhub2.gif

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

スクリーンショット 2014-11-14 18.34.01.png

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

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

スクリーンショット 2014-11-14 18.35.21.png

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

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

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

zenhub3.gif

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

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

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

issueに+1したり

スクリーンショット 2014-11-14 18.46.37.png

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

スクリーンショット 2014-11-14 18.39.10.png

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

スクリーンショット 2014-11-14 18.43.38.png

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

スクリーンショット 2014-11-14 18.44.22.png

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

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

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

スクリーンショット 2014-11-14 18.47.55.png

issueのページでExport Issueを押すと、Blob的なのでJSONを作って、ダウンロードできる。
https://github.com/geckotang/zenhub-demo/issues/1 をエクスポートしたものが以下。
使途不明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で使えるのかは調べてない
GeckoTang
CSSプログラマーです
http://geckotang.tumblr.com
pxgrid
バックエンドに外部サービスを利用した「Jamstack」でのWebアプリ設計・開発を得意としています。
https://www.pxgrid.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away