README バージョン生成ツール (Shields.io 風)

READMEバッジジェネレーター

READMEバッジジェネレーターは、ブラウザ内でピクセル完全なShields.ioスタイルのバッジを直接生成します。プレセットを選択するか、ラベルとメッセージを自作し、色とスタイル（フラット、フラットスクエア、バッジ用、またはプラスチック）を選択し、Markdown、HTML、SVG、およびデータURL出力を受け取ります。外部API呼び出し、ネットワーク依存、サービスがダウンしたときに破損するバッジはなく、SVGはクライアントサイドで生成され、インラインで埋め込まれます。

使用方法

1. テンプレートドロップダウンからプレセットを選択するか、カスタムに保ち、自作のラベルとメッセージを入力します。
2. ラベル色とメッセージ色を選択してください — Shields.ioのプレセット色またはカスタムヘキサコード。
3. バッジスタイルを選択してください：フラット、フラットスクエア、バッジ用、またはプラスチック。
4. ライトおよびダーク背景でのライブプレビューが更新されます。
5. Markdown、HTML、URL、またはraw SVGをコピーするか、SVGファイルをダウンロードします。

機能

• 4つのバッジスタイル – フラット、フラットスクエア、バッジ用（大文字、高さが大きい）、およびグラデーションシャドウ付きプラスチック。
• 含まれるプレセット – バージョン、ライセンス、ビルドステータス、カバレッジ、ダウンロード、スター、および「愛を込めて作られた」テンプレート。
• ライブプレビュー – ライト／ダーク背景の切り替えで即時レンダリングされ、バッジが異なるREADMEテーマにどのように見えるかを確認できます。
• 4つの出力形式 – Markdown、HTML imgタグ、SVGデータURL、およびraw SVGマーカー。
• 自立型SVG – テキストは実際のSVGテキストノードとしてレンダリングされ、幅が測定され、ドロップシャドウ、適切な場合に丸みをもたせます。
• カスタムカラー – Shields.ioの標準パレットに加えて、自由形式のヘキサコード選択器。
• 100%クライアントサイド – API呼び出し、トラッキング、レート制限なし。ページが読み込まれた後はオフラインで動作します。
• ワンクリックコピーとSVGダウンロード – スタンドアローンの.svgファイルをエクスポートし、任意のリポジトリにドロップできます。

一般的な使用例

• オープンソースREADME – ビルドステータス、バージョン、ライセンス、カバレッジ、またはダウンロード数を一目で確認できます。
• プロジェクトダッシュボード – 内部Wikiやドキュメントサイトに一貫したステータスバッジを埋め込みます。
• ポートフォリオサイト – プロジェクトカードにスタイルされたタグを装飾し、外部画像サービスを読み込まないでください。
• マーケティングページ – 「made with」やカスタムバッジを軽量なアクセントグラフィックとして使用できます。
• オフラインドキュメント – shields.ioをブロックしているファイアウォールの後でもバッジがレンダリングされます。

なぜローカルでバッジを生成するのか

リモートバッジサービスは便利ですが、誰かがREADMEを読み込むたびにネットワークのホップを加えます。そのサービスが遅延したり、レート制限されたり、デフォルトを変更した場合、バッジが静かに壊れます。ローカルで生成されたSVGは1つの静的ファイルであり、どこでもMarkdownまたはHTMLでレンダリングされ、リポジトリに同梱され、サービスのダウン時に耐えられます。また、色、スペース、フォント重量の完全な制御により、組織全体に一貫した視覚スタイルを実現できます。