2019/05上旬、Gridsome x Netlifyを使って、実家の飲食店のサイトを公開しました。
そのときの記事はこちら。
Googleアナリティクスを見ていると、以外とアクセス数が伸びていて、だいたい一日あたりのページビューが70-100あたりをフヨフヨしています。
メニュー画像が載っていてよかったというフィードバック、2019/05末開店からお店も盛況なようで良い限りです。😚
ただ、多くの人が見てくれていることを考えると、今のしょぼいデザインではまずい（恥ずかしい）...という気持ちになりました。秋（2019/09）くらいに向けて、デザインをリニューアルしたいと思います。
デザイン→見た目繋がりで、サイトだけでなく、GitHubのリポジトリの方も見栄えをよくしたい...という欲が出てきました。
とりあえず作成したことのない、バッチを表示させてみるか...という経緯でこの記事が生まれました。
この記事なに？ 🤔
GitHub README.mdの上部によく見かける、バッチを作成→表示させる方法を調べたので、そのメモ記事です。
バッチというのは、以下のようなものを指します。
バッチを作成→SVGURLを生成してくれるサービス「shields.io」
見出しの通り、バッチを作成→SVGURLを生成してくれる「shields.io」というサービスがあります。
GitHubの「ユーザー名 / リポジトリ名」を入力すると、リポジトリの中身を解析して色々な情報のバッチを生成してくれます。他にも、CI系の情報を入力することでカバレッジやビルドの成功可否などのバッチも生成してくれるみたいです。
また、任意入寮したバッチを生成することもできます。
GitHubリポジトリの情報からバッチ作成
試しに、サイトを開発したときの以下リポジトリを対象に、ソースコードサイズのバッチを作成してみます。
手順
「shields.io」に遷移します。
Sizeのリンクをクリックします。
Code Sizeのバッチをクリックします。
画面上に表示されている通り、以下を入力します。
すると、以下のようなSVGバッチのURLが生成されます。
これを対象リポジトリのREADME.mdへ以下のように入力→コミット→Pushすることで、GitHubのREADME.mdにバッチが表示されます。
- 入力例
自分だけのバッチを作る
任意入力して、自分だけのバッチを作ることもできます。
手順
「shields.io」に遷移し、「Your Badge」と記載されているところまでスクロールします。
一番右のテキストボックスは色です。事前に用意された色（redなど）を選択 or 000〜fffまでの色を指定することが可能です。
最後に「Make Batch」ボタンを押下しますると、以下のようなバッチが作成されます。
他にもバッチ作成サイトがあった
色々探してたらありました。
- Version Badge for npm, RubyGems, PyPI, Bower and other packages
- David, a dependency management tool for Node.js projects
- npmモジュールが最新 or 遅れているかのSVGバッチを生成してくれるっぽい
おわり
色々なサービスがあるんですね。（知らなかった...orz）
お遊び感覚のリポジトリはともかく、ライブラリのリポジトリを公開する際、こういったバッチを表示しておくとかっこいいですね。
参考記事
参考にさせていただいた記事を載せておきます。
