[社内向け] GitHubの「草」画像をプロフィールに表示する方法、もっとコードを書いていくぞという決意を込めて

どうも！大阪オフィスの西村祐二です。

コードがかけるエンジニアになりたくてクラスメソッドに入社して約2年がたちました。

担当している案件ではLambdaであったり、SPAであったりコードをガンガン書いているのですが（案件ではGitHubではなくCodeCommitを使ってます）、OSSであったり、対外向けにもっとアウトプットしたいと思っています。

もともとGitHubのリンクをプロフィールに載せていたのですが、 みんなが目にしやすいところに、どれだけコード書いたか、アウトプットしたかを見える化してモチベーションに繋げようという目的で、プロフィールにGitHubの草の画像を載せてみました。

今回は、どうやって表示させているのか紹介したいと思います。

GitHubの草の画像って何？

GitHub上のレポジトリに対して、コードをpushなど活動状況を可視化するGitHubの機能を指します。 たくさん活動している人ほど、緑のマークが付いていき、それが草のように見えるので、「草」とか「芝生」と呼ばれます。

（がんばってたくさんコードを書いていかないとなあ）

どうやって表示させる？

まず、GitHubの画像は Grass-Graphというサイトを利用します。

Grass-Graphは、特定のGitHubアカウントのコントリビューショングラフのPNG画像を生成することができるサービスです。表示したい画像サイズ、回転角度、日付を指定することもできます。

使い方は簡単で、入力フォームに、表示させたいGitHubのIDを入力するとHTMLの画像タグのコードが出力されます。

クエリパラメータにより角度や幅などを調整することもできます。

HTMLのコードが出力されたら、あとは、ブログのプロフィール情報に貼り付けるだけです。（HTMLがそのまま使えます。）

私は画像をクリックするとGitHubのページに飛ぶように下記のようにしています。お好みで調整してください。

<a href="https://github.com/nishimura-yuji" target="_blank">
  <img src="https://grass-graph.moshimo.works/images/nishimura-yuji.png?rotate=90">
</a>

あとは更新ボタンを押せば完了です。

さいごに

ブログのプロフィールにGitHubの「草」画像を表示する方法を紹介しました。

画像を生成するサイトを利用することで簡単に表示することができました。

もっとコードをガンガンかいて、アウトプットしていきたいと思います！

誰かの参考になれば幸いです。