作業の流れ

要件定義書を書いてもらう

新しい作業をするときは作業内容のすり合わせをしてから進めます。
更新しながら作業してたので以下は最終系です。

要件定義書

# ノベルゲーム「魂ってなんだろう？」開発要件定義書

## 1. プロジェクト概要

Reactを使用し、ノベルゲーム「魂ってなんだろう？」の第一話を開発する。
初期目標は、選択肢や分岐のない一本道のビジュアルノベルとして、シナリオに沿ってキャラクターや背景が表示され、物語が進行する状態を実現すること。

## 2. 機能要件

*   **シナリオ表示機能:** 画面下部のメッセージウィンドウに、シナリオテキストと発話者名を表示する。
*   **キャラクター表示機能:** シナリオに合わせて、登場人物の立ち絵を表示・切り替えする。
*   **背景表示機能:** シーンに合わせて、背景画像を表示・切り替えする。
*   **ゲーム進行機能:** ユーザーのクリック操作で、次のセリフやシーンに進行させる。

## 3. 非機能要件

*   **プラットフォーム:** 最新のWebブラウザで動作すること。
*   **使用技術:** React
*   **音声:** BGMおよびシーンごとの音声再生機能を実装済み。
*   **画像素材:** 開発初期段階では、フリー素材またはプレースホルダー画像を使用する。

## 4. 登場人物と背景

*   **登場人物:**
    *   星奈 結愛（ほしな ゆあ）
    *   二宮（にのみや）
    *   イタコ（偽物）
    *   マデリン
    *   二宮AI（アバター）
*   **背景:**
    *   二宮ラボ
    *   玄関モニター

### 4.1. 画面表示仕様

*   **キャラクターの複数表示:**
    *   キャラクターは、シーンに応じて同時に複数名（最大3名程度）表示される場合がある。
    *   シナリオデータで、各シーンに登場するキャラクターのリストを定義できるようにする。
*   **キャラクターの表示位置:**
    *   キャラクターの立ち位置を「左」「中央」「右」で指定できるようにする。
    *   シナリオデータで、キャラクターごとに表示位置を指定する。
*   **発話者の明示:**
    *   複数のキャラクターが表示されている場合、現在発話しているキャラクターを視覚的に分かりやすくする（例：少し明るく表示し、他のキャラクターは少し暗くするなど）。
    *   シナリオデータで、発話者を指定する。
*   **キャラクターの不在:**
    *   ナレーションなど、キャラクターが誰も画面にいないシーンも表現できること。

### 4.2. キャラクターの感情表現

*   **表情差分の導入:**
    *   キャラクターの画像に「normal」「surprised」「happy」「sad」「angry」などの感情バリエーションを用意する。
    *   画像ファイル名は `キャラクターID_感情名.png`（例: `yua_surprised.png`）の形式で管理する。
*   **シナリオデータでの感情指定:**
    *   シナリオデータの各キャラクターオブジェクトに `id` と `emotion` プロパティを追加し、そのシーンでのキャラクターの感情を指定できるようにする。
    *   例: `{ "id": "yua", "name": "星奈 結愛", "position": "left", "emotion": "surprised" }`
*   **動的な画像切り替え:**
    *   ゲームロジックは、キャラクターの `id` と `emotion` を組み合わせて、表示する画像パスを動的に決定する。

### 4.3. 必要画像アセット一覧

以下の画像ファイルが必要です。ファイルは `public/images/` ディレクトリに配置してください。

**背景画像:**
*   `lab.jpg`
*   `monitor.jpg`

**キャラクター画像:**
各キャラクターIDと感情の組み合わせで画像が必要です。

*   **yua (星奈 結愛):**
    *   `yua_normal.png`
    *   `yua_surprised.png`
    *   `yua_happy.png`
    *   `yua_sad.png`
    *   `yua_angry.png`
*   **ninomiya (二宮):**
    *   `ninomiya_normal.png`
    *   `ninomiya_surprised.png`
    *   `ninomiya_happy.png`
    *   `ninomiya_sad.png`
    *   `ninomiya_angry.png`
*   **itako (イタコ):**
    *   `itako_normal.png`
    *   `itako_surprised.png`
    *   `itako_happy.png`
    *   `itako_sad.png`
    *   `itako_angry.png`
*   **madeline (マデリン):**
    *   `madeline_normal.png`
    *   `madeline_surprised.png`
    *   `madeline_happy.png`
    *   `madeline_sad.png`
    *   `madeline_angry.png`
