💻

Google Antigravity で Nano Banana Pro を使った画像生成を行う方法

に公開

はじめに

こんにちは!
株式会社エクスプラザのhyodoです!

Google Antigravity には画像生成機能が搭載されていますが、デフォルトではImagen 3が使用されます。

本記事では、Google Antigravity にスクリプトを実行させることで、Nano Banana Pro(Gemini 3 Pro Image Preview)による画像生成を実現する方法を紹介します。生成した画像は、そのままアプリ開発や Web 開発に活用できます。

仕組み

┌─────────────────────────────────────────────────────────────┐
│  Google Antigravity                                         │
│                                                             │
│  [標準機能]          [スクリプト実行]                         │
│       │                    │                                │
│       ▼                    ▼                                │
│   Imagen 3           generate-images.js                     │
│                            │                                │
│                            ▼                                │
│                    Gemini 3 Pro Image Preview               │
└─────────────────────────────────────────────────────────────┘
                             │
                             ▼
                    高品質な画像ファイル
                             │
                             ▼
               Web サイト / アプリで活用

手順

1. API キーの準備

Google AI Studio で Gemini API キーを取得して有償化し、環境変数に設定します。

# Linux/macOS
export GEMINI_API_KEY="your-api-key-here"

# Windows (PowerShell)
$env:GEMINI_API_KEY="your-api-key-here"

2. 画像生成スクリプトを作成し、配置

以下のスクリプトをプロジェクト内に配置します(例: scripts/generate-image.js)。

import https from 'https';
import fs from 'fs';
import path from 'path';

const API_KEY = process.env.GEMINI_API_KEY;
const MODEL = 'gemini-3-pro-image-preview';
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:generateContent`;

// 引数からプロンプトと出力パスを取得
const prompt = process.argv[2];
const outputPath = process.argv[3];

if (!prompt || !outputPath) {
  console.error('使用方法: node generate-image.js "<プロンプト>" "<出力パス>"');
  process.exit(1);
}

async function generateImage(prompt) {
  const requestData = {
    contents: [{ parts: [{ text: prompt }] }],
    generationConfig: {
      temperature: 1.0,
      topP: 0.95,
      topK: 40,
      maxOutputTokens: 8192
    }
  };

  return new Promise((resolve, reject) => {
    const requestBody = JSON.stringify(requestData);
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-goog-api-key': API_KEY,
        'Content-Length': Buffer.byteLength(requestBody)
      }
    };

    const req = https.request(API_URL, options, (res) => {
      let data = '';
      res.on('data', (chunk) => { data += chunk; });
      res.on('end', () => resolve(JSON.parse(data)));
    });

    req.on('error', reject);
    req.write(requestBody);
    req.end();
  });
}

async function main() {
  console.log(`生成中: ${prompt}`);
  
  const response = await generateImage(prompt);
  
  if (response.candidates?.[0]?.content?.parts) {
    for (const part of response.candidates[0].content.parts) {
      if (part.inlineData?.data) {
        const buffer = Buffer.from(part.inlineData.data, 'base64');
        fs.mkdirSync(path.dirname(outputPath), { recursive: true });
        fs.writeFileSync(outputPath, buffer);
        console.log(`✓ 画像を保存しました: ${outputPath}`);
      }
    }
  }
}

main();

使用例:

node scripts/generate-image.js "豪華なホテルの外観、夕暮れ、フォトリアリスティック" "images/hero.jpeg"

プロンプトと出力パスを引数で受け取るため、Google Antigravity がスクリプト実行時に適切なプロンプトを生成して指定できます。

3. Google Antigravity にスクリプトを利用して画像を生成するよう指示

4. スクリプトを利用した画像生成が行われる

スクリプトを実行し、Nano Banana Proによって生成された画像が保存されます。

5. 生成した画像の活用

アプリケーションの開発をGoogle Antigravity に指示する際に、同様にスクリプトを利用して生成した画像を利用するよう伝えると、スクリプトを利用して生成した画像をアプリケーションに組み込んでくれます。

例:ホテルのWebサイト開発を指示

開発完了後:

開発されたWebサイト(生成された画像):


まとめ

  • Google Antigravity のデフォルト画像生成はImagen 3
  • スクリプトを配置し実行を指示することでNano Banana Proによる画像生成が可能
  • 生成した画像はアプリ開発・Web 開発にそのまま活用可能

スクリプト経由でNano Banana Proを利用することで、Googel Antigravityでの画像生成の選択肢が広がります。

最後までお読みいだだきありがとうございました🙇

参考リンク

株式会社エクスプラザ

Discussion