はじめに
GitHubの統計情報を動的生成してくれる GitHub Readme Stats1 を利用して、GitHubプロフィール2をカッコよくする方法を紹介します。
具体的には、以下のように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 Pins3
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パラメータを利用して様々なカスタマイズを行うことができます。
今回はカスタマイズ可能なオプションの中から、代表的なものをいくつか紹介します。4
GitHub Stats Card 用オプション
-
アイコンを表示する(show_icons=true)
https://github-readme-stats.vercel.app/api?username=zizi4n5&show_icons=true
-
統計情報のカウントにprivateリポジトリを含める(count_private=true)
https://github-readme-stats.vercel.app/api?username=zizi4n5&count_private=true
GitHub Extra Pins 用オプション
-
リポジトリのOwnerを表示する(show_owner=true)
https://github-readme-stats.vercel.app/api/pin/?username=zizi4n5&repo=homebridge-switchbot-for-mac&show_owner=true
共通オプション
-
テーマを変更する(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 Extra Pins
Top Languages Card
Top Languages Card (Compact layout)
横に並べて表示したい場合
公式に横に並べたい場合の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プロフィールの表示をカスタマイズすることができます。
- GitHubアカウント名と同じ名前のリポジトリを作成する（私の場合はzizi4n5というリポジトリを作成する）
- 1で作成したリポジトリにREADME.mdを作成する
- 2で作成したREADME.mdにGitHubプロフィールに表示したい内容を追記する
これまでの内容を試した結果、最終的に私のGitHubプロフィール表示は以下のようにしました。
自分的にはカッコよくなった気がしたので、満足のいく結果となりました。
（カッコいいと思えなかった人はごめんなさい 
）
最後に
今回紹介した以外にも細かいカスタマイズが可能でしたので、興味がある方は公式のREADMEを読んでいただくと面白いと思います。
-
stats ってどういう意味だろう
と思って調べたのですが、統計データ、統計情報といった意味でした。 ↩ -
GitHubプロフィールとは、
https://github.com/GitHubアカウント名にアクセスした時に表示されるGitHubアカウント毎のトップページのことです。 ↩ -
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をピン留めしたい場合に利用するための機能のようです。 ↩ -
Top Languages Card (Compact layout) も、URLパラメータ layout=compact でのカスタマイズとなります。 ↩