GitHub AwesomeレポジトリのREADMEに含まれる各GitHubレポジトリのURLにスター数を表示する(一覧化する)ための必要最低限のWebアプリです。(注意：GitHub Tokenを利用しないと、GitHub APIの制約で約50～60個のGitHubレポジトリにしかスター数が表示されません)
皆さんのGitHub Awesomeレポジトリ巡りが少しでも快適になれば幸いです 
 |
|---|
 |
|---|
背景
GitHubにはプログラミング言語のお勧めまたは人気のライブラリ、フレームワーク、URL等をまとめてくれているAwesomeレポジトリが数多く存在します。Awesomeレポジトリを活用することでフレームワークやライブラリの候補を洗い出す作業等を大幅に短縮できます。
しかしAwesomeレポジトリは各分野のライブラリやフレームワークを対象としてまとめているため、Awesomeレポジトリによっては項目数が数百～数千に及ぶことがあります。このため一つ一つのページを開いてStar数を確認して優先度付けするような作業もかなり大変です。このような悩みを解決するために各GithubレポジトリのURLにスター数が表示するための最低限のWebアプリを実装して、どこでも使えるようにFirebase上に配置しています。
NOTE:
一番最初にReactを試すときに各種ReactコンポーネントとTypeScriptを試すために作ったものなので、コードもデザインはほぼ何も考えていません。特にスマホからだと非常に使いづらいですが、一応使うことはできます。
WebアプリのURL
以下のURLからアクセスできます。
使い方
画面上部にある入力欄に必要な情報を入力してGETボタンをクリックします。
- URL欄にAwesomeのGithubレポジトリURLを入力する
- Token欄にGithubアカウントのGithubトークンを入力する
- 未入力の場合はGithubトークン無しで実行する
- トークン無しの場合、Github APIの制約によりGithubレポジトリ50個弱分のGithubレポジトリのスター数しか取得できない。詳細は注意事項の節を参照。
- 使い捨てのGithubトークンを使用することを推奨
- 未入力の場合はGithubトークン無しで実行する
- Top List Number欄に表示するTop Nの数字を入力する
- 結果が出た後に入力してTop Nの値を変更することも可能
クリックするとAwesomeページに含まれる各Github URL情報をGithub API経由で取得します。全ての取得が完了すると、結果として以下のものを表示します。(テーブルと棒グラフはReactコンポーネントの使い勝手を試すだけに入れてます)
- Top Nのテーブル
- Top Nの棒グラフ
- スター文字およびスター数を埋め込んだAwesomeページ
- リンク先がGithubレポジトリURLでない場合、スター数は表示されない
- Github APIの実行回数超過エラー等が発生した場合は、スター数に-1が表示される。
注意事項 & Githubトークンの設定方法
基本的にクライアントのブラウザ側で「各Githubレポジトリ情報をGithub API経由で取得する」ように実装しています。Githubトークン無しの場合は1時間あたり50回しかAPI呼び出しを行えないため、GithubレポジトリのURLが多いAwesomeレポジトリだと50件弱までしかスター数を取得できず使い物になりません。
NOTE:
Github APIの呼び出し上限を超過すると、それ以降はRate LimitによりGithub APIの応答結果が403 Forbiddenとなります。
このためGithubレポジトリのURLが多いAwesomeレポジトリの場合は、Githubトークンを入力することがほぼ必須となります。Githubトークンを使用する場合は1時間あたり5000回API呼び出しを行えます。
GitHub「Personal access tokens」の設定方法
Githubトークンを入力するのに抵抗がある方もいると思います。このためGithubトークンは使い捨てのものを作成して使用することをお勧めします。
ソースコード置き場
ソースコードは下記URLに配置しています。改造、流用、再配布などは自由にしていただいて構いません。Githubレポジトリは一時的な作業用にしか使っていませんが、極力削除しないようにします。