APIウェブアプリケーションの作り方

概要

今回、ウェブアプリケーションを作成する上で使用するAPIはGoogleが提供するGemini 1.5 Proです。

Gemini 1.5 Pro は次世代の大規模言語モデル（LLM）で、優れた自然言語生成能力を持っています。この記事では、Gemini 1.5 Pro APIを利用したシンプルなウェブアプリケーションを構築する手順を解説します。

この記事で学べること

Gemini 1.5 Pro API を使うための設定方法
簡単なバックエンド（Node.js + Express）とフロントエンドの実装
APIリクエスト・レスポンスを通じてAIとやり取りする仕組みの構築

Gemini 1.5 Pro API の準備

Gemini API のアクセスを取得

Gemini 1.5 Pro を提供する公式プラットフォーム（例: Google Cloud Platform や独自のAPIポータル）にサインアップします。
アクセス権を取得し、APIキーまたは認証情報（JSON形式のサービスアカウントなど）を発行します。
管理画面で使用制限やレートリミットを確認しておきます。

OPEN AIやDeep Seekなど、他社のAPIでもほとんど同じようにアプリケーションを実装できます。

API ドキュメントの確認

Gemini 1.5 Pro API のエンドポイントや利用方法を確認します。

たとえば、以下のようなエンドポイントがあるかもしれません：

• POST /v1/models/gemini-1.5-pro/completions （テキスト生成用）

• POST /v1/models/gemini-1.5-pro/chat （チャット用）

開発環境の準備

STEP

プロジェクトディレクトリの作成

mkdir my-gemini-app
cd my-gemini-app

STEP

Node.jsプロジェクトの初期化

npm init -y

STEP

必要なパッケージのインストール

npm install express axios dotenv

express: シンプルなWebサーバーフレームワーク
axios: HTTPリクエストを送るためのライブラリ
dotenv: .env ファイルに環境変数を管理するためのライブラリ

サーバーサイドの実装

index.js ファイルを作成し、以下のコードを記述します。

require('dotenv').config(); // .env ファイルから環境変数を読み込む
const express = require('express');
const axios = require('axios');

const app = express();
const port = 3000;

// 環境変数から API キーを取得
const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
const GEMINI_API_URL = 'https://api.gemini-platform.com/v1/models/gemini-1.5-pro/completions'; // 仮のURL

// JSON リクエストボディのパース
app.use(express.json());

// フロントエンド用の静的ファイルを配信
app.use(express.static('public'));

// 動作確認用エンドポイント
app.get('/', (req, res) => {
  res.send('Hello from Gemini 1.5 Pro app!');
});

// 質問を受け付けて Gemini API に送信するエンドポイント
app.post('/ask', async (req, res) => {
  try {
    const userQuestion = req.body.question;

    if (!userQuestion) {
      return res.status(400).json({ error: 'No question provided' });
    }

    // Gemini 1.5 Pro API 呼び出し
    const response = await axios.post(
      GEMINI_API_URL,
      {
        prompt: userQuestion,
        max_tokens: 100,
        temperature: 0.7,
      },
      {
        headers: {
          'Authorization': `Bearer ${GEMINI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );

    const answer = response.data.choices[0].text.trim();
    res.json({ answer });
  } catch (error) {
    console.error('--- Gemini API Error ---');
    if (error.response) {
      console.error('Status:', error.response.status);
      console.error('Data:', error.response.data);
    } else {
      console.error('Message:', error.message);
    }
    res.status(500).json({ error: 'エラーが発生しました' });
  }
});

// サーバー起動
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

フロントエンドの実装

public/index.html の作成

フロントエンドでGemini 1.5 Proに質問を送信する簡単なフォームを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Gemini 1.5 Pro Chat App</title>
</head>
<body>
  <h1>Gemini 1.5 Pro Chat App</h1>
  <form id="questionForm">
    <input type="text" id="questionInput" placeholder="質問を入力してください">
    <button type="submit">送信</button>
  </form>
  <div id="answer"></div>

  <script>
    document.getElementById('questionForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const question = document.getElementById('questionInput').value;

      const response = await fetch('/ask', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question }),
      });

      const data = await response.json();
      document.getElementById('answer').innerText = data.answer || data.error;
    });
  </script>
</body>
</html>