◉GEMINI LABEN
●ARGON — gemini-4-argon が 10/13 に GA。複雑なコーディング・エージェント・数学・科学向けです●DEEP RES — deep-research-pro-preview-12-2025 は 10/23 に停止、残り6日。移行先は deep-research-preview-04-2026●NANO — gemini-nano-banana-2.1 が GA(10/06)。gemini-3.1-flash-image は非推奨で停止日は未発表です●MCP — ツール結果が 8.5万トークンに膨らんだ事例を、ADK で 310 トークンに包んで抑えた報告が出ています●FLASH — gemini-3.7-flash と 3.5-flash は新しい Flash モデルに自動で回されます(10/08)●NEW — クラッシュ報告を毎回ゼロから読ませない — 既知バグ早見表を先に grep し…●ARGON — gemini-4-argon が 10/13 に GA。複雑なコーディング・エージェント・数学・科学向けです●DEEP RES — deep-research-pro-preview-12-2025 は 10/23 に停止、残り6日。移行先は deep-research-preview-04-2026●NANO — gemini-nano-banana-2.1 が GA(10/06)。gemini-3.1-flash-image は非推奨で停止日は未発表です●MCP — ツール結果が 8.5万トークンに膨らんだ事例を、ADK で 310 トークンに包んで抑えた報告が出ています●FLASH — gemini-3.7-flash と 3.5-flash は新しい Flash モデルに自動で回されます(10/08)●NEW — クラッシュ報告を毎回ゼロから読ませない — 既知バグ早見表を先に grep し…
記事一覧/開発ツール
⟐ 開発ツール/2026-06-30上級

Gemini API × Astro でAI機能付きコンテンツサイトを作る実装ガイド

Astro の Server Endpoints と Content Collections を Gemini API と組み合わせ、AI要約・関連記事生成・自動タグ付けを実装する手順を、動くコードとともに解説します。

gemini-api287astrocontent-sitessrai-content

✦ プレミアム記事

「Astro でブログを運営しているのですが、Next.js のチュートリアルを読んでも app/api 前提で参考にしづらい」— こうした相談を受けることが、最近とても増えてきました。Astro は静的サイト寄りに設計されているぶん、AI機能を組み込もうとすると Next.js 系の記事がそのままでは使えず、つまずいてしまう方が多いようです。

私自身もコンテンツサイトを Astro で運用していますが、Gemini API を組み合わせると、軽量で高速というAstroの長所を保ったまま、AI要約・関連記事提案・自動タグ付けといった機能を素直に追加できます。ここではその実装手順を、動くコードと一緒に整理してお伝えします。

なぜ Astro × Gemini API が相性良いのか

Astro は基本「静的サイトジェネレータ」として設計されていますが、output: 'server' または output: 'hybrid' モードに切り替えると、ページ単位でサーバー実行を有効化できます。AI機能のように「ユーザーリクエストごとに動的に生成したい」処理は、この仕組みを使って必要なページにだけサーバー機能を割り当てれば、サイト全体の高速性を犠牲にしません。

私が好きなのは、Astro の Content Collections(src/content/)が Markdown/MDX の記事メタデータを型安全に扱える点です。Gemini API で生成したサマリーや関連タグをここに流し込めば、記事一覧やカテゴリページがほぼ既存ロジックのまま動きます。

参考: Next.js 15 App Router × Gemini API フルスタック本番構築 では Next.js での同様パターンを扱っています。アプローチの違いを比較すると理解が深まります。

環境セットアップ:Astro 5 + Hybrid モード

まずは新規プロジェクトの最小構成です。Astro 5 系を前提にしています。

# プロジェクト作成
npm create astro@latest my-ai-blog -- --template minimal --typescript strict
cd my-ai-blog
 
# 公式 Gemini SDK と Node アダプターを追加
npm install @google/genai
npx astro add node

astro.config.mjs を以下のように設定します。output: 'hybrid' を選ぶと、デフォルトは静的、必要なページだけサーバー実行になります。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
 
export default defineConfig({
  output: 'hybrid',         // 静的+必要箇所のみSSR
  adapter: node({ mode: 'standalone' }),
  server: { port: 4321 },
});

APIキーは .env で管理します。Astro は import.meta.env で読み込めますが、サーバー専用の値は PUBLIC_ を付けない点が肝心です。

# .env
GEMINI_API_KEY=YOUR_GEMINI_API_KEY
✦

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること
✦リクエスト時SSR・prebuild静的・ハイブリッドをコストとレイテンシで選び分ける判断軸
✦responseSchemaのenumで語彙を閉じ、表記揺れによるタグページ重複を防ぐ自動タグ付けの実装
✦本文ハッシュで差分だけ再計算し、記事が増えてもCIビルド時間を線形に膨らませない埋め込み設計
Stripe による安全な決済 · いつでもキャンセル可能
✦

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または
メンバーシップなら全記事が読み放題 →
シェア

お読みいただきありがとうございます

Gemini Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • ✦コピー&ペーストで使える実装コード付き
  • ✦毎日新しい上級ガイドを追加
  • ✦¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

関連記事

⟐ 開発ツール2026-08-21
通知文の長さ指示が英語版だけ効かなかった理由と、生成後に幅で詰める実装
日英2言語のプッシュ通知を Gemini に生成させたところ、英語版だけが実機で途切れていました。原因は文字数での長さ指示です。表示幅の実測値と、生成後に詰めるフィッティング実装をまとめました。
⟐ 開発ツール2026-08-10
ヘルプが答えていない質問を、Gemini に問題を作らせて先に見つける
ヘルプやFAQに書いてあるのに問い合わせが止まらないとき、その資料から問いを生成し、資料本文だけで答えられるかを判定する二段構えの点検パイプラインを作ります。呼び出し設計と費用の見積もりまで含めた実装手順です。
⟐ 開発ツール2026-04-18
Gemini API × Tauri 2.0 でクロスプラットフォームAIデスクトップアプリを構築する
Tauri 2.0とGemini APIを組み合わせてmacOS・Windows・Linux対応のデスクトップAIアプリを構築する実践ガイド。Rustバックエンドによる安全なAPIキー管理、ストリーミング配信、ネイティブOS機能との連携を動くコードで解説します。