この冬、育てたいGitHub Readme。Golang製のスタイリッリュなLanguage Stats SVG
はじめに
GitHubのプロフィールページ(README)をカスタムしたくなったことはないでしょうか。
よく見かけるカスタムパーツとして下図のような、readme-stats があります。

readme stats
この画像は本家の github-readme-stats とは別で自作したものです。詳細はコチラ
これは、自分のアカウントのリポジトリで使用されている言語を集計し可視化したものです。個人的に好きなパーツですが、デザインに飽きてきたので、スタイリッシュなデザインかつ、Golangのキャッチアップがてら作りたいなと思ったのが今回のモチベーションです。本記事では、その紹介をしたいと思います。
repo-spector
そんな動機でつくったのがこちらです。私のリポジトリでは、1位の言語が50%以上を占めていたため、あえて2位以下のみでグラフを構成しています。

repo-spector
動作
CLIでのコマンド実行時の挙動は、以下のようになります。

./output 配下にはこのようなSVGが出力されます:

補足
GitHub GraphQL
リポジトリのデータは、GitHub GraphQL APIを用いて取得しています。無料で利用できますが、レートリミットがあるため大量アクセスする場合は注意が必要です。認証には Personal Access Token を利用しています。この Token の権限を変えることによって、集計対象のリポジトリのスコープ(公開/非公開など)を制御できます。
Cobra
GolangでCLIツールを楽に実装できる(--help の自動生成やサブコマンド管理など)Cobra ライブラリを用いています。
集計から除外したい言語があるとき
cssやHTMLなど、集計から除外したい言語がある場合、-x, --exclude-langオプションを使用することができます。
repo-spector -x 'html,css,mdx'

Readmeに貼って週次で更新したい

常に新鮮な情報を表示したいですよね。GitHubのReadmeで使用する場合、GitHub Actionsを利用します。やることは2つです。
1. GitHub Tokenを設定する
2. GitHub Actionsのworkflowを設定する
1. GitHub Tokenを設定する
以下の権限を付与したTokenを発行します。
- repo
- workflow

こちらを取得し、Actionsを動かしたいリポジトリ上のsecretに追加します。
リポジトリの Settings タブ > サイドバー: Secrets and variables > Actions > [Repository secrets] > [New repository secret] にアクセスし
- Name:
GH_TOKEN - Value:
ghp_XXXXXXXXXXXXXXX
で設定します。
除外したい言語を指定する場合もsecretで指定します。
例えば、html,css,dockerfileを除外したい時:
- Name:
EXCLUDED_LANGUAGES- Value:
html,css,dockerfile
2. GitHub Actionsのworkflowを設定する
以下の通りのymlファイルを、設置することで簡単に実行できます。
name: repo-spector
on:
schedule:
- cron: "0 0 * * 1" # Every Monday
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- name: Checkout target repo
uses: actions/checkout@v4
- name: Download repo-spector binary from GitHub Release
shell: bash
run: |
curl -L https://github.com/4okimi7uki/repo-spector/releases/latest/download/repo-spector -o repo-spector
chmod +x ./repo-spector
- name: Run repo-spector CLI
shell: bash
env:
GH_TOKEN: ${{ secrets.GH_TOKEN }}
run: |
mkdir -p output
./repo-spector -x "${{ secrets.EXCLUDED_LANGUAGES }}"
- name: Commit and Push updated SVGs
shell: bash
env:
GH_TOKEN: ${{ secrets.GH_TOKEN }}
run: |
git config --global user.name 'github-actions[bot]'
git config --global user.email 'github-actions[bot]@users.noreply.github.com'
git add output/*.svg
if git diff --cached --quiet; then
echo "No changes to commit"
else
git commit -m "update: language stats svg"
git push https://x-access-token:${GH_TOKEN}@github.com/${{ github.repository }} HEAD:main
fi
この部分をいじることで、スケジュールを変更できます。
schedule: - cron: "0 0 * * 1" # Every Monday
おわりに
本家の github-readme-stats はURLリンクを貼るだけで済みますが、諸事情で使えなくなっている(2026年1月現在)ようで、使っていた方は自分でホスティングするなど、少しだけハードが高いと思います。今回のモジュールは、GitHub Actionsで更新かけるので、PR時のlintを設定する感覚で貼り付けられるのが魅力かと思います。
github-readme-statsの事象背景とデプロイメントの参考:
コードにまだ粗があったり(README.md 途中だったり)デザインもっとこういうふうにしたいなど、改善の余地はいくらでもあるので、気になった方いたらissue立てていただければと思います!
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion
ありがとうございます。活用させていただきます。