【自動化】Gemini Imagen APIでブログのeyecatch画像を自動生成してR2にアップロードする

はじめに

技術ブログの記事にeyecatch画像を毎回手動で用意するのは面倒。Gemini Imagen 4 APIを使えば、記事のカテゴリに合わせた幾何学デザインの画像を自動生成できる。生成した画像はCloudflare R2にアップロードし、NotionのEyecatchプロパティを自動更新する。

この記事でわかること

• Gemini Imagen 4 Fast APIの使い方

• カテゴリ別カラーパレットでの統一的なデザイン生成

• 画像生成→R2アップロード→Notion更新の自動化パイプライン

• Imagen APIのレート制限対策

• テキストを含まないプロンプト設計のコツ

対象読者

• ブログのeyecatch画像を自動化したい方

• Gemini APIの画像生成機能に興味がある方

• Cloudflare R2を画像ホスティングに使っている方

前提条件

• Google Cloud プロジェクト（有料プラン）

• Gemini API キー

• Cloudflare R2 バケット

• Node.js 18以上

1. Gemini Imagen APIのセットアップ

Google Cloudの準備

1. Google Cloud Consoleでプロジェクト作成

2. Generative Language API を有効化

3. 無料トライアル→有料プランにアップグレード（Imagen APIは有料プラン必須）

4. APIキーを発行

利用可能なモデル

今回はimagen-4.0-fast-generate-001を採用。

2. プロンプト設計

テキストなし指定の重要性

画像生成AIはテキストを含めがち。以下のプロンプトで徹底排除する。

Absolutely no text, no words, no letters, no labels, no numbers, no characters.
Pure visual abstract art only.

カテゴリ別カラーパレット

記事のカテゴリに応じて色味を変え、ブログ全体で統一感を出す。

const CATEGORY_COLORS = {
  'トラブルシューティング': 'warm orange, burnt sienna, cream, dark brown. Beige background.',
  '設定・環境構築': 'deep navy blue, steel blue, lavender, soft peach. Navy blue background.',
  '実装': 'emerald green, teal, sage, dark forest green. Soft mint background.',
  '設計': 'deep indigo, slate blue, dusty rose, warm taupe. Light gray background.',
  '学習メモ': 'golden yellow, amber, warm brown, mustard. Cream background.',
  '技術': 'cool gray, steel blue, ice blue, charcoal. Light silver background.',
};

共通スタイル

「円と弧が重なるマット紙風の幾何学構成」で統一。

Abstract geometric composition with overlapping translucent circles,
arcs and curved shapes. Matte paper-like texture. Flat design,
minimal, modern. 16:9.

3. 画像生成の実装

function callImagen(prompt) {
  return new Promise((resolve, reject) => {
    const url = `https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-fast-generate-001:predict?key=${API_KEY}`;
    const body = JSON.stringify({
      instances: [{ prompt }],
      parameters: { sampleCount: 1, aspectRatio: '16:9' },
    });
    // HTTPS POSTリクエスト
    // レスポンスのpredictions[0].bytesBase64Encodedがbase64画像データ
  });
}

レスポンス構造

{
  "predictions": [{
    "bytesBase64Encoded": "iVBORw0KGgo...",
    "mimeType": "image/png"
  }]
}

4. R2へのアップロード

Cloudflare R2はS3互換APIなので、AWS SDKが使える。

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

const s3 = new S3Client({
  region: 'auto',
  endpoint: process.env.R2_ENDPOINT,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY,
    secretAccessKey: process.env.R2_SECRET_KEY,
  },
});

async function uploadToR2(buffer, filename) {
  const key = `images/eyecatch/${filename}`;
  await s3.send(new PutObjectCommand({
    Bucket: 'microcms-image',
    Key: key,
    Body: buffer,
    ContentType: 'image/png',
  }));
  return `${BUCKET_URL}/${key}`;
}

5. Notion更新

アップロードした画像URLをNotionのEyecatchプロパティとカバー画像に設定。

async function updateNotionEyecatch(pageId, imageUrl) {
  await notion.pages.update({
    page_id: pageId,
    properties: {
      Eyecatch: { url: imageUrl },
    },
    cover: {
      type: 'external',
      external: { url: imageUrl },
    },
  });
}

6. レート制限対策

Imagen 4 Fastは1分あたり約5リクエストの制限がある。48記事を一括生成する場合は15秒間隔で実行。

// 各記事の処理後に15秒待機
await new Promise(r => setTimeout(r, 15000));

全48記事で紒12分。--dry-runオプションで事前に対象を確認できるようにしておくと安心。

Tips

参考リンク

• Gemini API Imagen: https://ai.google.dev/gemini-api/docs/imagen

• Cloudflare R2 Docs: https://developers.cloudflare.com/r2/

• AWS SDK for JavaScript v3: https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/

まとめ

• Imagen 4 Fastで十分な品質のeyecatch画像を自動生成できる

• カテゴリ別カラーパレットでブログ全体に統一感を出せる

• テキストなしの幾何学デザインが最も安定する

• R2 + Notion API更新で完全自動化パイプラインが構築可能

• レート制限は15秒間隔で回避