カバレッジバッジとかの画像と似たようなものが自作できるのでメモ
サイト
Shields.io: Quality metadata badges for open source projects
このサイトの便利ポイント
画像生成サイトは数多があるが、このサイトの便利なところはURLで画像の中身を設定できるところ。
命名規則は簡単で
https://img.shields.io/badge/{{ラベル名}}-{{メッセージ名}}-{{色名称}}
例えばテストが通過したなどのアイコンを作りたい場合は以下のような感じのURLを指し示せばOK
https://img.shields.io/badge/test-complete-green
なお、日本語も使える。
また、動的につくる仕組みも用意しているので自前のサイトでシンプルなバッジを用意する際などには便利。
Dynamicについて
DynamicはJSONの指定位置を指し示してデータを取得する方法。
データの指定としては以下のようなルールになっている（ドキュメントらしいドキュメントがないのでざっとの説明）
| UI上の名前 | 入れるデータ |
|---|---|
| label | 左側に記載される文字 |
| data url | 今回の情報取得元のURL |
| query | 取得したい情報の位置を示す文字列。JSONの場合は$. から初めてキー名を指定してあげる。 |
| color | 右側に記載される動的文字列の色名 |
| prefix | 動的取得した文字の前に記載する文字 |
| prefix | 動的取得した文字の後に記載する文字 |
QiitaAPIを使った事例
たとえばQiitaの記事APIは以下のようなJSONになっている（完全な資料はAPIドキュメント参照）
{ "rendered_body": "<h1>Example</h1>", "body": "# Example", "coediting": false, "comments_count": 100, "created_at": "2000-01-01T00:00:00+00:00", "group": { "created_at": "2000-01-01T00:00:00+00:00", "id": 1, "name": "Dev", "private": false, "updated_at": "2000-01-01T00:00:00+00:00", "url_name": "dev" }, "id": "c686397e4a0f4f11683d", "likes_count": 100, "private": false, "reactions_count": 100, "tags": [ { "name": "Ruby", "versions": [ "0.0.1" ] } ] //#### 以下略 ### }
この場合LGTM数はlikes_countなので下記のようにURLを指定するとLGTM数を交えたアイコンが作れる。
そのため今回は下記のようにデータを指定した
| UI上の名前 | 入れるデータ |
|---|---|
| label | Qiita |
| data url | https://qiita.com/api/v2/items/f2651073fb71416b6cd7 |
| query | $.likes_count |
| color | green |
| prefix | LGTM数は |
| prefix | LGTM |
そうすると下記のようなURLが生成され、動的に画像が表示される。
https://img.shields.io/badge/dynamic/json?color=green&label=Qiita&prefix=LGTM%E6%95%B0%E3%81%AF&query=%24.likes_count&suffix=LGTM&url=https%3A%2F%2Fqiita.com%2Fapi%2Fv2%2Fitems%2Ff2651073fb71416b6cd7
