Help us understand the problem. What is going on with this article?

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

はじめに

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

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

Get dynamically generated GitHub stats on your readmes!

DeepL翻訳。

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

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

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

カスタマイズ

GitHub Readme Stats では、URLパラメータを利用して様々なカスタマイズを行うことができます。
今回はカスタマイズ可能なオプションの中から、代表的なものをいくつか紹介します。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
  2. 統計情報のカウントにprivateリポジトリを含める(count_private=true)
    https://github-readme-stats.vercel.app/api?username=zizi4n5&count_private=true
    Shingo Takagi's github stats

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

共通オプション

  1. テーマを変更する(theme=XXXX)
    https://github-readme-stats.vercel.app/api?username=zizi4n5&count_private=true&theme=dracula
    Shingo Takagi's github stats
    テーマは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 CardTop 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.mdGitHubプロフィールに表示したい内容を追記する

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


スクリーンショット 2020-07-28 21.05.21.png

最後に

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


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

  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 でのカスタマイズとなります。 

zizi4n5
hands-lab
ハンズラボは小売業特化型ITソリューション企業です。数十万に及ぶ膨大な商品マスタを扱ってきた豊富なノウハウで、お客様の現場に最適なシステムを提案・開発します。 エンジニア募集中
https://www.hands-lab.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした