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

GitHub のダッシュボードが絶望的に使いづらいので、タイトル通りタイムラインビューワーを作りました。 tilfin.github.io GitHub のイベントダッシュボードは「誰が何をしたのか」はわかるのですが、結局情報が不足してるためにわざわざ詳細ページに飛ぶ必要があります。そこをどうにかしたかったのが開発理由です。また普段 Nulab さんの Backlog を使っているので、こちらのプロジェクト更新履歴も同じく表示できるようにしました。 サイトの [See a Demo] ボタンからデモとして、GitHub の Public イベントといくつかの有名リポジトリと組織のタイムラインの見られます。(これは非認証状態での API 利用なので社内からのアクセスですと IP アドレスのリミットでエラーになるかもしれません。) 両方とも API がクロスオリジンで呼び出せたので単純な静的ページアプリ(SPA)として作って Github Page で公開しました。そのため各 API のアクセストークンやタイムラインの情報は全てブラウザのローカルストレージに保存する仕様です。JSON でインポート・エクスポートできるのとレスポンシブデザインにしているため、PC で設定をエクスポートして、スマホでホーム画面登録してインポートすることも可能です。 以下は設定方法を説明しておきます。 設定方法 [Get Started Now] ボタンからタイムラインの編集画面に飛びます。追加するタイムラインのサービス毎に [GitHub], [Backlog] ボタンがあります。下記スクリーンショットはそれぞれの My Timeline を追加したものです。カラム幅と通知のオンオフが設定できます。 GitHub タイムラインの追加 まずアクセストークンを生成してください。 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 タイムラインを追加できます。 ...

2016年4月4日 · Toshimitsu Takahashi

GitHub に公開した Node.js スクリプトに Travis CI を導入し Coveralls でカバレッジ管理するまで

GitHub に httpreqtest という Node.js で動くクライアントのHTTPリクエスト内容を JSON でそのまま返すスクリプトを公開した。非公開のトリッキーな仕様の API サービスに対して、クライアントを作るにあたり、実装チェックする必要があり勢いで作った。 このリポジトリ tilfin/httpreqtest · GitHub に build pass と coverage バッジを付けたいと思い、Travis CI を導入しテストを走らせ、Coveralls でコードのカバレッジが表示できるようにしたので、それをメモしておく。 テスト まずテストがなければ始まらないので、Mocha と SuperTest を使ってテストを書いた。 mocha と supertest を npm でインストールし、package.json の devDependencies に保存する。 $ npm install mocha –save-dev test ディレクトリを掘り、その中にテストコードを書いた jsファイルを置く。 package.json の scripts には { “test”: “mocha” } と記述して、npm test で実行されるようになる。 Travis CI ブラウザから Travis CI に GitHub アカウントでサインインする。リポジトリ一覧から当該のものをオンにする。これだけ諸々の設定が済みます。 あと、Git リポジトリのルートに .travis.yml を置きます。 .travis.yml language: node_js node_js: - "0.10" 上記をコミットしてプッシュして、Travis CI をブラウザで開いていると、ビルドおよびテストが実行されます。正常に終了すれば念願の build pass バッジになります。これを README.md に追加しておきましょう。 ...

2013年12月3日 · Toshimitsu Takahashi