この記事は、SYSKEN Advent Calendar 2024年12月22日の記事です。
はじめに
システム研究部のNotoです。
今年も残るところ80万秒程度となってきましたが皆様いかがお過ごしでしょうか？クリスマスが近づきイルミネーションが蔓延る昨今、研究室に落ちていたArduinoのテープライトでピカピカイルミネーションを作成したところ思いのほか愉快で楽しくなっている始末でございます。
常にゲーミングで面白さを探求している情報系高専生はGitHubのプロフィールもゴテゴテのピカピカになっているに違いません。そこで今回は、より楽しく愉快になるようGitHubのプロフィールにアニメーションを載せる方法を解説します。
作ったもの
GitHubプロフィールに動的なアニメーションを追加します。
- GitHubのコントリビューション（活動記録）に合わせて波紋が広がるアニメーション
- SVGを動的に生成して表示
- 波紋の大きさはコントリビューション数に応じて変化
- ランダムな位置に波紋が出現
完成品は以下のような感じです：
作り方
使用技術
- Node.js
- GitHub Actions
- GitHub GraphQL API
- SVG アニメーション
フォルダ構成
. ├── .github │ └── workflows │ └── animation.yml ├── script │ └── generate-animation.js ├── package.json └── README.md
ファイルの内容と役割
animation.yml
- GitHub Actionsの設定ファイル
- 24時間ごとにアニメーションを自動生成
- GitHub Pagesへの自動デプロイを担当
generate-animation.js
- アニメーションのSVGを生成するメインスクリプト
- GitHub GraphQL APIを使用してコントリビューションデータを取得
- 波紋アニメーションのSVGを生成
README.md
- プロフィールページの表示内容
- 生成したアニメーションの表示
手順
1. リポジトリの作成
- ユーザー名と同じ名前のリポジトリを作成（例：username/username）
- このリポジトリがGitHubプロフィールとして表示される
2. 必要なファイルの設置
- 上記のフォルダ構成に従ってファイルを配置
- package.jsonに必要な依存関係を追加
3. GitHub Actionsの設定
- Personal Access Tokenの発行（repo権限必要）
- リポジトリのSecretsにトークンを設定
4. GitHub Pagesの有効化
- リポジトリの設定からGitHub Pagesを有効化
- デプロイ元をgh-pagesブランチに設定
主要なコード
1. Rippleクラスの実装
class Ripple {
constructor(x, y, contributionCount, duration, delay) {
this.x = x;
this.y = y;
this.size = 20 + contributionCount * 3; // コントリビューション数に応じてサイズを決定
this.duration = duration;
this.delay = delay;
this.fillColor = "none";
this.isMultiCircle = false;
// ランダムに塗りつぶすかどうかを決定
if(Math.floor(Math.random() * 2) > 0) {
this.fillColor = "#4B9EF9";
}
// 大きな波紋の場合、複数の円を重ねる
if (this.size >= 80 && this.fillColor === "none") {
this.isMultiCircle = true;
}
}
}
2. GitHubのコントリビューションデータ取得
async function getContributions(username) {
const query = `
query($username: String!) {
user(login: $username) {
contributionsCollection {
contributionCalendar {
totalContributions
weeks {
contributionDays {
contributionCount
date
}
}
}
}
}
}
`;
const response = await graphqlWithAuth(query, { username });
return response.user.contributionsCollection.contributionCalendar;
}
3. アニメーションの生成ロジック
async function generateAnimation() {
const username = process.env.GITHUB_REPOSITORY.split('/')[0];
const contributionData = await getContributions(username);
const width = 800;
const height = 400;
const duration = 2; // 波紋が広がるまでの時間（秒）
let delay = 0;
// コントリビューションがある日のみ波紋を生成
const ripples = contributionData.weeks.flatMap((week) =>
week.contributionDays.filter(day => day.contributionCount > 0)
.map((day) => {
const { x, y } = getRandomPosition(width, height);
delay += Math.random() * 0.3; // 波紋の出現タイミングをずらす
return new Ripple(x, y, day.contributionCount, duration, delay);
})
);
// SVGの生成
const rippleSVGs = ripples.map(ripple => ripple.toSVG()).join('');
const svg = `
<svg
viewBox="0 0 ${width} ${height}"
xmlns="http://www.w3.org/2000/svg"
style="background: #0D1117">
<rect width="100%" height="100%" fill="#0D1117"></rect>
<g>${rippleSVGs}</g>
</svg>
`;
}
4. SVGアニメーションの実装
toSVG() {
return `
<circle
cx="${this.x}"
cy="${this.y}"
r="0"
fill="${this.fillColor}"
stroke="#4B9EF9"
stroke-width="1"
opacity="0.8">
<animate
attributeName="r"
begin="${this.delay}s"
from="0"
to="${this.size}"
dur="${this.duration}s"
fill="freeze"
values="0; ${this.size}"
keyTimes="0; 1"
keySplines="0 0.8 0.5 1"
calcMode="spline"></animate>
<animate
attributeName="opacity"
begin="${this.delay}s"
from="0.8"
to="0.2"
dur="${this.duration}s"
fill="freeze"></animate>
</circle>
`;
}
5. GitHub Actionsの設定詳細
name: Generate GitHub Animation
on:
schedule:
- cron: "0 */24 * * *" # 24時間ごとに実行
workflow_dispatch: # 手動実行も可能
push:
branches:
- main # mainブランチへのプッシュでも実行
jobs:
generate:
permissions:
contents: write # リポジトリへの書き込み権限
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm install
- name: Create Animation
run: |
mkdir -p dist
npm run generate
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
これらのコードが組み合わさることで、GitHubの活動状況に基づいた動的なアニメーションが生成され、自動的にプロフィールページに反映する事ができるようになります。
おわりに
GitHubプロフィールをアニメーションで彩ることで、より魅力的な自己表現が可能になります。このような動的な要素を加えることで、プロフィールページが単なる情報の羅列ではなく、見る人の興味を引く展示になる事でしょう。
SVGアニメーションについては、より自分らしく楽しいものを作成しましょう！皆様も、ぜひ自分なりのアニメーションを作ってGitHubプロフィールを華やかにしてみてはいかがでしょうか。
