1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GitHubの草(コミット履歴)を3Dで表示させる方法

Last updated at Posted at 2024-10-29

GitHubのプロフィール

image.png
https://github.com/kanaji2002

草について

GitHubでは,コミット等のアクションがあった場合,下記のようにマスが緑になります.緑が濃いほど多く活動していることを示しています.(自分は少なくて恥ずかしいです...)
image.png

今回は,この草を3Dにしてプロフィールに反映させる方法をご紹介します.

作成方法

1. プロフィール用のリポジトリを作る

usernameと同じ名前のpublicリポジトリでを作成してください.この際,READMEファイルも一緒に作成してください.
僕の場合だと,kanaji2002というユーザネームなので,kanaji2002というpublicリポジトリを作成しました.

2. ワークフローファイルを作る

リポジトリで Add file -> Create new file を選んで、以下のようなファイル名でワークフローファイルを作成します。

  • ファイル名: .github/workflows/profile-3d.yml

スケジュールは1日1回開始するように設定されています。
起動時間を都合の良い時間に修正してください。

cron の指定は UTC なので、そこだけ注意してください。
以下のサンプルは日本時間の深夜(早朝)の3時に動くようになっています。

下記のコードを張り付けてください.

.github/workflows/profile-3d.yml

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
      - uses: yoshi389111/github-profile-3d-contrib@0.7.1
        env:
          GITHUB_TOKEN: ${{ secrets.GIT_HUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email github-actions@github.com
          git add -A .
          git commit -m "generated"
          git push

ここで変更するもの

  • 指定する時間くらいです(任意)

変更しなくても大丈夫なもの

  • uses: yoshi389111/github-profile-3d-contrib@0.7.1
    はこのままです.
  • GITHUB_TOKEN: ${{ secrets.GIT_HUB_TOKEN }} 
    これもこのままでOKです.secrets(フォルダ)から,GIT_HUB_TOKENというアクセストークンを呼び出しています.
    アクセストークンを公開ファイル上に直書きできないので,secretsフォルダに,自由に命名可能な変数(ここではGIT_HUB_TOKEN)にアクセストークンを登録して,そこから呼び出すようになっています.登録方法は後で解説します.
  • USERNAME: ${{ github.repository_owner }} これも,githubから,ownerの名前を呼び出してきているので,このままでOKです.

つまり,このコードはいじらず,コピペするだけでいいのですが,大変なのはこの後の登録です.

3. アクセストークンの発行

① プロフィールのsettings(画面右側)
Developer settings(画面左側の一番下)
Personal access tokens
Tokens(classic)
Generate new token
Generate new token (classic)
⑦名前は自由,repoにチェックを入れ,generate token & どこかにコピー

4. アクセストークンのsecrets化

①作成したプロジェクトに戻り,settings
②左側の Secrets and variables -> Actions
new repository secret
④name :GIT_HUB_TOKENS (ファイル内で登録した名前),
secret : コピーしておいたアクセストークン
⑤Add secret

5.注意すること.

私は,何度もエラーになりましたが,下記の方法で解決することができました.
作成したプロジェクトのsettings -> Actions-> General
内の,Workflow permissionsのブロックの,Read and write permissionsにチェックを入れる.

私はここにチェックを入れたことで,エラーが解決しました.

6. 実行方法

作成しているREADMEファイルの中に下記の内,どれかを記入します.どれでもいいです.
下記は,上から順に,
緑(アニメーションあり)
緑(アニメーションなし)
カラフル(アニメーションあり)
カラフル(アニメーションなし)です.

README

![](./profile-3d-contrib/profile-green-animate.svg)

![](./profile-3d-contrib/profile-green.svg)

![](./profile-3d-contrib/profile-season-animate.svg)

![](./profile-3d-contrib/profile-season.svg)

その後,手動で動かす場合は,下記です.
Actions -> GitHub-Profile-3D-Contrib -> Run workflow
成功していれば,自分のプロフィールに反映されていると思います.

手動で動かして問題がないようであれば,指定した時刻に自動で反映されます.

反映された例です.

image.png

本家

下記は,この3Dモデルの本家の方です.今回,ところどころ詰まった点があったため,本記事で補足を行いました.

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?