まずは骨組みを

まずは、何かを入力して返ってきたテキストを画面に表示するだけのシンプルな物から始めましょう。
HTMLで入力フォームと実行ボタンと出力エリアがある画面を作ってください。

ヘイ、Gemini。作ってください。

デキタヨー。

誰だ、この怠け者にAI与えたの。

個人サイト世代はWebデザインの知識が20年前で止まってますからね。
自分でメンテナンスできるなら手段は何でもいいですよ。

現代のホームページビルダーやぁ～

ネットスケープナビゲーターでも使ってろ。

これがさっきのHTMLのソース。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>タイトル</h1>
        </header>

        <main>
            <section class="input-section">
                <div class="input-group">
                    <label for="inputText">入力フォーム</label>
                    <textarea id="inputText"></textarea>
                </div>

                <div class="button-container">
                    <button id="generateBtn">
                        実行
                    </button>
                </div>
            </section>

            <section class="result-section" id="resultSection">
                <div class="result-header">
                    <label>出力エリア</label>
                </div>
                <div class="result-content" id="resultText"></div>
            </section>
        </main>
    </div>

    <script src="script.js"></script>
</body>

</html>

入力フォーム → inputText
ボタン → generateBtn
出力エリア → resultText

っていうIDで管理するよ。
ボタンの処理はJavaScriptで、ファイル名はscript.js。

次に、ボタンを押したときの挙動です。
入力されたテキストをAPIに渡して、戻ってきたものを出力エリアに表示しましょう。

①入力フォームの内容を取得する
↓
②APIに渡すデータを作る
↓
③データをAPIに渡す
↓
④APIから戻って来た値を受け取る
↓
⑤受け取った値を出力エリアに表示

GeminiAPIを使用しますので、ベースURLは「https://generativelanguage.googleapis.com」。
モデルはとりあえずGemini Flashの安定版（gemini-flash-latest）を指定しましょうか。

あいよ。

script.js

document.addEventListener('DOMContentLoaded', () => {
    const generateBtn = document.getElementById('generateBtn');
    const resultText = document.getElementById('resultText');

    generateBtn.addEventListener('click', async () => {
        const apiKey = "※※※とりあえずここにAPIキーを入れる※※※";
        const inputText = document.getElementById('inputText').value.trim();

        try {
            const result = await generateNovelScene(apiKey, inputText);
            resultText.textContent = result;
        } catch (error) {
            console.error('Error:', error);
            alert('生成中にエラーが発生しました: ' + error.message);
        }
    });

});

async function generateNovelScene(apiKey, inputText) {

    const prompt = `${inputText}`;

    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent?key=${apiKey}`;

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            contents: [{
                parts: [{ text: prompt }]
            }]
        })
    });

    if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error?.message || 'API通信エラー');
    }

    const data = await response.json();
    return data.candidates[0].content.parts[0].text;
}

あいよで済ますな。

どう作ってもたいして変わらんよ。API叩きに行くだけの処理だし。
でもAIが作ったものは基本的に信用ならんので、よい子のみんなはちゃんと自分の目で確認して調整してから動かそうね。

生成AIで小説を生成するのはボロクソに言ってたくせに、プログラミングはいいんかい。

コーディングの手段なんて、手打ちだろうと技術系サイトのコピペだろうと教本の丸写しだろうと生成AIだろうと、どうでもいいですよ。
成果物に対する責任は自分で負うという事さえ忘れなければ。

へーい。
ざっくり解説するよ。
上半分は、画面の値を取って、関数に渡して、戻り値を表示してるだけ。（処理の流れの①と⑤）
②③④は下半分の関数内でやるよ。

で、関数（generateNovelScene）の中身。

const prompt = `${inputText}`;

これが②APIに渡すデータのプロンプト部分。要は生成AIに渡すテキスト。
inputTextの値をそのまま入れてるよ。

次のURLがAPIの場所。

const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent?key=${apiKey}`;

長くて何じゃコラってなるかもだけど、分割するとこういう意味。

https://（略）.com → ベースURL
/v1beta → APIのバージョン
/models/gemini-flash-latest → モデル
:generateContent → テキスト生成の機能

これがAPIの窓口（エンドポイント）で、ここにAPIキーをくっつけてリクエストを送るってわけ。
APIキーはとりあえず講座だからベタ書きにしたけど、公開するならキーは見えないように渡そうね。

今回作った③④は、特殊なライブラリを使わない一番原始的な、POSTを使ったやり方。
JSON形式でデータを渡して、帰ってきたJSONデータからテキストを取り出して戻り値として返すってわけ。

ほんとにざっくりだ。

それでは、動かしてみましょう。

あいよ。

ウゴイタヨー。

おー。これだけで本当に動くんだ。

試してみたい方は、上記のindex.htmlとscript.jsと、こちらのstyle.cssを保存して同じフォルダに置き、script.jsの6行目「※※※とりあえずここにAPIキーを入れる※※※」の部分を自身で取得したAPIキーに書き換えてください。

なんかもう完成した気分。

してませんよ。