🌿

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

2021/04/29に公開

GitHub

GraphQL

tech

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.com/users/{USER_NAME}/contributions にアクセスしてSVGをパースするなどの方法で取得することもできますが、
2021年現在は、GraphQLのAPIが提供されているので、こちらを使う方が柔軟にクエリできてよいかと思います。