GitHubプロフィールに「3D活動状況グラフ」を表示する（Actionsで毎日自動更新）
GitHub プロフィールをカスタマイズできるとモチベーションが上がりますよね！
本記事では、活動状況（Contributions）を3Dで立体的に可視化してプロフィール画面に表示、
git actionsを使い毎日0時（JST）に自動更新する方法を解説します
プロフィールREADMEを表示するには、GitHubユーザー名と同名のリポジトリ（
<your-username>/<your-username>） が必要です
構成
.
├── .github
│ └── workflows（git actions用）
│ └── profile3d.yml（3D活動状況グラフ用）
└── profile-3d-contrib（実行されると生成されるファイル群）
├── profile-gitblock.svg
├── profile-green-animate.svg
├── profile-green.svg
├── profile-night-green.svg
├── profile-night-rainbow.svg
├── profile-night-view.svg
├── profile-season-animate.svg
├── profile-season.svg
├── profile-south-season-animate.svg
└── profile-south-season.svg
全体の流れ
1. Classic Token を発行
※本記事で紹介している Classic Token は、GitHub Actions の動作検証目的で使用しています。今後 Fine-grained personal access tokens への移行予定です
実運用では Fine-grained personal access tokens の利用が推奨されています
詳細は GitHub公式ドキュメント（Creating a fine-grained personal access token） をご参照ください
- アカウント画面 →
Settings→Developer Settings※リポジトリ内のSettingsではなく、アカウント全体のSettings です
-
Personal access tokens→Tokens (classic)→Generate new token -
Generate new token（classic）を選択し、以下を設定- Note：任意の名前
- Expiration：有効期限
- Select scopes：
repoに ✅（細かい絞り込みは不要）
-
Generate tokenで作成し、表示されたトークンをコピー- 生成時にしか表示されないため、1Passwordなどに保存しておくのがおすすめです
- 紛失しても再生成可能（少し手間ですが問題ありません）
2. リポジトリにTokenを設定
-
対象リポジトリ →
Settings→Security→Secrets and variables→Actions※アカウント全体のSettingsではなく、リポジトリ内のSettings です
-
Repository secrets→New repository secretをクリック -
以下を入力して保存
- Name：
PERSONAL_ACCESS_TOKEN（任意名でも可） - Secret：発行したトークンをコピペ
- Name：
-
Add secretで登録完了
3. リポジトリ内の設定を読み書きできるように変更
- リポジトリ →
Settings→Code and automation→Actions→General※アカウント全体のSettingsではなく、リポジトリ内のSettings です
-
Workflow permissionsを以下のように変更
| 設定項目 | 内容 |
|---|---|
| Read and write permissions | ワークフローがリポジトリ内のすべてのスコープで読み書き可能（推奨） |
| Read repository contents and packages only | 読み取り専用（初期状態） |
Read and write permissions
Workflows have read and write permissions in the repository for all scopes.
（読み取りおよび書き込み権限
ワークフローには、リポジトリのすべてのスコープに対する読み取りおよび書き込み権限があります。）
Read repository contents and packages permissions
Workflows have read permissions in the repository for the contents and packages scopes only.
（リポジトリのコンテンツとパッケージの読み取り権限
ワークフローには、リポジトリのコンテンツとパッケージのスコープに対する読み取り権限のみがあります。）
-
Saveで保存
これにより、Actionが生成した3Dグラフファイルをリポジトリに書き込めるようになります
4. ワークフローを作成（.github/workflows/profile3d.yml）
-
.githubディレクトリ内にworkflowsを作成 - その中に
profile3d.ymlファイルを追加 - 以下の内容をコピペします
name: Profile 3D Contributions
# GitHubプロフィールの3D貢献グラフを自動生成・更新するワークフロー
on:
schedule:
# 毎日0時（JST）に実行（UTC15時＝JST0時）
- cron: "0 15 * * *"
# 手動実行（Actionsタブからボタンでも実行できる）
workflow_dispatch:
jobs:
build:
# GitHubが提供するUbuntu環境で実行
runs-on: ubuntu-latest
steps:
# リポジトリを取得（ワークフロー内でリポジトリのファイルを操作できるようにする）
- uses: actions/checkout@v4
# 3D貢献グラフを生成
- uses: yoshi389111/github-profile-3d-contrib@0.7.1
env:
# Repository secrets に登録が必要
GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
# 実行対象のGitHubユーザー名。自動でリポジトリ所有者を取得
USERNAME: ${{ github.repository_owner }}
# 生成結果をコミット＆プッシュ
- name: Commit & Push
run: |
# GitHub公式の自動実行ユーザー「github-actions[bot]」を指定
git config user.name github-actions[bot]
# 「41898282+」はGitHub Actions Botの一意のユーザーID
git config user.email 41898282+github-actions[bot]@users.noreply.github.com
git add -A .
git commit -m "update 3d contributions" || echo "no changes"
git push
5. 手動で実行して動作確認
Actions → Profile 3D Contributions → 「Run workflow」- 実行状況は一覧から確認可能
- 正常に動作すると、profile-3d-contrib ディレクトリに複数のSVGファイルが生成されます
6. プロフREADME.md内に3D画像を表示するコード追加
- 手動実行で問題なく生成されればpullでローカルに適用
- プロフのREADME.mdにコード追加
今回は 虹色/dark を使用していますが profile-3d-contrib にはん他にも色々なパターンのsvgが生成されているのでお好みに合わせて変更してください
<!-- 3D Contributions -->
<img src="./profile-3d-contrib/profile-night-rainbow.svg" width="700" alt="3D Contributions (dark)" />
迷った点
-
通常トークン or Classicトークン
どちらでも可。本来は通常トークン（Fine-grained）が推奨されるが、
今回は簡単に検証するため Classicトークンを採用
通常トークンはリポジトリや権限を細かく設定できる -
公開/非公開リポジトリ全体を対象にしたい
通常トークンでは対象リポジトリを選択可能だが、
Classicトークンでは細かい設定ができず、全てのリポジトリが対象になる -
Settings や Actions の場所が分かりづらい！
アカウント全体画面内とリポジトリ内の両方に存在しており、最初は少し混乱した
ただ、一度把握すれば以降は迷うことはない
Discussion