TweetDeckライクなGitHubとBacklogのタイムラインビューワーを作ってみた

GitHub のダッシュボードが絶望的に使いづらいので、タイトル通りタイムラインビューワーを作りました。

tilfin.github.io

GitHub のイベントダッシュボードは「誰が何をしたのか」はわかるのですが、結局情報が不足してるためにわざわざ詳細ページに飛ぶ必要があります。そこをどうにかしたかったのが開発理由です。また普段 Nulab さんの Backlog を使っているので、こちらのプロジェクト更新履歴も同じく表示できるようにしました。

f:id:tilfin:20160404212722j:plain:w400

サイトの [See a Demo] ボタンからデモとして、GitHub の Public イベントといくつかの有名リポジトリと組織のタイムラインの見られます。(これは非認証状態での API 利用なので社内からのアクセスですと IP アドレスのリミットでエラーになるかもしれません。)

両方とも API がクロスオリジンで呼び出せたので単純な静的ページアプリ(SPA)として作って Github Page で公開しました。そのため各 API のアクセストークンやタイムラインの情報は全てブラウザのローカルストレージに保存する仕様です。JSON でインポート・エクスポートできるのとレスポンシブデザインにしているため、PC で設定をエクスポートして、スマホでホーム画面登録してインポートすることも可能です。

以下は設定方法を説明しておきます。

設定方法

[Get Started Now] ボタンからタイムラインの編集画面に飛びます。追加するタイムラインのサービス毎に [GitHub], [Backlog] ボタンがあります。下記スクリーンショットはそれぞれの My Timeline を追加したものです。カラム幅と通知のオンオフが設定できます。

f:id:tilfin:20160404203915j:plain:w300

GitHub タイムラインの追加

f:id:tilfin:20160404203658j:plain:w300

まずアクセストークンを生成してください。 https://github.com/settings/tokens から [Generate new token] ボタンをクリックして、「Select scopes」から repo, admin:org/read:org, notifications を選択して、トークンを下記の最初の [Access Token] にセットします。

f:id:tilfin:20160404205535j:plain:h600

2番目は GitHub Enterprize を使っている場合は、ルート URL を入れます(この機能は自分自身が利用していないので未確認です)。GitHub.com の場合は空のままにして、[Activate] ボタンを押すと認証が通ると下部の組織タイムラインもしくはリポジトリ(例.microsoft, facebook/react)の指定、または GitHub 全体の Public タイムラインを追加できます。

Backlog タイムラインの追加

API Root URL」にお使いの Backlog サイトのルート URL をセットします。さらに Backlog サイトで個人設定ページを開いて、左のメニューの API から新しいAPIキーを発行をして、「API Token」にセットします。

f:id:tilfin:20160404203658j:plain:w300

[Load Project] ボタンをクリックして認証が通るとプロジェクト一覧がロードされるので、選択して追加します。