GithubのプロフィールREADMEをデコる，動くprofile summaryを自作してみた

はじめに

GithubのREADMEに，自身のGitHubのリポジトリのコミット数や使用言語をグラフィカルに表示するSummary Cardsがある．自分は以下のものを使っていた．

GitHub Profile Summary Cards

しかし，唐突に動きのあるものが欲しいと思ってつくってみた．

リポジトリ情報の取得

GitHubのAPIよりリポジトリの情報を取得することができる．

https://api.github.com/users/+ username + /repos

上記のAPIから以下のようなjson形式の情報を取得することができる．

[
    {
        "id": 312465317,
        "node_id": "MDEwOlJlcG9zaXRvcnkzMTI0NjUzMTc=",
        "name": "1day",
        "full_name": "yuhi-sa/1day",
        "private": false,
        "owner": {
            "login": "yuhi-sa",
            "id": 62089243,
            "node_id": "MDQ6VXNlcjYyMDg5MjQz",
            "avatar_url": "https://avatars.githubusercontent.com/u/62089243?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/yuhi-sa",
            "html_url": "https://github.com/yuhi-sa",
            "followers_url": "https://api.github.com/users/yuhi-sa/followers",
            "following_url": "https://api.github.com/users/yuhi-sa/following{/other_user}",
            "gists_url": "https://api.github.com/users/yuhi-sa/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/yuhi-sa/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/yuhi-sa/subscriptions",
            "organizations_url": "https://api.github.com/users/yuhi-sa/orgs",
            "repos_url": "https://api.github.com/users/yuhi-sa/repos",
            "events_url": "https://api.github.com/users/yuhi-sa/events{/privacy}",
            "received_events_url": "https://api.github.com/users/yuhi-sa/received_events",
            "type": "User",
            "site_admin": false
        },
...リポジトリ数分続く
]

ここから，リポジトリごとの言語とサイズを取得する．

こちらにGitHubで利用可能なAPIが記載されている．

Cardの作成

pythonのmatplotlib.animationを用いて，角度をずらしながら円グラフをplotすることで開店する円グラフを作成した．

円グラフを回転させるコードはこちらを参考にした．
動画plotの方法

def update(num,chocopie, ax, colors, Name, Size):
    if len(chocopie) > 0:
        ax.cla()  
    chocopie = ax.pie(Size, labels=Name, autopct=lambda p: '{:.1f}%'.format(p) if p >= 2.5 else '',shadow=True, startangle=4*num ,colors=colors)
    ax.set_title("Top Size Repos")

def main():
    Name, Size = getRepo(user) # APIからデータを取得する関数
    chocopie = ax.pie(Size, labels=Name, autopct=lambda p: '{:.1f}%'.format(p) if p >= 2.5 else '' ,shadow=True, startangle=0,colors=colors)
    ani = animation.FuncAnimation(fig, update, frames=91,fargs=[chocopie,ax,colors,Name,Size], interval=100)
    ani.save('../cards/top.gif', writer="ffmpeg",dpi=100)

GitHub Actions

一日ごとに新しく自動生成されるようにGithub Actionのscheduleを利用した．

name: Create Card

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]
  fork:
    branches: [ master ]
  schedule:
    - cron: '45 10 * * *'

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Python 3.9
      uses: actions/setup-python@v2
      with:
        python-version: 3.9

    - name: Install dependencies
      run: |
        python -m pip install --upgrade pip
        pip install flake8 pytest
        if [ -f requirements.txt ]; then pip install -r requirements.txt; fi        

    - name: Remove Old Date
      run: |
        rm cards/lang.gif
        rm cards/top.gif
        git config user.name "<git-user-name>"
        git config user.email "<git-user-e-mail>"
        git add *
        git commit -m "Update"
        git push origin master        

    - name: Update Card
      run: |
        bash start.bash        

    - name: Card Published
      run: |
        git config user.name "<git-user-name>"
        git config user.email "<git-user-e-mail>"
        git add *
        git commit -m "Update"
        git push origin master

GitHub Actions の YAMLファイルの書き方

使い方

このリポジトリをfork．
username.txtを自身のuser名に書き換える．
GitHub Actionsを起動(Run workflow) (24時間ごとに自動で更新されます)
{username}を変更して以下のリンクをREADMEに追記してください．

# Repos per Language(使用言語の円グラフのコード)
![Repos per Language](https://github.com/{username}/github_cards/blob/master/cards/lang.gif?raw=true)
## Top Size Repos(リポジトリのサイズの円グラフのコード)
![Repos per Language](https://github.com/{username}/github_cards/blob/master/cards/top.gif?raw=true)

# 横幅を指定する場合の書き方
<img src="https://github.com/{username}/github_cards/blob/master/cards/lang.gif?raw=true" width="40%">
<img src="https://github.com/{username}/github_cards/blob/master/cards/top.gif?raw=true" width="40%">

Tags:

その他