📊

この冬、育てたいGitHub Readme。Golang製のスタイリッリュなLanguage Stats SVG

に公開1

はじめに

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 ライブラリを用いています。

集計から除外したい言語があるとき

cssHTMLなど、集計から除外したい言語がある場合、-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ファイルを、設置することで簡単に実行できます。

.github/workflows/repo-spector.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の事象背景とデプロイメントの参考:

https://qiita.com/Latte72R/items/e6fdf497d115b248a78a

コードにまだ粗があったり(README.md 途中だったり)デザインもっとこういうふうにしたいなど、改善の余地はいくらでもあるので、気になった方いたらissue立てていただければと思います!

https://github.com/4okimi7uki/repo-spector#

chot Inc. tech blog

Discussion

ふるたふるた

ありがとうございます。活用させていただきます。