えいのうにっき

誤字脱字・記述の誤りなどはこちら https://github.com/a-know/blog.a-know.me へお願いします

【Pixela】GitHub README とかでよく見る badge モードをサポートしました!【草APIサービス】

なぜか某巨大掲示板風のタイトルにしてみました。いかがでしたか?

冗談はさておき、本日 Pixela の v1.14.0 をリリースし、『GitHub README とかでよく見る badge モード』をサポートしました!いくつか例をお見せします。

f:id:a-know:20191119190130p:plainf:id:a-know:20191119190114p:plainf:id:a-know:20191119190101p:plain

こんなかんじです。 さっそく自分のリポジトリにもいくつか仕込んでみているので、それも合わせて見てもらえるとイメージしてもらいやすいかと思います。

f:id:a-know:20191119221850p:plain

f:id:a-know:20191119221907p:plain

最近CIが回ってないので真っ白......w

「Pixelaって何?」という、新たにPixelaについて興味を持っていただいた方は(ありがとうございます!!!)、以下の記事とかを読んでいただくとだいたいどんなものかはわかっていただけるかと思います。あ、無料です(支援はできます💖)。

仕様とか

通常、Pixelaのグラフを構成する1マス(ピクセル、と呼んでいます)はある1日のデータを表すのですが、badgeモードでは1マスは7日間(一週間)の合計を表す、としました。つまり、このバッジひとつで直近49日間のなんらかの頻度が見て取れるわけです。

色の濃さも、7日間をひとつの単位として、他の6つの7日間との値の大小を相対的に表すかんじになっています。なので、あくまで目安、という感じではありますが、そのリポジトリの活発さ、みたいなものを表すくらいの用途であれば十分利用可能だと思います。あと、バッジのラベル文字として表示される内容は、グラフ定義の unit の内容がそのまま使われます。

ちなみに、GitHub README に貼り付ける場合は GitHub サイドに画像がキャッシュされちゃう問題があるので、以下の記事内、GitHub から Pixela グラフを参照したときにキャッシュされる画像を、自動的に破棄できるように」の部分を参考にしてもらうとよさそうです。

blog.a-know.me

使いかた

以下のようなことは、badgeモードとして使わない場合と全く変わりありません。

特にこの現代においては GitHub Actions という便利なモノがあるので、それと連携させておくといいかんじにリポジトリの動向を表す指標になりそうですね。以下の活用事例やサードパーティライブラリ群も便利に使ってもらえそうです。

そうしてできたグラフに対して、 mode=badge のクエリストリングを付けてリクエストしてやるだけで、冒頭で例示したようなバッジ画像(例によってsvgです)が得られます。 https://pixe.la/v1/users/a-know/graphs/test-graph?mode=badge こんなかんじ。

README に埋め込む際には、以下のような感じにすると良さそうです。

# foobar project
## badges
[![pixela][pixela-badge]][pixela]

...

[pixela-badge]: https://pixe.la/v1/users/a-know/graphs/test-graph.svg?mode=badge
[pixela]: https://pixe.la/v1/users/a-know/graphs/test-graph.html

すでにOSSリポジトリを持っている方など、ぜひ使ってみていただいて、フィードバックなどお気軽にいただけたら嬉しいです!