GitHub からすぐに開く
Chrome 拡張機能で、リポジトリページから GitHubCard を直接開けます。
Chrome 拡張機能をインストールリポジトリカード作成
GitHub リポジトリカード生成ツール
Star History、言語、貢献者、コミット活動を載せたカードを作れます。GitHub URL を変更して、SVG、PNG、更新される埋め込みとして使いましょう。
02デザイン画面
リポジトリをわかりやすく伝えよう。
プロジェクトの内容、価値、活動状況をカードで伝えます。
表示できるリポジトリ情報
- Star、Fork、Watch、Issue、Pull Request
- 言語の割合、トピック、ライセンス、リンク
- 貢献者のアバターとリポジトリ所有者
- Star History、コミット活動、コード変更頻度
- リリースノートやプロジェクト紹介のテキスト
デザイン画面
キャンバスエディター
リポジトリのウィジェットをキャンバスに並べ、プロジェクトの概要を 1 枚で伝えます。
リポジトリ情報
10 種類以上のデータウィジェット
Star、コミット、言語、貢献者、トピック、ライセンスなどを表示します。
埋め込み
SVG、PNG、iframe
同じカードを README、ドキュメント、紹介記事、ポートフォリオ、社内ダッシュボードに使えます。
03書き出しと埋め込み
リポジトリカードを好きな場所に。
Markdown には SVG、ドキュメントには iframe、ポートフォリオには React コンポーネントを使えます。
Markdown README への埋め込み
SVG のプロジェクトカードを README、ドキュメント、静的サイトに追加できます。
ポートフォリオとブログのプレビュー
ギャラリー、紹介記事、SNS、ポートフォリオ用に固定 PNG を書き出せます。
iframe の埋め込み
更新されるプロジェクトカードをドキュメント、紹介記事、社内ダッシュボードに埋め込めます。
<iframe
src="https://githubcard.com/facebook/react"
title="React GitHub repo card"
loading="lazy"
></iframe>React コンポーネント
SVG を小さなコンポーネントにして、ギャラリーやポートフォリオでサイズを管理できます。
function RepoCard() {
return (
<img
src="https://githubcard.com/facebook/react.svg"
alt="React GitHub repo card"
loading="lazy"
/>
);
}04作例
実際のリポジトリカードから始めよう。
公開プロジェクトのカードを開き、上に自分の owner/repo を入力すると、最新データでカードを作れます。
実際のリポジトリカードを見る
完成したカードで、プロジェクト情報、活動、所有者がどう表示されるか確認できます。
05使い方
GitHub URL から埋め込みまで、3 ステップ。
ステップ 01
URL に card を追加
公開リポジトリ URL の github の後に card を追加するか、owner/repo を入力します。
ステップ 02
プロジェクトの情報を選ぶ
活動、成長、言語、所有者、状態を伝える情報を選びます。
ステップ 03
カードを埋め込む
SVG・PNG に書き出すか、更新されるカードをドキュメント、ポートフォリオ、紹介記事に埋め込めます。
06よくある質問
リポジトリカードの質問
GitHub リポジトリカード生成ツールとは？
公開リポジトリの名前、説明、Star、Fork、言語、貢献者、活動などをまとめたカードを作るツールです。
リポジトリカードをウェブサイトや README に埋め込めますか？
はい。SVG または PNG に書き出し、README、ドキュメント、個人サイト、紹介記事、ポートフォリオで使えます。
GitHubCard はどのリポジトリデータを表示できますか？
Star、Fork、Watch、言語の割合、トピック、ライセンス、貢献者、Star History、週別コミット、コード変更頻度を表示できます。
公開リポジトリなら使えますか？
公開 GitHub リポジトリに対応しています。非公開リポジトリには対応していません。ログインで API の利用上限が増える場合があります。