🥳

【GitHub Actionsで自動更新】GitHubプロフィールを「3Dアニメーションの草」でリッチにする方法 🚀

に公開
GitHub
GitHub Actions
profile
readme
tech

⚠️ ローカルでの環境構築は一切不要です！

みなさん、GitHubのプロフィールREADME、こだわっていますか？ スタンダードなContributionグラフ（通称「草」）も良いですが、少し物足りなさを感じることもあるかもしれません。

この記事では、私が作成したリポジトリ（funayamateppei/github-contributions-3d）を使い、あなたのContributionを立体的な 3D GIFアニメーションにしてプロフィールに表示する方法を解説します。

フォークして設定するだけで、GitHub Actionsが毎日定時（日本時間午前9時）に自動で最新のコミットグラフに更新してくれます。node-canvasやGraphQL APIの知識は不要です。動く3Dグラフで、あなたのGitHubプロフィールを圧倒的に魅力的にしましょう！

## 3D Contribution GIFとは？（アニメーション例）

みなさん、GitHubのプロフィールREADME、こだわっていますか？
スタンダードなContributionグラフ（通称「草」）も良いですが、少し物足りなさを感じることもあるかもしれません。

screen-shot-profile

上記は私のGitHubプロフィールですが、このようにContributionグラフを3DのGIFアニメーションにして表示してみました。

3Dの棒グラフで表示されたGitHubのContributionグラフのアニメーション

この記事では、私が作成した以下のリポジトリを使って、この3D Contribution GIFを生成し、さらにGitHub Actionsで毎日自動更新する方法を解説します。

ローカルでの環境構築は一切不要です。 リポジトリをフォークして設定するだけで、すべてGitHub Actionsが自動で行ってくれます。

https://github.com/funayamateppei/github-contributions-3d

🤖 完成するもの

  • あなたのGitHub Contribution（草）の3D棒グラフ
  • 棒グラフが下から伸びるアニメーションGIF
  • 毎日自動で最新のContributionが反映される仕組み

🛠 準備するもの: 必要なのはGitHubアカウントだけ

  • GitHubアカウント

📖 3ステップで完了: 3D Contribution GIFの作成手順

たったの3ステップです。

  1. リポジトリのフォーク
  2. GitHub Actions の実行
  3. プロフィールREADMEへの貼り付け

Step 1: リポジトリのフォーク

元となるリポジトリをご自身のアカウントにForkします。

  1. リポジトリ にアクセスします。
  2. 右上の Fork ボタンをクリックして、ご自身のアカウントにフォークします。
  3. 重要: フォークしたリポジトリの Actions タブを開きます。
  4. 「Workflows aren't being run on this forked repository」というメッセージが表示されるので、"I understand my workflows, go ahead and enable them" ボタンをクリックしてActionsを有効化します。

これで、あなたのリポジトリ内でGitHub Actionsが動く準備ができました。

Step 2: GitHub Actions の実行

このリポジトリは、以下の2つの方法でGIFを生成します。

1. スケジュール実行 (自動)

フォーク後、**毎日定時（UTCの0時 / 日本時間の午前9時）**にGitHub Actionsが自動で実行され、contribution-graph.gif が最新の状態に更新されます。

2. 手動実行 (workflow_dispatch)

「今すぐGIFを更新したい！」という場合は、手動でActionsを実行できます。

  1. リポジトリの Actions タブに移動します。
  2. 左側の Generate 3D Contribution Graph をクリックします。
  3. Run workflow ドロップダウンをクリックし、Run workflow ボタンを押して手動で実行します。

しばらく待つと（2〜3分程度）、Actionsが完了します。
リポジトリの Code タブに戻り、ブランチを assets に切り替えると、contribution-graph.gif がコミットされているはずです。

Step 3: プロフィールREADMEへの貼り付け

最後に、生成されたGIFをあなたのプロフィールREADMEに貼り付けます。
（プロフィールREADMEの作り方がわからない場合は、こちらの記事などを参照してください）

あなたのプロフィールREADME（YOUR-USERNAME/YOUR-USERNAME/README.md）に、以下のMarkdownコードを追加します。

### 📊 My 3D Contribution Graph

![My 3D Contribution Graph](https://raw.githubusercontent.com/YOUR-USERNAME/github-contributions-3d/assets/contribution-graph.gif)

これで、あなたのプロフィールに動く3Dグラフが表示されます！

💡 技術解説: 3D描画と自動更新の仕組み（GraphQL / node-canvas）

このツールは、以下の技術で成り立っています。

  1. GitHub GraphQL API (v4): GitHub Actionsが自動的に提供する GITHUB_TOKEN を使ってGitHub APIにリクエストを投げ、過去1年間のContributionデータを取得します。
  2. TypeScript (src/index.ts): 取得したデータを日毎のContribution数に整形します。
  3. node-canvas: Canvas 2D APIを使って、整形したデータを3Dの棒グラフとしてプロットします。アイソメトリック投影を使用して立体感を表現しています。
  4. gifencoder: 複数フレームの画像を生成し、棒グラフが下から伸びていくアニメーションを作成します。
  5. GitHub Actions: 設定されたスケジュール (.github/workflows/generate.yml) または手動実行（workflow_dispatch）に基づき、TypeScriptスクリプトを実行し、変更（新しくなったGIF）を assets ブランチに自動でコミット＆プッシュします。

おわりに

GitHubプロフィールをリッチにする3D Contribution GIFの作り方を紹介しました。
src/renderGif.ts の中のパラメータ（色や速度など）を調整して、自分だけのオリジナルGIFを作ってみるのも面白いと思います。

ぜひ皆さんのプロフィールにも導入してみてください！
もし気に入っていただけたら、リポジトリ にスターをいただけると励みになります。

「こんな機能があったらいいな」「ここをもっとこうしたい」といった改善案や、バグを見つけた場合は、気軽にPull RequestやIssueを立てていただけると嬉しいです！

Happy coding! 🚀

Discussion