Rujuu Lab 
GitHubのContribution Graphを眺めていると、
ふと「宇宙みたいだな～」と思うことがあります。
毎日のコミットが小さな星のように並び、
活動量の多い日はひときわ強く光ります。
ある日、こんなことを考えました。
活動量が多い日は、質量を持っているのではないか？
もしそうなら、周囲の空間は歪むはずです。
そんな発想から生まれたのがGitHub Contribution Gravity Lens です。
https://github.com/Rujuu-prog/github-contribution-gravity-lens
以下からブラウザ上でお試しできます。
GitHub Contribution Gravity Lens は、
- GitHubの年間Contributionデータを取得
- 活動量の多い日を「重力源」として検出
- 周囲のマスを引き寄せるように歪ませる
- アニメーション付きのSVG / GIFとして出力
するツールです。
生成したSVGは、そのままGitHubプロフィールやREADMEに埋め込むことができます！
ただの装飾ではなく、一年を物理的に曲げるツールです。
例ですが、以下の様なSVGが作成できます。
Contribution Graphはとても優れた可視化ですが、
ひとつだけ物足りないと感じていました。
それは「熱量」です。
例えば、
- 3日間集中して作り込んだ日
- 大規模な設計変更を行った日
- 本気で取り組んだ日
そういった“重い日”も、
最終的には色の濃さでしか表現されません。
しかし、開発している本人にとっては、
あの日の作業量は重かった…
という感覚があります。
ならば、その重さを可視化しようと思いました。
以下のような方におすすめです。
- GitHubプロフィールを個性的にしたい方
- READMEに動きのある表現を追加したい方
- 自分の一年を別の角度から眺めたい方
最新の使い方はドキュメントを見ていただきたいのですが、簡単に紹介します。
GitHub Actionsで毎日自動更新されるようにするのが楽なので、まずはリポジトリに以下の様な「.github/workflows/gravity-lens.yml」を作成します。
name: generate gravity-lens
on:
schedule:
- cron: "0 0 * * *" # 毎日 UTC 00:00
workflow_dispatch:
push:
branches: [ main ]
permissions:
contents: write
concurrency:
group: gravity-lens
cancel-in-progress: true
jobs:
generate:
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- uses: actions/checkout@v4
- name: 生成（dark）
uses: Rujuu-prog/github-contribution-gravity-lens@v1.0.0
with:
github-token: ${{ github.token }}
theme: github
output-path: dist/gravity-lens-dark.svg
- name: 生成（light）
uses: Rujuu-prog/github-contribution-gravity-lens@v1.0.0
with:
github-token: ${{ github.token }}
theme: paper-light
output-path: dist/gravity-lens.svg
- name: output ブランチへデプロイ
uses: crazy-max/ghaction-github-pages@v3.2.0
with:
target_branch: output
build_dir: dist
env:
GITHUB_TOKEN: ${{ github.token }}上記が実行されると、outputというブランチにsvgが生成されます。
あとはREADMEに以下のようなHTMLタグを追加すればカスタマイズ完了です。
※USERとREPOはそれぞれの環境に合わせてください(例：https://raw.githubusercontent.com/Rujuu-prog/Rujuu-prog/output/gravity-lens-dark.svg)
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/<USER>/<REPO>/output/gravity-lens-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/<USER>/<REPO>/output/gravity-lens.svg">
<img alt="GitHub Contribution Gravity Lens" src="https://raw.githubusercontent.com/<USER>/<REPO>/output/gravity-lens.svg">
</picture>するとこんな感じのREADMEになります！
今後はThemeを追加したり、見た目の改善など行っていきます。
何かあればIssueなどで連絡いただければ助かります。
また、GitHubの⭐starをいただけると励みになります！
