shields.ioを使うと下記みたいな形式で投げることで、Githubとかで使える便利画像が取得できる。
https://img.shields.io/badge/inamuu-dayo-skyblue.svg
社内のエンジニアさんが、レビュー時にこの画像を使って「ask,must,imo,nits」を使用していた。
これは良さそうだと思い、alfredのスニペットに登録したものの、shileds.ioが重くて全然画像が表示されない。
いい感じにレビューしたいのになんだか萎えてしまうし、レビューの生産性をあげるために導入したいので是非使いたいと思ったので、もうPNGに変換してしまうことにした。
svgをpngへ変換する
shileds.ioで取得したSVGをPNGへ変換する方法を探すことにした。
qlmanageというMacに標準で入っているコマンドが使えるということを知ったので試してみた。
qlmanage -t -s 300 -o . rvask.svg
結果
なんだかやたら余白が生まれてしまった。
多分qlmanageで-s指定した場合は縦横のサイズが共通になってしまうっぽい。
他のオプションでトリミングするみたいな良さそうなオプションがわからなかった。
imagemagickでやる
imagemagickでもsvgからpngの変換がやれるらしいということを知ったのでbrewでimagemagickをインストールしてやってみた。
convert rvask.svg -resize 75x20 rvask.svg.png
結果
なんとグレーになってしまった😇
どうやらbrewで入ってくるimagemagickにはsvgには対応していないらしいということで、svg変換ができるimagemagickを再インストールした。
svg変換ができるようにライブラリを指定すればいけるらしい。結構インストールに時間がかかる。
brew install imagemagick --with-librsvg
これで再度上記コマンドを実行してみた。
結果
文字〜〜〜
リサイズしているせいでどうも文字がガビガビになってしまった。
PRに画像を貼り付けする際にimgタグでサイズ指定すれば良い？とか思ったけど、もう面倒なので最初にqlmanageで変換したpngの余白をトリミングできないか調べた。
画像のトリミング
こんなコマンドがimagemagickに付随して使えるようになっているらしい。これで余白トリミングが行える。
mogrify -trim +repage rvask.svg.png
結果
良さそう！
ということでGithubのissueに貼り付けておいて、それをalfredのスニペットで呼び出せるように登録した。
これでレビューし放題だ！
参考にさせていただいたサイト：
https://news.mynavi.jp/article/osxhack-98/