*   **ninomiya_ai (二宮AI):**
    *   `ninomiya_ai_normal.png`
    *   `ninomiya_ai_surprised.png`
    *   `ninomiya_ai_happy.png`
    *   `ninomiya_ai_sad.png`
    *   `ninomiya_ai_angry.png`
*   **itako_ai_glitch (イタコAI):**
    *   `itako_ai_glitch_normal.png`
    *   `itako_ai_glitch_surprised.png`
    *   `itako_ai_glitch_happy.png`
    *   `itako_ai_glitch_sad.png`
    *   `itako_ai_glitch_angry.png`

## 5. 開発計画

1.  **環境構築 (0.5日):**
    *   `create-react-app`でプロジェクトをセットアップし、フォルダ構成を設計する。
2.  **基本UIコンポーネント開発 (1日):**
    *   背景、キャラクター、メッセージウィンドウ用のReactコンポーネントを作成し、CSSでレイアウトを組む。
3.  **シナリオデータ作成 (1.5日):**
    *   シナリオを管理しやすいようJSON形式のデータ構造を定義し、提供されたテキストシナリオをその形式に変換する。
4.  **ゲームロジック実装 (1日):**
    *   JSONデータを読み込み、クリックに応じてシナリオが進行し、表示が更新されるロジックを実装する。
5.  **アセット統合 (1日):**
    *   キャラクターと背景のプレースホルダー画像を用意し、シナリオの進行と連動させる。
6.  **テストとデバッグ (0.5日):**
    *   全体の動作を確認し、不具合を修正する。

## 6. 今後の拡張予定

*   選択肢とストーリー分岐
*   セーブ・ロード機能
*   テキスト表示やキャラクターのアニメーション演出

実装してもらう

シナリオをテキストファイルにして配置して、「これがシナリオだから」と言って渡したら、それにあわせてシナリオJSONを作ってくれました。なんて賢い。
若干の四苦八苦はあるものの、この程度であればさほど苦労はしなかったです。
画像はPillowを使って、キャラ名と感情が書かれたダミー画像を勝手に用意してくれました。後でこれを差し替えれば完成するというわけです。

音声を作る

せっかくなのでフルボイスにします。
ローカルにTsukasa_SpeechのGradioを起動して、GradioのAPIを叩いて音声合成をするPythonプログラムを過去に作っていたので、それの使い方を教えてあげて一気に作ってもらいます。便利だ。
TTSについてはZennに以前ちょろっと書きました。

残念な発音になっている箇所もありますが、そういったところも含めてのお試しということで。

BGMを作る

過去、Sunoで作った曲を適当にダウンロードして配置。
「BGMここに置いたからー」ってGeminiに教えてあげると対応してくれました。楽だ。

絵を用意する。

Geminiに聞いたら画像は作れないとのこと。
ここだけはとても面倒だったのですが、ChatGPTで1個1個画像生成を依頼することに。
機能開発の合間にChatGPTに依頼して作っていきました。並行作業したかったので背景画像はGoogle AI Studioで並行作業。
雑に依頼して画像を作っていったので、イラスト間で整合性があまりないです。

また、一部、ローカルで画像を手直ししてるのもあります。
シナリオ的に、ディスプレイ上に写った人物のような絵が必要だったので、それはChatGPTの生成物を加工して作っています。Photoshopでハーフトーンパターンのフィルターとクリッピングマスクとオーバーレイの描画を使えばそれっぽくなります。

ブラッシュアップする

いろいろとブラッシュアップするべき箇所はあると思いますが、とりあえずトップ画面が酷い。

Claudeさんはビジュアル面にも強い印象があり、Claudeさんに依頼する。
コードをローカルにコピペして「これを参考にトップ画面修正して」とお願いして取り込んでもらいました。

できあがり

ソースはこちらです。とはいえ、ほとんどソースは読んでません。

ゲームのプレーはこちらから。

プレイ画面はこんな感じ。

おわり

実装自体は1時間もかかってなくて、音声や画像の用意に2〜3時間作業した感じです。
Gemini CLIについては腐るほど誰かが評価してると思うので特に書かないですが、原作小説を理解してシナリオJSONを作ってくれるのは素晴らしかった。
実装以外の部分で色々残念な部分はありますが、それでも数時間の作業で１からここまで作れるなら良いですよね。