Thanks to visit codestin.com
Credit goes to github.com

Skip to content

kentaro/ogen

Repository files navigation

OGen: OG画像ジェネレーター

VercelでOGP画像を動的に生成するサービスです。

特徴

  • ⚡️ 高速: Vercel Edge FunctionとVercel OGライブラリによる高速なレスポンス
  • 🎨 カスタマイズ可能: グラデーション色を変更できるモダンなデザイン
  • 🖼️ PNG出力: 高品質なPNG画像を生成
  • 🧪 テスト完備: 単体テスト・統合テストによる安定性

セットアップ

必要条件

  • Node.js 18以上
  • npm

インストール

# リポジトリをクローン
git clone https://github.com/kentaro/ogen.git
cd ogen

# 依存パッケージをインストール
npm install

開発サーバー起動

npm run dev

テスト実行

npm test

テストカバレッジを確認するには:

npm run test:coverage

使い方

パラメーター

OG画像生成には以下のパラメーターを指定できます:

  • title: 画像に表示するタイトル(必須)
  • username: ユーザー名(必須)
  • gradientFrom: グラデーションの開始色(デフォルトは #EEF0FF
  • gradientTo: グラデーションの終了色(デフォルトは #FFF0F8
  • iconUrl: アイコン画像のURL(オプション)

リクエスト例

色コードは URL エンコードする必要があります:

  • 例: %2300C6FF#00C6FF

デプロイ

Vercelへのデプロイ

このプロジェクトはVercelにデプロイできます。以下の手順で行ってください:

  1. Vercel CLIをインストール(オプション)

    npm i -g vercel
  2. デプロイを実行

    vercel

または、Vercelダッシュボードからリポジトリを接続してデプロイすることもできます。

技術スタック

  • Next.js: Reactベースのフレームワーク
  • @vercel/og: Vercelの公式OG画像生成ライブラリ
  • Zod: TypeScriptファーストなバリデーション
  • Vitest: 次世代のテストフレームワーク

ライセンス

MIT

About

OG画像ジェネレーター

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published