CoconalaのサービスサムネイルをDALL-Eで自動生成する

このレシピでできること

Coconalaのサービスページに使うサムネイル画像を、Playwright経由でChatGPT（DALL-E）に生成させて自動保存します。毎回ChatGPTを手動操作する手間がなくなり、プロンプトを変えるだけで複数サービスの画像を連続生成できます。

必要なもの

• Node.js（v18以上）
• Playwright（npm install playwright）
• ChatGPT Plus（DALL-E利用に必要）
• ChromeブラウザとChatGPTへのログイン済みセッション

手順

Step 1. ChromeをCDPモードで起動する

Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  -ArgumentList '--remote-debugging-port=9222','--user-data-dir=C:\Users\[ユーザー名]\AppData\Local\Google\Chrome\User Data','https://chatgpt.com'

起動後、ChatGPTにログインしてから次のステップへ進む。

Step 2. スクリプトを作成する

import { chromium } from 'playwright'
import { writeFileSync, mkdirSync, existsSync } from 'fs'
import { resolve } from 'path'

const OUTPUT_DIR = resolve('./thumbnails')
if (!existsSync(OUTPUT_DIR)) mkdirSync(OUTPUT_DIR, { recursive: true })

const PROMPT = `Create a 1200x1200px square thumbnail.
Dark background (#080808). Flat design. No photos, no real people.
[ここに画像の詳細な指示を書く]`

async function main() {
const browser = await chromium.connectOverCDP('http://127.0.0.1:9222')
const context = browser.contexts()[0]
const page = context.pages().find(p => p.url().includes('chatgpt.com'))

await page.goto('https://chatgpt.com/', { waitUntil: 'domcontentloaded' })
await page.waitForTimeout(3000)

const inputEl = page.locator('#prompt-textarea').first()
await inputEl.waitFor({ timeout: 15000 })
await inputEl.click()
await page.evaluate(async (text) => { await navigator.clipboard.writeText(text) }, PROMPT)
await page.keyboard.press('Control+v')
await page.waitForTimeout(1000)

// 画像レスポンスを先にインターセプト登録
const imageRespPromise = page.waitForResponse(
resp => resp.url().includes('oaiusercontent') || resp.url().includes('chatgpt.com/backend-api/files'),
{ timeout: 180000 }
).catch(() => null)

await page.click('button[data-testid="send-button"]')
await page.waitForFunction(() => !document.querySelector('[data-testid="stop-button"]'), { timeout: 180000 })

const imageResp = await imageRespPromise
if (imageResp) {
const body = await imageResp.body()
const text = body.toString('utf8')
let imageBuffer = body
if (text.startsWith('{')) {
const json = JSON.parse(text)
if (json.download_url) {
const buf = await page.evaluate(async (url) => {
const res = await fetch(url, { credentials: 'include' })
const blob = await res.blob()
return new Promise(r => {
const reader = new FileReader()
reader.onload = () => r(Array.from(new Uint8Array(atob(reader.result.split(',')[1]).split('').map(c => c.charCodeAt(0)))))
reader.readAsDataURL(blob)
})
}, json.download_url)
imageBuffer = Buffer.from(buf)
}
}
writeFileSync(resolve(OUTPUT_DIR, 'thumbnail.png'), imageBuffer)
console.log('✅ 保存完了')
}

await browser.close()
}

main().catch(console.error)
```

Step 3. プロンプトを調整して実行する

PROMPT部分を変えながら実行する。「1200x1200px」「Flat design」「No photos」を必ず入れると安定する。

Step 4. 生成された画像をCoconalaにアップロードする

thumbnails/thumbnail.png をCoconalaのサービス編集画面からアップロードする。

ポイント

• ChromeのCDPポートは毎回9222に固定する（別のポートはスクリプト修正が必要）
• ChatGPTのセッションが切れていると失敗するので、起動後に必ずchatgpt.comを開いてからスクリプトを実行する
• プロンプトに「No photographs」「No real people」を入れると規約に引っかかりにくい
• 1枚あたり2〜3分かかるので複数枚の場合は順番に実行する