Shields.ioというサービスを使用してGitHubのIssueとコミット数をバッジで表示してみたいと思います。

最近ではだいたいのサービス(TravisやCircleとかのCI系のサービスとか、Waffle.ioとかのプロジェクト管理系のサービスとか、その他もろもろのサービス)でそのままコピペしてはっつければWebページにバッジを表示できるコードが書いてあります。
しかし、そういったサービスを使用せずにGitHubのIssueとコミット数をバッジで表示したい…そう。下記のような感じで。

もちろん、一切なんのサービスも使用せずにバッジを表示するのは非常に手間がかかるので、バッジに特化したShields.ioを使用します。これだとアカウントの登録や連携も不要でバッジを表示することができます。

ただ、URLの指定に少し手間取ったので指定方法について書きます。

URLの指定方法


Issueの数

Issueの数を書くには下記のようにユーザー名とリポジトリを指定します。

1
2
3
4
5
# OpenなIssue
https://img.shields.io/github/issues/user_name/repository.svg

# ClosedなIssue
https://img.shields.io/github/issues-closed/user_name/repository.io.svg

コミット数

とあるタグからのコミット数のみ表示できるようです。
従って、まずタグをpushします。

次に以下のようにユーザー名とリポジトリとタグ名を指定します。

1
2
# とあるタグからのコミット数の指定
https://img.shields.io/github/commits-since/user_name/repository/tag_name.svg

ただし、このコミット数はタグ以降のコミット数が表示されるので、たとえ最初のコミットにタグを打ったとしても最初のコミットはカウントされないみたいです。

MarkdownとHTMLで書いてみる

Open IssueをMarkdonwとHTMLで書いてみましょう。
こんな感じでしょうか。下記のコードは私のリポジトリで書いてますので、URLは各々のリポジトリに合わせて変更してください。

Markdown

1
2
3
4
5
# リンクなしの場合
![](https://img.shields.io/github/issues/YoshinoriN/YoshinoriN.github.io.svg)

# リンクありの場合
[![](https://img.shields.io/github/issues/YoshinoriN/YoshinoriN.github.io.svg)](https://github.com/YoshinoriN/YoshinoriN.github.io/issues?q=is%3Aopen+is%3Aissue)

HTML

1
2
3
4
5
# リンクなしの場合
<img src='https://img.shields.io/github/issues/YoshinoriN/YoshinoriN.github.io.svg' alt=''/>

# リンクありの場合
<a href="https://github.com/YoshinoriN/YoshinoriN.github.io/issues?q=is%3Aopen+is%3Aissue"><img src='https://img.shields.io/github/issues/YoshinoriN/YoshinoriN.github.io.svg' alt=''/>

実際に表示してるページ


ActivityページにGitHubのIssueとコミット数を貼り付けてみました