GitHopperというGithub レポジトリのビュアーアプリをElectronで作った

このエントリーはElectron Advent Calendar 2016 - Qiitaの4日目です。

GitHopperというGithub レポジトリ(以下、repo)のビュアーアプリをElectronで作った。
このアプリは特に、業務などで複数のプロジェクトを開発/レビューしている人ほど役立つと思います。

突然のレビュー依頼などで、作業中ではないrepoのコードをサッと見たい時、従来のwebブラウザだと新しいタブをその度に開いてGithubを開いているタブがどんどん増えるかもしれません。あるいは、一つのタブの中で複数のrepoを行ったり来たりしているかもしれません。

しかしこのアプリを使うと、レビューが済んでサイドバーから元のrepoを選ぶと、元々見ていたページがそのまま表示されるので元の作業にサッと戻れます。

(その他のスクショはREADMEを参照)

1年ほど実際の業務で使用しながら細かくブラッシュアップしましたので、そこそこ使いやすいものになっているはずです。

主な機能

• 自分が所有しているrepoがサイドバーに一覧表示される
  • 所属してるOrganizationのrepoも表示されます
  • ある特定の一つのOrganizationのrepoのみ表示する事も可能
  • アクティブではないなどで、見る必要のないrepoはサイドバーへの表示を除外出来ます
• サイドバーから任意のrepoに移動可能
  • 各repoの表示状態はrepoを切り替えても維持されます
• 自分が所有していない外部の公開repoもサイドバーに追加可能 (railsなどお気に入りのプロジェクトを登録すると良いですね)
  • 実は blog という値を設定するとGithubのblogをサイドバーに追加可能。このページだけ特別です
• ショートカットで、あるrepoの特定のPR/issueにジャンプすることも可能 (PR一覧やissue一覧なども)
• キーボードショートカットでサイドバーの前後のrepoに移動する事も可能
• アプリ起動時にはGithub trendingが表示される (任意のURLに設定可能)

イケてない所 (PR大歓迎！！)

• Macでしか動作確認してません
• アクセストークン入力でrepo一覧は習得できても、一度だけWebview内で別途Githubへ手入力でログインして貰う必要があります
• 環境設定を変更しても、その変更を反映させるためにアプリを再起動するか ⌘+Shift+Rでアプリをリロードして貰う必要があります…
• Github Enterpriseは考慮していません
• オンラインでの使用を前提にしています

使用方法

1. アプリをこちらからダウンロード (現状Macのみ)
2. 起動してGithubアクセストークンを入力 (scopeは repo のみでOK)
3. サイドバーにrepo一覧が表示されるので、あるレポジトリを選択
4. Githubへのログインを求められるので入力してログイン (最初の一回だけ要求されます)
5. 各repoの内容が表示されるはず ;)

技術的な特徴

• 実はレポジトリを表示したWebViewを重ねてるだけで大した事してません (あまりにも表示repoが多いと不具合が出るかも…)
  • Webviewの中で表示しているrepoのページは普通のGithubのページですので、元々のGithubの体験を損なう事は無いはずです。GitHub上で使えるキーボードショートカットもそのまま使用可能。
• webview内のページ内キーワード検索は window.find() というjsの関数を使用
• 主な使用ライブラリ
  • レポジトリ一覧の取得: github-api
  • アプリ内のショートカットキーの定義: keymaster