kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

GitHub の README.md をバッジでオシャレにできる Shields.io と dockeri.co

最近 GitHub リポジトリに「バッジ」を設定するため「Shields.io」というサービスを使った.README.md をオシャレにできて,とても便利だったので紹介しようと思う.ただ数年前からあったサービスらしく,今まで使ったことがなかった!

shields.io

バッジの種類の多さ

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 badge
  • style=flat badge
  • style=flat-square badge
  • style=for-the-badge badge
  • style=popout badge
  • style=popout-square badge
  • style=social badge

カスタムバッジを作れる

以下の 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

badge

badge

GitHub リポジトリに設定した

実際に「GitHub / Docker / カスタム」を設定した.良さ!

f:id:kakku22:20180808190355p:plain

確認する場合は以下のリポジトリにある.

github.com

github.com

Docker イメージなら「dockeri.co」も良い

Docker イメージなら「dockeri.co」も良かった.以下の URL パターンで Docker Hub のイメージ名を設定すると,大きめのバッジを作ることができる.

http://dockeri.co/image/kakakakakku/rubocop.co

dockeri.co

「dockeri.co」の実装は以下にある.

github.com

まとめ

  • 「バッジ」を使えば GitHub の README.md をよりオシャレに表現することができる
  • 「Shields.io」がとても便利だった
  • Docker イメージなら「dockeri.co」も良かった