GitHub のプロフィールカードが作れるアプリ「github-readme-stats」
最近、GitHub に「Profile 機能」が追加された。コレはユーザ名と同じ名前のリポジトリを用意し、そこに README.md を配置することで、その内容がアカウントのトップページに表示される、というモノ。
例えば自分のアカウントだと以下のような感じ。
Neos21 というリポジトリを作ってあって、そこにある README.md が表示されている。
簡単なプロフィールページが作れるようになったということで、皆が創意工夫を凝らしているのである。
今回は、そんなプロフィール欄に配置したら面白そうなアプリを見つけたので紹介する。
GitHub Readme Stats
GitHub Readme Stats は、GitHub アカウントの情報を読み取って SVG 形式のカードを作ってくれるアプリ。
使い方は簡単。次のように用意された API にクエリパラメータとしてユーザ名などを指定するだけ。
- Markdown での書き方
- HTML での書き方 (
img要素で SVG を読み込む)
<img src="https://github-readme-stats.vercel.app/api?username=Neos21&show_icons=true&theme=radical" alt="Neos21 Stats">
実際に配置するとこんな感じ。
見た目を調整するパラメータもいくつかあるので、公式の README を参照。
リポジトリ単体のカードを表示するモノや、よく使用される言語を表示するモノもある。
何気に Perl の使用率が多く出てるんだけど何で？ほとんど書かないのに…。
自分で API をデプロイする
公式でも紹介されているが、GitHub API をコールする関係上、あまり上述の API を直叩きしまくると、API コールレート制限で SVG が表示できない場合がある。
そこで、Vercel (以前は「Zeit Now」というサービス名だったが改名している) にこのアプリをデプロイし、自分用の「GitHub Readme Stats」を持っておくと、API コールレート制限を回避しやすくなる。
Vercel は任意の GitHub リポジトリを Import して簡単にデプロイできるので、Vercel 入門として触ってみると良いかも。
↑ Zeit Now 時代に書いた紹介記事。基本は変わっていないのでご参考までに。
SVG を定期的に保存する GitHub Actions
自分用の API サーバを用意するにしても、カードを表示する度に GitHub API がコールされるとなると、閲覧数が多いサイトではレート制限に到達してしまうことが多いかもしれない。
であれば、定期的に SVG を保存して、それを参照するようにしたら良いだろう。
たまたま見つけたのだが、定期的に SVG を取得し、自身の GitHub リポジトリにコミットすることでそれを表示するという GitHub Actions のコードを見つけたので、リンクを貼っておく。
curl で API をコールし、SVG ファイルを保存。それをコミット・プッシュしている。Markdown 等に埋め込む際は、
https://raw.githubusercontent.com/【ユーザ名】/【リポジトリ名】/master/【ファイル名】.svg
といった Raw GitHub URL を使ったりすれば参照できる。
以上
ソースコードを見てみると意外とシンプルで、GitHub の GraphQL を叩いて色々なデータを一括取得しているみたい。
API コールをリトライする retryer の実装も参考になる。
お手軽に自分のプロフィールカードが作れるので、とりあえず試してみると面白いだろう。