GitHub アカウントの統計情報を取得して Overview をかっこよくしよう
はじめに
転職活動や登壇の場などで自分の自己紹介をするとき必ず相手に渡し、見せるでだろう GitHub。IT エンジニアとして従事している人は必ずといっていいほど 1 つのアカウントを持っており、属している企業のサービス、または有名 OSS へコントリビューションするのに必須のツールになっている。
そんな GitHub ですが、Overview を自分でカスタマイズできることを知っていただろうか。
| offich | lowlighter |
|---|---|
趣味で開発している OSS や普段コントリビューションを行なっているパッケージを並べたり、少しばかり自己紹介文を書けますが、もし初見で相手の目を引くようなプロフィールを作れたら印象が非常に良い。色々な方の Overview を見て、自分のプロフィールも見た目を良くしたかった。
Overview をかっこよく見せる方法はいくつかありますが、今回はこちらのインフォグラフィックジェネレーターを使用します。GitHub アカウントの統計情報を SVG、Markdown、PDF、JSON などの形で出力可能になる。それを Overview で表示するまでのゴールにする。
GitHub - lowlighter/metrics: 📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
https://github.com
セットアップの方法はいくつかあるが、今回は GitHub Actionsを使う方法に倣って作成していく。
リポジトリの作成
Overview の表示内容がどこから反映されるかというと、そのリポジトリの README.md からになるので、まずはアカウント名と同じ public リポジトリを作成する。自分の場合は offich/offich というリポジトリを作成した。
プロフィールの README を管理する - GitHub Docs
https://docs.github.com
GitHub Actions の 設定
リポジトリができたところで、ここからは README.md に記載する統計情報を生成する GitHub Actions の設定をする。
Personal Access Token (= PAT) の生成
統計情報を取得するにはすべてのリポジトリを閲覧するなど幅広くリソースを参照するので、各リポジトリに対して狭まっているデフォルトの GITHUB_TOKEN は使用できない。付与されているスコープを広げるため、統計情報生成で使うトークンを作成する。
Setup に記載されている通り、Select scopes で以下のアクセスを許可する。
- public_repo
- repo
- read:user
- read:packages
トークンを作成したら、大切に保管し、任意のキー名で secret に保存する。この後に続く例では、METRICS_TOKEN にしている。
Workflow を用意する
次に統計情報を画像の形で出力する GitHub Actions の Workflow を用意する。オプションたちはこちら にまとまっています。デフォルトの main ブランチへマージされたときに統計情報を更新してくれる。さらに、随時動作確認できるように workflow_dispatch の任意実行や schedule イベントの定期実行で毎日更新する設定を書いている。
name: Metrics
on:
schedule:
- cron: "0 0 * * *"
push:
branches:
- "main"
workflow_dispatch:
jobs:
github-metrics:
runs-on: ubuntu-24.04
timeout-minutes: 10
permissions:
contents: write
steps:
- uses: lowlighter/metrics@latest
with:
token: ${{ secrets.METRICS_TOKEN }}
表示したい内容のプレビュー
上に lowlighter@metrics のオプションのリンクを記載したが、一見数が多くどんなオプションを渡すべきか難しい。そのため、以下のサイトで統計情報をどのように表示されるか事前にプレビューできるサイトがあるので、そちらを利用する良い。プレビューした内容で、GitHub Action の Workflow を構築してくれるので非常に便利。
https://metrics.lecoq.io/
https://metrics.lecoq.io
画像の表示確認
出力した画像を読む README.md で参照し、GitHub アカウントの Overview を表示した時に画像が表示されていれば完成。
おわりに
お気に入りは Language のセクションで自分がどんな言語をよく書いているを相手にわかりやすく伝えられるのが非常に。その他にも統計情報を視覚的に表示するプラグインが多く用意されており、Overview の見せ方に幅がありそう。