GitHub のトレンドリポジトリを見逃さない，Trendy をつくりました

僕が1日に1回ぐらいの頻度で見ているページの中の1つに GitHub の Trending repositories のページがあります．このページには言語ごとに日毎・週毎・月毎の単位で GitHub 上で人気のリポジトリがランキング形式で表示されます．

話題になっているライブラリやソフトウェアの一次ソースとして便利なのですが，微妙にアクセスが悪い位置にあり，言語ごとにしか見られません．また，ランキングには常に人気な「常連」リポジトリが多々いるので，新しく話題になっているリポジトリはその中に埋もれがちになってしまいます．

そこで，今回はこれらの問題を解決すべく，GitHub のトレンドクライアント Trendy を Electron ベースでつくりました．

Trendy - Menubar App to Keep You in the Trend

Trendy は GitHub のトレンドページを監視し，トレンドに新しいリポジトリが現れた時に通知したり，過去にトレンドに挙がったリポジトリを管理して後から検索したりできます．メニューバーの中に常駐するので，いつでもメニューバーからアクセスできます．

README を書いたり，今回は勉強もかねて Landing Page 書いたりしましたが，せっかくなので簡単に紹介します．

インストール

GitHub のリリースページ からお使いの OS に合うファイルをダウンロードできます．OS X は Trendy.app が入っているので，それをそのまま使ってください．Windows の場合は trendy.exe を，Linux の場合は trendy という executable があるのでそれらをそれぞれ使ってください．インストールは不要なので好きな場所に置いて OK です．

ファイルを実行すると，Trendy のメニューバーアイコンが出ると同時に初回は監視したいトレンドを選択するウィンドウが立ち上がります．

上にあるフォームでインクリメンタル検索ができるので，気になる言語をいくつか選んだら Go! ボタンを押します．

Trendy が各トレンドページをスクレイピングして GitHub API を使ってリポジトリの情報を収集した後，メニューバーの中にあるアイコンが赤くなると思います． それ以降は1時間に1回のペースでトレンドページを見に行って新着リポジトリを探します．

使い方

'New' タブ

新着のリポジトリが表示されます．チェック済みのリポジトリはマウスオーバーすると左の方に表示されるでかいチェックマークボタンを押すと 'New' タブから削除されます．

'Current' タブ

現在のトレンドページのランキングです．

'All' タブ

Trendy が今まで出てきた収集したすべてのリポジトリ情報一覧です．

通知機能

Trendy は1時間に1度スクレイピングを行い，新しいリポジトリを見つけた時はメニューバーのアイコンの色を変えて通知します．緊急性のある通知ではないので，この程度の目立たなさの通知が一番気に入っています．

通知時	通常時

組み込みブラウザ

リポジトリやリポジトリ作者のページなどへのリンクをクリックすると，外部のブラウザではなく，モバイルアプリのようにその場でブラウザを開きます．開くページは，ウィンドウが小さい場合はモバイルページ，大きい場合は PC ページになります．

サイドメニュー

右上の3本線ボタンを押すとサイドメニューが開きます．メニュー内では次の3つの機能が使えます．

• 検索フォームからリポジトリを検索できます．検索ワードを入れて Enter を押すと，現在のタブ内のリポジトリが絞り込み検索されます．
• 現在のタブをトレンドでフィルタリングすることができます．普段はすべてのトレンドページの結果がタブ内に表示されています．
• 最下段では設定ファイルを開いたり，手動で更新したり，アプリを終了したりできます．

メニューウィンドウとノーマルウィンドウ

ここまで Trendy はメニューバーに統合されたアプリだと紹介しましたが，普通のウィンドウで使うことも出来ます．

Windows ではタスクバーが下に無いとメニューウィンドウの位置がおかしくなってしまうので，デフォルトでこの設定になっています． 後述する config.json を書き換えるとメニューウィンドウとノーマルウィンドウを切り替えられます．

ノーマルウィンドウ時は横幅が充分あることを想定して，サイドメニューは常に表示するようになっています．

GitHub API リミット

スクレイピングは対象ページの構成に依存して追従しないといけないため，極力スクレイピングに頼らないような設計になっています．Trendy では最低限の情報（リポジトリ名と作者名）だけスクレイピングで収集し，リポジトリのその他の情報は GitHub API を使っています．

ログインしていない場合は1時間に60回しか API を呼べないため，スクレイピング対象が少し多いとこの制限にひっかかってしまいます．その場合はウィンドウ内に赤いアラートダイアログが表示され，ログインを促されます．

'login' リンクをクリックするとログインウィンドウが開くので，ログイン情報を入力してログインしてください．2段階認証にも対応しています．これで API リミットが 60 から 5000 まで増えるので，上記エラーは出なくなるはずです．

カスタマイズ

上記の2タイプのウィンドウを含め，いくつかの項目がカスタマイズ可能です．詳しくは README に書きました．

Electron + TypeScript + React

TypeScript 1.6 が beta になった頃につくりはじめたので，今回は renderer プロセス側も main プロセス側も両方 TypeScript でつくってみました．使ってみたうえでの感想は Qiita のほうにも簡単に書きましたが，

Qiita - TypeScript1.6 + React 書いてみてハマったポイントとか

メソッド名やキー名の間違いなど，うっかりミスを大体拾ってくれるので概ね良い感じです．

まとめ

GitHub のトレンドページクライアント Trendy をつくりました．

元は 最強のTwitterクライアント戦争 というのでぼちぼちアプリをつくっていて，ちょっと息抜きに前々から困っていたトレンドページを改善するか程度の気持ちだったのですが，なんだかんだで時間がかかってしまいました…

OS X と Ubuntu で使っている感じでは，今のところ問題なく動いているようです．よければお試しください．