最近 GitHub リポジトリに「バッジ」を設定するため「Shields.io」というサービスを使った.README.md
をオシャレにできて,とても便利だったので紹介しようと思う.ただ数年前からあったサービスらしく,今まで使ったことがなかった!
バッジの種類の多さ
Shields.io の特徴は「バッジの種類の多さ」で,ウェブサイトを見ると,ザッと数えて 350 個以上ある.代表的なものを挙げてみた.
- ビルド結果 ( CircleCI / Travis / Codeship / Wercker / Shippable / AppVeyor など )
- ダウンロード回数 ( npm / Gem など )
- ライセンス関連 ( GPL / MIT など )
- GitHub ( issues / pull requests など )
- Docker 関連 ( Pulls / Automated build / Build Status など )
仕組み
「Shields.io」から生成した URL にアクセスすると,SVG 形式の画像がオンデマンドに生成される.以下の例は指定した GitHub リポジトリの Star 数をバッジにしている.
https://img.shields.io/github/stars/kakakakakku/redash-hands-on.svg
バッジスタイルを選べる
?style=for-the-badge
のようにパラメータを指定することで,バッジスタイルを変更することができる.バッジスタイルは7種類から選ぶことができ,デフォルトは style=flat
になっている.
style=plastic
style=flat
style=flat-square
style=for-the-badge
style=popout
style=popout-square
style=social
カスタムバッジを作れる
以下の URL パターンで値を設定すると,カスタムバッジを作ることもできる.
- SUBJECT ... タイトル
- STATUS ... ステータス
- COLOR ... 色(名前 or コード)
https://img.shields.io/badge/<SUBJECT>-<STATUS>-<COLOR>.svg
サンプルとして,以下のようなバッジが作れる.
https://img.shields.io/badge/redash-v4.0.1-ff7964.svg?style=for-the-badge https://img.shields.io/badge/kakakakakku-blog--is--my--life-232f3e.svg?style=for-the-badge
GitHub リポジトリに設定した
実際に「GitHub / Docker / カスタム」を設定した.良さ!
確認する場合は以下のリポジトリにある.
Docker イメージなら「dockeri.co」も良い
Docker イメージなら「dockeri.co」も良かった.以下の URL パターンで Docker Hub のイメージ名を設定すると,大きめのバッジを作ることができる.
http://dockeri.co/image/kakakakakku/rubocop.co
「dockeri.co」の実装は以下にある.
まとめ
- 「バッジ」を使えば GitHub の README.md をよりオシャレに表現することができる
- 「Shields.io」がとても便利だった
- Docker イメージなら「dockeri.co」も良かった