Zenn や Qiita や AtCoder のバッジを生成できるサービスを公開しました

こういうのを生成できるやつです。

ぜひ GitHub Profile とかに使ってください。
ちなみに AtCoder のバッジの色はレーティングによって変化します。

更新

• 2022/10/02 : バッジのラベルをカスタマイズできるようになりました。

作ったもの

https://badgen.org/

ユーザー名とスタイルを指定して好きなバッジを選んでコピーして使ってください。

Badge Generator

ソースコードはこちらです。

https://github.com/koki-develop/badge-generator

仕組み

Google Cloud Run 上で Next.js アプリケーションを動かしているだけのシンプルな構成です。
API は Next.js の API Routes を使用しており、リクエストを受け取ったときに Zenn や Qiita などからからデータを取得してバッジの SVG を生成して返すようにしています。
Zenn や Qiita などから取得したデータは一定期間 Firestore にキャッシュしています。

バッジの生成には Shields.io で使われている badge-maker という npm パッケージを使っています。

https://www.npmjs.com/package/badge-maker
https://github.com/badges/shields/tree/master/badge-maker

こんな感じで使えます。

// `badge-maker` は色々と機能が制限されている (ロゴが設定できないなど) ため、
// `badge-maker/lib/make-badge` を参照しています。
const makeBadge = require("badge-maker/lib/make-badge");

const svg = makeBadge({
  logo: "data:image/svg+xml;base64,...", // ロゴの Data URL
  label: "label", // ラベル
  labelColor: "#00ff00", // ラベルの背景色
  message: "message", // メッセージ
  color: "#ff0000", // メッセージの背景色
  style: "plastic", // スタイル
});

console.log(svg);
// => <svg xmlns="http://www.w3.org/2000/svg"...

まとめ

「使ったよー」とか教えてくれたら泣いて喜びます。