🌟

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

2022/10/01に公開

8件

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

badges

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

更新

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

作ったもの

https://badgen.org/

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

Badge Generator

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

仕組み

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

Architecture

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

こんな感じで使えます。

// `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"...