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

## GitHubのプロフィール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/ab56571a-8ba5-ca9c-d3d5-87ede503aff8.png)
https://github.com/kanaji2002

## 草について
GitHubでは，コミット等のアクションがあった場合，下記のようにマスが緑になります．緑が濃いほど多く活動していることを示しています．（自分は少なくて恥ずかしいです...）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/dbf10c85-b9fa-21a5-4a2e-75bb50912fc8.png)

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

## 作成方法
### 1. プロフィール用のリポジトリを作る
usernameと同じ名前のpublicリポジトリでを作成してください．この際，READMEファイルも一緒に作成してください．
僕の場合だと，kanaji2002というユーザネームなので，kanaji2002というpublicリポジトリを作成しました．

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

* ファイル名： `.github/workflows/profile-3d.yml`

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

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

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

``` bash: .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ファイルの中に下記の内，どれかを記入します．どれでもいいです．
下記は，上から順に，
緑（アニメーションあり）
緑（アニメーションなし）
カラフル（アニメーションあり）
カラフル（アニメーションなし）です．

``` bash : 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/a7e2d8c1-f153-f2da-92ba-e5dc7bd5dae6.png)





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

https://qiita.com/yoshi389111/items/4471c7a73f785fed4615