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

# はじめに
GitHubの統計情報を動的生成してくれる [**GitHub Readme Stats**](https://github.com/anuraghazra/github-readme-stats)[^1] を利用して、**GitHubプロフィール**[^2]をカッコよくする方法を紹介します。
具体的には、以下のようにGitHubプロフィールの上部に統計情報を表示できるようになります。
<img width="1378" alt="出来上がりイメージ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/c43c91f3-6f89-3f05-9bd7-28e615dfd3ec.png">

[**公式のREADME**](https://github.com/anuraghazra/github-readme-stats#github-readme-stats) には以下のように記載されており、元々**GitHubプロフィール用README.mdでの利用**を想定して作られたサービスですので、みなさんも[**GitHub Readme Stats**](https://github.com/anuraghazra/github-readme-stats)を利用してGitHubプロフィールを充実させてみましょう :thumbsup: 

> Get dynamically generated GitHub stats on your readmes!

DeepL翻訳。

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


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

[**GitHub Readme Stats**](https://github.com/anuraghazra/github-readme-stats) では3つの統計情報を動的に生成できます。
以下は私のGitHubアカウント [**zizi4n5**](https://github.com/zizi4n5) を使って統計情報を動的生成した例になります。
**username**、**repo** の部分をご自分のGitHubアカウント名、リポジトリ名に変更して試してみてください。

* [GitHub Stats Card](https://github.com/anuraghazra/github-readme-stats#github-stats-card)
https://github-readme-stats.vercel.app/api?username=zizi4n5
![Shingo Takagi's github stats](https://github-readme-stats.vercel.app/api?username=zizi4n5)

* [GitHub Extra Pins](https://github.com/anuraghazra/github-readme-stats#github-extra-pins)[^3]
https://github-readme-stats.vercel.app/api/pin/?username=zizi4n5&repo=homebridge-switchbot-for-mac
![GitHub Extra Pins](https://github-readme-stats.vercel.app/api/pin/?username=zizi4n5&repo=homebridge-switchbot-for-mac)

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

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


# カスタマイズ
[**GitHub Readme Stats**](https://github.com/anuraghazra/github-readme-stats) では、URLパラメータを利用して様々なカスタマイズを行うことができます。
今回は[**カスタマイズ可能なオプション**](https://github.com/anuraghazra/github-readme-stats/blob/master/readme.md#customization)の中から、代表的なものをいくつか紹介します。[^4]


## GitHub Stats Card 用オプション
1. **アイコンを表示する(show_icons=true)**  
https://github-readme-stats.vercel.app/api?username=zizi4n5&show_icons=true  
![Shingo Takagi's github stats](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  
![Shingo Takagi's github stats](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  
![GitHub Extra Pins](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  
![Shingo Takagi's github stats](https://github-readme-stats.vercel.app/api?username=zizi4n5&count_private=true&theme=dracula)  
テーマは20個ほど用意されていたので、[**Available Themes**](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md) を確認してみてください。

# GitHubプロフィール用のREADME.mdで表示する方法
[**GitHub Readme Stats**](https://github.com/anuraghazra/github-readme-stats) の結果はSVG形式で返却されてくるため、Markdownでは以下のように画像URLとして表示できます。

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

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

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

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

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

公式に横に並べたい場合のTipsとして、[**HTMLタグを利用する例**](https://github.com/anuraghazra/github-readme-stats#quick-tip-align-the-repo-cards)が記載されていました。
私のGitHubプロフィールでは、このやり方で**GitHub Stats Card**と**Top Languages Card**を横に並べて表示するようにしています。

```md
<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プロフィール表示は以下のようにしました。
自分的にはカッコよくなった気がしたので、満足のいく結果となりました。
（カッコいいと思えなかった人はごめんなさい :pray: ）

<a href="https://github.com/zizi4n5">
  <img width="1378" alt="スクリーンショット 2020-07-28 21.05.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/cff39a12-3b35-7270-2fdc-dca5ceb3c94e.png">
</a>

# 最後に
今回紹介した以外にも細かいカスタマイズが可能でしたので、興味がある方は[**公式のREADME**](https://github.com/anuraghazra/github-readme-stats)を読んでいただくと面白いと思います。


[^1]: **stats** ってどういう意味だろう :thinking: と思って調べたのですが、統計データ、統計情報といった意味でした。 
[^2]: **GitHubプロフィール**とは、`https://github.com/GitHubアカウント名` にアクセスした時に表示される**GitHubアカウント毎のトップページ**のことです。
[^3]: [GitHub Extra Pins](https://github.com/anuraghazra/github-readme-stats#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** でのカスタマイズとなります。