メインコンテンツへスキップ
kt-tech.blog

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

実装7分で読めます

この記事でわかること

  • Imagen 4 Fast でカテゴリ別に統一感のある幾何学画像を生成するプロンプト設計
  • 生成 → R2 アップロード → Notion プロパティ更新までを繋ぐパイプライン
  • 画像にテキストを入れさせないための書き方と、レート制限への対応
  • そして、毎回生成するのをやめて使い回しに切り替えた理由

Google Cloud の有料プラン(Imagen API は無料プランでは使えません)、Gemini API キー、Cloudflare R2 バケット、Node.js 18 以上。

概要: Google Gemini の Imagen 4 Fast APIを使って、ブログ記事のeyecatch画像をカテゴリ別に自動生成し、Cloudflare R2にアップロード、Notionのプロパティを自動更新する仕組みを構築しました。

はじめに

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


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

Google Cloudの準備

  1. Google Cloud Consoleでプロジェクト作成
  2. Generative Language API を有効化
  3. 無料トライアル→有料プランにアップグレード(Imagen APIは有料プラン必須)
  4. APIキーを発行

利用可能なモデル

モデル 特徴
imagen-4.0-generate-001 高品質、低速
imagen-4.0-fast-generate-001 高速、十分な品質
imagen-4.0-ultra-generate-001 最高品質
gemini-2.5-flash-image (Nano Banana) テキスト描画が得意

今回は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.

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

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

JavaScript
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. 画像生成の実装

JavaScript
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画像データ
  });
}

レスポンス構造

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

4. R2へのアップロード

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

JavaScript
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プロパティとカバー画像に設定。

JavaScript
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秒間隔で実行。

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

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


Tips

Tips
Imagen API は無料プランでは使えない。Google Cloud の有料プランへのアップグレードが必須(無料トライアルクレジットは使える)
Tips
「No text」をプロンプトに入れてもテキストが生成されることがある。「Pure visual abstract art only」を追加すると改善する
Tips
同じプロンプトでも毎回異なる画像が生成される。気に入らない画像は個別に再生成可能
Tips
R2 のパブリック URL は pub-{hash}.r2.dev 形式。カスタムドメインも設定可能
メモ
後日談:結局、毎回生成するのはやめました。仕組みとしては動くのですが、1 枚あたり数十円かかるので、記事を書くたびに回すには割に合いません。現在はカテゴリごとに作った幾何学画像を使い回す運用にしています。もともと「ブログ全体の統一感」が目的だったので、同じ絵柄が並んでも困らないという判断です。一括で基本パターンを揃えるときだけ API を使うというのが、実運用での落としどころでした。

参考リンク

まとめ

  • Imagen 4 Fastで十分な品質のeyecatch画像を自動生成できる
  • カテゴリ別カラーパレットでブログ全体に統一感を出せる
  • テキストなしの幾何学デザインが最も安定する
  • R2 + Notion API更新で完全自動化パイプラインが構築可能
  • レート制限は15秒間隔で回避

更新履歴

  1. 後日談を追加(コストの問題で毎回生成するのをやめ、カテゴリごとの画像を使い回す運用に切り替えたこと)。誤字を修正(紒→約、全角数字を半角に)。プロンプトのコードブロックの言語指定を javascript から text に修正。空の「目次」見出しを自動目次に差し替え。引用形式の Tips を callout に統一。参考リンクの URL 重複表記をタイトル付きに整理し、関連記事を追加。「この記事でわかること」「対象読者」「前提条件」を概要プロパティへ移動。

この記事のタグ