🌿

GitHubの草の情報をAPIで取得する方法

3 min read

TL;DR

ちょっとした用事でGitHubの草情報が必要になったので、取得する方法を調べてみたところ、
スクレイピングして草(svg)を解析する方法ばかりヒットしたので、
「ホントにそんなことしなきゃダメなの???」 と思い、
APIを調べた。

結論: GitHub API v4(GraphQL) で取れた。

REST APIの方は方法が見つからなかったので、たぶんなさそう?

必要なクエリだけ見たい人は、### 本題:草を取得する までスキップ🚶‍♂️

必要なもの

  • GitHubのアカウント(あるものとする)
  • GraphQLクライアント
  • GitHubのアクセストークン

GraphQLクライアント

Webアプリの場合

Apollo Client あたりが定番?

GUIツールの場合

GraphiQL.app を使うと手っ取り早く確認できる。
macなら brew install --cask graphiql でインストール可能。

Githubのアクセストークン

https://github.com/settings/tokens にアクセスし、パーソナルトークンを発行する。

権限のスコープ

必要になる権限のスコープは叩くフィールドによって変わるが、自分のコントリビューションを確認するだけなら、user -> read:user にチェックがついていれば最低限大丈夫だった。

GraphiQLで叩いてみる

セットアップ

  • Httpメソッドが POST になっていることを確認する
  • エンドポイントに https://api.github.com/graphql を指定する
  • Http Headerに Authorization を追加する
    • Bearer {GitHubから取得したアクセストークン} を指定する

試しに

query {
  viewer {
    login
  }
}

とクエリして

{
  "data": {
    "viewer": {
      "login": "yuichkun"
    }
  }
}

このように返って来ればOK

本題: 草を取得する

クエリ

query($userName:String!) {
  user(login: $userName){
    contributionsCollection {
      contributionCalendar {
        totalContributions
        weeks {
          contributionDays {
            contributionCount
            date
          }
        }
      }
    }
  }
}

variableの欄に以下を指定する

{
  "userName": "自分のアカウントID"
}

返り値

上記クエリを実行すると、(一部省略していますが)以下のようなデータが返ってきます。

{
  "data": {
    "user": {
      "contributionsCollection": {
        "contributionCalendar": {
          "totalContributions": 4588,
          "weeks": [
            {
              "contributionDays": [
                {
                  "contributionCount": 4,
                  "date": "2020-04-26"
                },
                {
                  "contributionCount": 4,
                  "date": "2020-04-27"
                },
                {
                  "contributionCount": 15,
                  "date": "2020-04-28"
                },
                {
                  "contributionCount": 9,
                  "date": "2020-04-29"
                },
                {
                  "contributionCount": 6,
                  "date": "2020-04-30"
                },
                {
                  "contributionCount": 8,
                  "date": "2020-05-01"
                },
                {
                  "contributionCount": 22,
                  "date": "2020-05-02"
                }
              ]
            }
	  ]
	}
      }
    }
  }
}

おそらく totalContributions に入っている値が、

この左上の 4,604 contributions in the last year の部分なのではないかと思われる。

(※が、僕の場合 4588 と返ってきたので、厳密には何か違うのかも??わかる人いたら教えてください)

contributionDays には、週ごとに草が配列になって返ってくるので、いわゆる の部分を使いたい人はココを見ればよい🎉

2021/05/01追記

草をチャートで表示できる簡単なデモも作ってみました。

任意のユーザーで試せるので、
自分の活動記録を折れ線グラフでみたい方は是非 🔥

https://github-contribution-graph-example.vercel.app

まとめ

あんまり正攻法っぽくない方法としてhttps://github.com/users/{USER_NAME}/contributions にアクセスしてSVGをパースするなどの方法で取得することもできますが、
2021年現在は、GraphQLのAPIが提供されているので、こちらを使う方が柔軟にクエリできてよいかと思います。

Discussion

ログインするとコメントできます