LoginSignup
6
7

More than 5 years have passed since last update.

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

Posted at

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

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

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

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

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

設定方法

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

deck_setting-timeline.jpg

GitHub タイムラインの追加

deck_setting-github.jpg

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

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

Backlog タイムラインの追加

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

deck_setting-backlog.jpg

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

tilfin's note よりクロスポスト

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7