← ブログ一覧に戻る

v251104 - OGP画像の自動生成とキューイングシステム

#release#feature#performance

v251104 - OGP画像の自動生成とキューイングシステム

リリース日: 2025年11月4日
カテゴリ: 新機能・パフォーマンス改善

🎉 新機能：投稿時のOGP画像自動生成

投稿を作成すると、SNS共有用のOGP画像が自動的に生成されるようになりました。

これまでの課題

改善内容

今回の実装により、以下が実現されました：

  1. 投稿時の自動生成

    • 投稿を作成すると、自動的にOGP画像生成がキューに追加されます
    • 手動での操作は不要になりました

  2. キューイングシステム

    • 複数の画像生成リクエストを順次処理
    • サーバー負荷を防ぐため、一度に1つずつ処理
    • 優先度とタイムスタンプに基づく処理順序

  3. リトライ機能

    • 生成に失敗した場合、最大3回まで自動的にリトライ
    • リトライ時は優先度を下げて、新しいリクエストを優先

  4. スマートなログ出力

    • 既に画像が存在する場合は、ログに出力しない（静かにスキップ）
    • 新規生成や失敗時のみ、必要な情報を出力

📋 技術的な詳細

キューシステムの仕組み

新しく作成された lib/screenshot-queue.ts により、以下の機能を提供：

interface ScreenshotJob {
  id: string;              // ジョブID
  path: string;            // スクリーンショットパス
  blogUsername: string;    // ブログのユーザー名
  postId: string;         // 投稿ID
  priority: number;       // 優先度（高いほど先に処理）
  createdAt: Date;        // 作成日時
  retries: number;        // リトライ回数
}

処理フロー

  1. 投稿作成時

    POST /api/v1/posts
↓
投稿がDBに保存される
↓
screenshotQueue.enqueue() - キューに追加
↓
自動的にバックグラウンド処理開始

  2. キュー処理

    優先度とタイムスタンプでソート
↓
1つずつ順次処理（並列数制限: 1）
↓
成功 → 完了
失敗 → リトライ（最大3回）

  3. ログ出力

    📸 Screenshot job enqueued: username/post/12345
✅ Screenshot generated: username/post/12345
❌ Screenshot generation failed: username/post/12345
🔄 Retrying screenshot (1/3): username/post/12345
💀 Screenshot generation failed permanently: username/post/12345

API変更点

pages/api/v1/[...slug].ts

投稿作成エンドポイントに、スクリーンショット生成キューへの追加処理を統合：

// 投稿作成後
screenshotQueue.enqueue({
  path: `/${blogUsername}/post/${insertedId}`,
  blogUsername,
  postId: insertedId,
  priority: 10, // 通常優先度
});

pages/api/v2.1/[...slug].ts

全投稿の画像を一括生成する /screenshot/all_posts エンドポイントを改善：

設定パラメータ

| パラメータ | 値 | 説明 |
|-----------|-----|------|
| maxRetries | 3 | 最大リトライ回数 |
| concurrentLimit | 1 | 同時処理数 |
| retryDelay | 1秒 | リトライ間隔 |

🎯 ユーザーへの影響

メリット

✅ 完全自動化 - 投稿後、何もする必要がありません
✅ 即時反映 - SNSでシェアする際、すぐにOGP画像が表示されます
✅ 安定性向上 - サーバー負荷が管理され、安定したパフォーマンス

注意点

📊 キューの状態確認（開発者向け）

キューの状態は、screenshotQueue.getStatus() で確認できます：

{
  queueLength: 5,           // キュー内のジョブ数
  processing: true,         // 処理中かどうか
  processingCount: 1,       // 現在処理中のジョブ数
  jobs: [                   // キュー内のジョブ一覧
    {
      postId: "12345",
      blogUsername: "demo",
      priority: 10,
      retries: 0,
      createdAt: "2025-11-04T03:56:07.000Z"
    }
  ]
}

🚀 今後の改善予定

💡 使用例

基本的な使い方

1. 投稿を作成する
2. 投稿が公開される
3. 自動的にOGP画像が生成される（バックグラウンド）
4. TwitterなどでシェアするとOGP画像が表示される

開発者向け：手動でキューに追加

import screenshotQueue from '@/lib/screenshot-queue';

screenshotQueue.enqueue({
  path: '/username/post/12345',
  blogUsername: 'username',
  postId: '12345',
  priority: 10,
});

開発者向け：一括生成

# すべての投稿のOGP画像を生成
curl https://intrawrite.com/api/v2.1/screenshot/all_posts

📝 関連ドキュメント

この機能により、SNSでのシェアがさらにスムーズになります！