GitHub Readme Stats を利用してGitHubプロフィールをカッコよくする

はじめに

GitHubの統計情報を動的生成してくれる GitHub Readme Stats¹ を利用して、GitHubプロフィール²をカッコよくする方法を紹介します。
具体的には、以下のようにGitHubプロフィールの上部に統計情報を表示できるようになります。

公式のREADME には以下のように記載されており、元々GitHubプロフィール用README.mdでの利用を想定して作られたサービスですので、みなさんもGitHub Readme Statsを利用してGitHubプロフィールを充実させてみましょう

Get dynamically generated GitHub stats on your readmes!

DeepL翻訳。

あなたの readmes に動的に生成された GitHub の統計情報を取得しましょう!

動的に生成できる統計情報

GitHub Readme Stats では3つの統計情報を動的に生成できます。
以下は私のGitHubアカウント zizi4n5 を使って統計情報を動的生成した例になります。
username、repo の部分をご自分のGitHubアカウント名、リポジトリ名に変更して試してみてください。

• GitHub Stats Card
  https://github-readme-stats.vercel.app/api?username=zizi4n5
  

• GitHub Extra Pins³
  https://github-readme-stats.vercel.app/api/pin/?username=zizi4n5&repo=homebridge-switchbot-for-mac
  

• Top Languages Card
  https://github-readme-stats.vercel.app/api/top-langs/?username=zizi4n5
  

• Top Languages Card (Compact layout)
  https://github-readme-stats.vercel.app/api/top-langs/?username=zizi4n5&layout=compact
  

カスタマイズ

GitHub Readme Stats では、URLパラメータを利用して様々なカスタマイズを行うことができます。
今回はカスタマイズ可能なオプションの中から、代表的なものをいくつか紹介します。⁴

GitHub Stats Card 用オプション

1. アイコンを表示する(show_icons=true)
   https://github-readme-stats.vercel.app/api?username=zizi4n5&show_icons=true
   
2. 統計情報のカウントにprivateリポジトリを含める(count_private=true)
   https://github-readme-stats.vercel.app/api?username=zizi4n5&count_private=true
   

GitHub Extra Pins 用オプション

1. リポジトリのOwnerを表示する(show_owner=true)
   https://github-readme-stats.vercel.app/api/pin/?username=zizi4n5&repo=homebridge-switchbot-for-mac&show_owner=true
   

共通オプション

1. テーマを変更する(theme=XXXX)
   https://github-readme-stats.vercel.app/api?username=zizi4n5&count_private=true&theme=dracula
   
   テーマは20個ほど用意されていたので、Available Themes を確認してみてください。

GitHubプロフィール用のREADME.mdで表示する方法

GitHub Readme Stats の結果はSVG形式で返却されてくるため、Markdownでは以下のように画像URLとして表示できます。

GitHub Stats Card

![GitHub Stats Card](https://github-readme-stats.vercel.app/api?username=zizi4n5)

GitHub Extra Pins

![GitHub Extra Pins](https://github-readme-stats.vercel.app/api/pin/?username=zizi4n5&repo=homebridge-switchbot-for-mac)

Top Languages Card

![Top Languages Card](https://github-readme-stats.vercel.app/api/top-langs/?username=zizi4n5)

Top Languages Card (Compact layout)

![Top Languages Card (Compact layout)](https://github-readme-stats.vercel.app/api/top-langs/?username=zizi4n5&layout=compact)

横に並べて表示したい場合

公式に横に並べたい場合のTipsとして、HTMLタグを利用する例が記載されていました。
私のGitHubプロフィールでは、このやり方でGitHub Stats CardとTop Languages Cardを横に並べて表示するようにしています。

<a href="https://github.com/anuraghazra/github-readme-stats">
  <img align="left" src="https://github-readme-stats.vercel.app/api?username=zizi4n5&count_private=true&show_icons=true" />
</a>
<a href="https://github.com/anuraghazra/github-readme-stats">
  <img align="left" src="https://github-readme-stats.vercel.app/api/top-langs/?username=zizi4n5" />
</a>

GitHubプロフィール

以下の手順でリポジトリとREADME.mdを作成することで、GitHubプロフィールの表示をカスタマイズすることができます。

1. GitHubアカウント名と同じ名前のリポジトリを作成する（私の場合はzizi4n5というリポジトリを作成する）
2. 1で作成したリポジトリにREADME.mdを作成する
3. 2で作成したREADME.mdにGitHubプロフィールに表示したい内容を追記する

これまでの内容を試した結果、最終的に私のGitHubプロフィール表示は以下のようにしました。
自分的にはカッコよくなった気がしたので、満足のいく結果となりました。
（カッコいいと思えなかった人はごめんなさい ）

最後に

今回紹介した以外にも細かいカスタマイズが可能でしたので、興味がある方は公式のREADMEを読んでいただくと面白いと思います。

1. stats ってどういう意味だろう と思って調べたのですが、統計データ、統計情報といった意味でした。 ↩

2. GitHubプロフィールとは、https://github.com/GitHubアカウント名 にアクセスした時に表示されるGitHubアカウント毎のトップページのことです。 ↩

3. GitHub Extra Pins の説明に、 GitHub extra pins allow you to pin more than 6 repositories in your profile using a GitHub readme profile. という記載があるため、GitHubプロフィールに7個以上のrepositoryをピン留めしたい場合に利用するための機能のようです。 ↩

4. Top Languages Card (Compact layout) も、URLパラメータ layout=compact でのカスタマイズとなります。 ↩