ChatGPTでVOICEROID2の作業を効率化するWebアプリを作ってみた～その2 実装編～

🧪 ChatGPTでVOICEROID2の作業を効率化するWebアプリを作ってみた～その2 実装編～

前回の記事では、ChatGPTを活用して「VOICEROID2をWebアプリから制御する」構想とChatGPTを活用して環境構築をしてく過程を紹介しました。
今回はいよいよ、実際にアプリを構築して動かすまでの過程をまとめます。

開発中はChatGPTと会話しながら進めたリアルな記録を元にしているので、同じように構築してみたい方にも参考になるはずです。

🚀 今回の実装手順まとめ（全体の流れ）

1. PythonでFlaskサーバーを構築
   　→ VueからPOSTリクエストを受け取るAPIを作成し、seikasay2を実行する処理を実装

2. Vueで音声入力フォームを作成
   　→ ユーザーがテキストや各種パラメータを入力し、サーバーに送信できるように設計

3. ローカルでの動作テスト
   　→ FlaskサーバーとVueアプリを同時に起動し、音声生成までの一連の流れを確認

4. Gitでプロジェクトを管理
   　→ GitHubにリポジトリを作成し、コードと環境情報をバージョン管理

📊 今回作成するのWebアプリの簡単な構成図

前回の記事はこちら
https://zenn.dev/pwrengineer/articles/4ee18ef1828662

🔧 ステップ① FlaskでPythonサーバーを構築

まずはバックエンドであるPythonサーバーを構築。
ポイントは、Vueから送られてくる音声生成指示を受け取り、SeikaSay2コマンドを実行するAPIを作ることです。

以下がChatGPTから得られたFlaskサーバーの実装方法です。

Flaskサーバの実装（ChatGPTの回答）

了解しました！
環境構築おつかれさまでした！✨
ここから本題、つまり――

---

✅ 本題

Vue（フロントエンド）からPython（バックエンド）を呼び出して、AssistantSeika（seikasay2）を実行するWebアプリケーション
を作っていきます！

---

✅ ここからの進め方（大まかな流れ）

ステップ	内容	説明
①	Flask側（Python）でAPIを作る	Vueからリクエストを受け取る受け皿を作成
②	Vue側でフォームを作る	テキストなどを入力してAPIに送る
③	APIを叩いてコマンドを実行する	受け取った内容でseikasay2を呼び出し、音声生成
④	成功／失敗をVue側に伝える	結果を画面にフィードバックする

---

✅ まず着手すること

一番最初にやるべきは：

① Flask側のAPIエンドポイントを作る
（＝VueからPOSTできる場所を作る）

---

✅ 今作るPythonサーバー（Flask）全体イメージ

from flask import Flask, request, jsonify
from flask_cors import CORS
import subprocess
import os

app = Flask(__name__)
CORS(app)  # ← フロント（Vue）からアクセス許可する設定

SAVE_DIR = r"E:\A_動画編集素材\ボイス\琴葉葵"  # 音声保存先（あなたのPCのパス）
TEXT_FILE = "genkou.txt"  # 読み上げるためのテキストファイル
ASSISTANT_COMMAND = "seikasay2"  # 実行するコマンド（PATHが通っている前提）

@app.route('/generate', methods=['POST'])
def generate():
    data = request.json  # フロントから送られてきたJSONデータを受け取る
    text = data.get('text', '')
    cid = data.get('cid', '2001')
    speed = data.get('speed', '1.3')
    pitch = data.get('pitch', '1.1')
    emotion = data.get('emotion', '喜び')
    emotion_value = data.get('emotion_value', '0.2')

    if not text:
        return jsonify({"error": "text is required"}), 400

    # テキストファイル生成
    text_path = os.path.join(SAVE_DIR, TEXT_FILE)
    with open(text_path, 'w', encoding='utf-8') as f:
        f.write(text)

    # コマンド作成
    command = [
        ASSISTANT_COMMAND,
        "-cid", str(cid),
        "-speed", str(speed),
        "-pitch", str(pitch),
        "-emotion", emotion, str(emotion_value),
        "-savepath", SAVE_DIR,
        "-f", text_path
    ]

    try:
        # コマンド実行
        result = subprocess.run(command, capture_output=True, text=True, shell=True)
        if result.returncode != 0:
            return jsonify({"error": result.stderr}), 500
        return jsonify({"message": "音声生成成功", "stdout": result.stdout})
    except Exception as e:
        return jsonify({"error": str(e)}), 500

if __name__ == '__main__':
    app.run(port=5000)

---

✅ 用語補足（ここまでで出てきたもの）

用語	意味
API	Application Programming Interfaceの略。プログラム同士が通信するための窓口
Flask	Pythonで簡単にAPIサーバーを作れる軽量フレームワーク
POST	HTTP通信の種類の1つ。データをサーバーに送る
JSON	データを送るときの標準的なフォーマット（例：{"text": "こんにちは"}）
subprocess	Pythonから外部のコマンド（ここではseikasay2）を実行するためのモジュール
CORS	違うポート同士（例：3000と5000）で通信できるようにする設定

---

✅ 次にやること

このPythonコードを保存して（例：server.py）、
まずPythonサーバー単体で起動できるか確認するところから始めます。

確認の手順も案内できますので、進めてもよいでしょうか？✨

👉【はい／まだ準備が必要】と教えてください！

実装できたら、次は動作確認です。
Flaskサーバを起動して、確認してみましょう。

Flaskサーバの動作確認（ChatGPTの回答）

了解しました！
では、Pythonサーバーを起動して動作確認するステップに進みましょう！

ここでも、手順＋用語の意味を丁寧に解説しながら進めます。

---

✅ Pythonサーバーを起動する手順

1. 仮想環境を有効化する

まず仮想環境に入ります。
これは「このプロジェクト専用のPython環境を使う」という意味です。

.\venv\Scripts\activate

（※仮想環境を作ったフォルダで実行してください）

【用語解説】

• 仮想環境：プロジェクト専用のPythonライブラリ置き場
• 有効化：仮想環境のPython・pipを使える状態にすること

---

2. サーバースクリプトを保存する

プロジェクトフォルダ（例：assistantseika-webappの直下）に、
次の名前で保存します：

ファイル名： server.py

ファイルの中身は、先ほど提示したFlaskサーバーのコードをそのままコピペしてください。

【用語解説】

• server.py：Pythonサーバーの入口となるファイル

---

3. Pythonサーバーを起動する

仮想環境を有効化したまま、次のコマンドを打ちます。

python server.py

【起動に成功すると】

• ターミナルに

  * Running on http://127.0.0.1:5000 (Press CTRL+C to quit)
  

  みたいなメッセージが出ます。

• これが「ローカル（自分のPC内）でAPIサーバーが起動した」という意味です！

【用語解説】

• ローカルサーバー：インターネットではなく、あなたのPCの中だけで動いているサーバー
• ポート5000：サーバーが待ち受ける番地番号みたいなもの

---

✅ 正しく起動できたら

ここまでで、

• Flaskサーバーが動いている
• /generate というAPIエンドポイントが待機している
  という状態になります！

つまり、Vue側からデータを送ればAssistantSeikaを叩ける準備ができたというわけです！

---

✅ 注意点（もしうまくいかなかったら）

• ModuleNotFoundError: No module named 'flask'
  → 仮想環境が有効化されていないか、Flaskがインストールされていないかです。
  → 仮想環境に入ったあと pip install flask flask-cors をしてください。
• PermissionErrorやFileNotFoundError
  → SAVE_DIRのパスや、seikasay2のパスが間違っている可能性があります。

エラーが出たら、すぐメッセージごと教えてください！一緒に直します！

---

💬
ここまで大丈夫でしょうか？
もしOKなら、次は「Vue側からサーバーにリクエストを送るフォーム作成」に進みます！

【次へ進めますか？ → はい／質問があります】

Flaskサーバが正常に立ち上がるとコマンドプロンプト上で以下のような結果が返ってきます。

WARNINGが表示されていますが、これは開発サーバとして立ち上がっているという警告のため問題ありません。
今回はあくまで自分のローカル上で動作させるだけのWebアプリのため、無視して大丈夫です。
こちらについてもChatGPTが作成した解説がありますので合わせてご確認ください。

Flaskサーバの起動警告について

プロンプト

# 以下のようなエラーが出ています。
# 無視しても大丈夫ですか？
- WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.

はい、その警告は今の段階では無視して大丈夫です！

とても良いところに気づきました。
この警告の意味をしっかり説明しますね！

---

✅ この警告の意味

出ている警告メッセージ：

WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.

日本語にすると：

⚠️ これは開発用のサーバーです。本番環境（公開サーバー）では使わないでください。
本番運用するなら「WSGIサーバー（例：gunicorn、uWSGIなど）」を使ってください。

という意味です。

---

✅ なぜこの警告が出る？

Flaskが標準で持っているサーバー（app.run()で起動するやつ）は、

• 開発者がローカルで手軽にテストできるように作られた
• でも、アクセスが増える本番環境では速度や安全性が足りない
  からです。

要するに：

• 「開発中なら気にしなくてOK」
• 「ネット公開するなら本格的なサーバーを使ってね」というだけです。

---

✅ 今回のあなたのプロジェクトの場合

項目	状況	問題ある？
開発用？	✅ 自分のPCのlocalhostだけで動かす	問題なし
本番用？	❌ インターネットに公開しない	問題なし

つまり
→ 今回は完全に「開発用」なので気にしなくてOKです！

---

✅ まとめ

ポイント	内容
なぜ出る？	Flask開発サーバーは本番運用には向いていないから警告している
開発用なら？	無視して問題なし
本番公開するときは？	gunicornやuWSGIなど本番用WSGIサーバーを使う必要あり（今回関係なし）

---

💬
なのでこのまま、次に進めて大丈夫です！✨

次は
👉 VueからこのPythonサーバーにリクエストを送るフォームを作る
に進みましょうか？

【進めますか？ → はい／少し質問したい】

🎨 ステップ② Vueでフロントエンドのフォームを作成

次に、ユーザーが操作する入力フォームをVueで作成します。

• テキスト入力欄
• cid / speed / pitch / emotion / emotion_value の各パラメータ
• 送信ボタン

Vueファイル（App.vue）は以下のように構成しました：

Vueフォームの実装（ChatGPTの回答）

了解しました！
では、次は

✅ Vue側に「リクエスト送信フォーム」を作る

作業に進みます！

---

✅ ここで作るもの

簡単なVueページで、

• テキスト入力欄
• 各種パラメータ（cid, speed, pitch, emotionなど）の入力欄
• 送信ボタン

を置いて、
押したらPythonサーバーにデータをPOSTするフォームを作ります！

---

✅ ファイル構成（Vueプロジェクト）

今、frontend/ というディレクトリにViteで作ったVueプロジェクトがある前提ですね。
その中の src フォルダの中にある、

src/App.vue

というファイルを編集していきます！

---

✅ App.vue に貼り付けるコード例

こちらを使ってください！

<template>
  <div>
    <h1>AssistantSeika Webコントローラー</h1>
    <form @submit.prevent="send">
      <div>
        <label>読み上げテキスト</label><br>
        <textarea v-model="text" placeholder="ここにテキストを入力" rows="5" cols="50"></textarea>
      </div>
      <div>
        <label>キャラID (cid)</label><br>
        <input v-model="cid" placeholder="例：2001">
      </div>
      <div>
        <label>速度 (speed)</label><br>
        <input v-model="speed" placeholder="例：1.3">
      </div>
      <div>
        <label>ピッチ (pitch)</label><br>
        <input v-model="pitch" placeholder="例：1.1">
      </div>
      <div>
        <label>感情 (emotion)</label><br>
        <input v-model="emotion" placeholder="例：喜び">
      </div>
      <div>
        <label>感情強度 (emotion_value)</label><br>
        <input v-model="emotion_value" placeholder="例：0.2">
      </div>
      <button type="submit">送信して音声生成</button>
    </form>

    <div v-if="response">
      <h2>サーバーからの応答</h2>
      <pre>{{ response }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const text = ref('')
const cid = ref('2001')
const speed = ref('1.3')
const pitch = ref('1.1')
const emotion = ref('喜び')
const emotion_value = ref('0.2')
const response = ref(null)

const send = async () => {
  try {
    const res = await axios.post('http://localhost:5000/generate', {
      text: text.value,
      cid: cid.value,
      speed: speed.value,
      pitch: pitch.value,
      emotion: emotion.value,
      emotion_value: emotion_value.value
    })
    response.value = res.data
  } catch (error) {
    response.value = error.response ? error.response.data : error.message
  }
}
</script>

<style scoped>
h1 {
  margin-bottom: 1rem;
}
form > div {
  margin-bottom: 1rem;
}
button {
  padding: 0.5rem 1rem;
}
</style>

---

✅ 用語・構成の解説

用語	説明
v-model	入力欄とデータ（text, cidなど）をバインドする仕組み
axios	JavaScriptからHTTPリクエスト（POSTなど）を送るためのライブラリ
@submit.prevent="send"	フォーム送信の標準動作（ページリロード）を止めて、send関数を呼び出す
ref()	Vueのリアクティブ変数。入力内容やサーバー応答を管理する

---

✅ 作業まとめ

作業内容	コマンド・操作例
frontend/src/App.vue を編集する	上記コードをコピペ
サーバーを起動しておく	python server.py（5000番ポート）
フロントエンドを起動する	npm run dev（3000番ポートまたは5173番ポート）
ブラウザでアクセス	http://localhost:5173/（または3000）

---

✅ ここまで来たら

• 入力フォームにテキストを入力
• ボタンを押す
• → Flaskサーバー経由でAssistantSeikaをコマンド実行
• → 音声ファイルが作られて保存される！

という流れが完成します！

---

💬
ここまで一緒に進めてみましょうか？
（次に「Vueを起動して動作テストする」ステップに進みます！）

👉【はい／質問がある】で教えてください✨

そして、こちらが実際に起動させた様子です。

基本はChatGPTの回答をそのまま貼り付けているだけなのですが、すごいですね。

---

🛡️ ステップ③ 実際に動かしてみる

ここまでの実装ができたら、実際に音声生成を試してみましょう。
まずは、AssistantSeikaで合成音声ソフトを制御できるように起動しておきます。
詳細は、こちらの説明に詳しい内容があります。

https://wiki.hgotoh.jp/documents/tools/assistantseika/assistantseika-000

1. Flaskサーバーを起動

まずは、Flaskサーバーを起動します。

python server.py

2. Vueアプリを起動

次に、Vueアプリを起動します。

npm run dev

3. ブラウザ上で音声生成を実行

ブラウザで http://localhost:5173/ にアクセスし、パラメータを設定して音声生成を実行します。

以下のようにサーバーからの応答が表示されれば成功です

音声生成が成功すると、指定したフォルダに音声ファイルが保存されます。

ちなみにFlaskサーバ側ではログ監視することができます。

---

📁 ステップ④ Gitにここまでの成果を保存

ここまでの成果をGitに保存しておきましょう。
今回は、GitHubを利用してここまで作成したプロジェクトをリモートに保存します。

# 成功しました。
# Gitにリポジトリを作って管理したいです。
# おすすめのやり方を教えて下さい。
## GitHubのアカウントはあります。
## GitHubデスクトップもすでにあります。

GitHubへの登録について（ChatGPTの回答）

素晴らしいです！✨
アプリ成功おめでとうございます！
ここから「Gitでちゃんと管理する」のは、とても良い流れです！

---

✅ あなたの環境整理

項目	状態
GitHubアカウント	✅ あり
GitHub Desktop	✅ あり
ローカル開発環境（Vue＋Python）	✅ できている
やりたいこと	リポジトリ作成して、今のコードをGit管理したい

→ つまり、もうすぐにでもGit管理を始められる状態です！

---

✅ 今からやるおすすめ手順

一番スムーズで、かつ今後の運用にも向いている流れを提案します。

ステップ	内容
①	GitHubに新しいリポジトリを作成
②	GitHub Desktopでローカルにリポジトリを作成＆今のプロジェクトを関連付け
③	初回コミット（初期保存）
④	プッシュ（GitHubにアップロード）

---

✅ 詳細手順（図解的に説明）

---

① GitHub上に新しいリポジトリを作成

1. GitHubにログイン

2. 右上「＋」→「New repository」

3. 以下を設定：

   • Repository name：たとえば assistantseika-webapp
   • Description（説明）：任意（例：「AssistantSeikaを操作するWebアプリ」）
   • Public / Private：好きなほう（個人開発ならPrivateでもOK）
   • Initialize this repository with:
     → 何もチェックしない！（ここ重要）
     （READMEとかはローカルで作るから）

4. 「Create repository」ボタンを押す

→ 空っぽのリポジトリができる

---

② GitHub Desktopでローカルに関連付ける

1. GitHub Desktopを開く
2. メニューから「File」→「Add Local Repository...」
3. 今のプロジェクト（assistantseika-webapp/）のフォルダを選択
4. 「このフォルダにはGitリポジトリがありません」と出たら
   → 「リポジトリを作成する」を選ぶ
5. リポジトリ名、保存先を確認して「Create repository」

→ ローカルにGitリポジトリができる

---

③ 初回コミット

1. GitHub Desktopで「Uncommitted Changes」が一覧表示される

2. すべてチェックして、「Summary」に

   Initial commit
   

   と書く

3. 「Commit to main」ボタンを押す

→ ローカルに初回保存される

---

④ GitHubにプッシュ

1. 上部に「Publish repository」というボタンが出る
2. クリックして、GitHubのリポジトリとリンク
3. 成功すると、GitHub上にもコードが反映される

→ これで**GitHub管理開始！**です！

---

✅ 【補足】こんな感じのファイルを管理対象にすると良い

フォルダ / ファイル	管理対象？	理由
frontend/	✅	Vueのソースコード
server.py	✅	Pythonサーバースクリプト
.gitignore	✅	Git管理から除外するルールファイル
venv/	❌（無視）	仮想環境はGitに上げない（後で.gitignoreに指定する）
node_modules/	❌（無視）	Vueのパッケージ群。これもGitに上げない

つまり、
「venv」と「node_modules」はGit管理しないようにします！

---

✅ 最後におすすめする.gitignoreファイル（最初に入れておくとよい）

assistantseika-webapp/直下に、
新しく .gitignore ファイルを作って、こう書きます：

# Python
venv/
__pycache__/

# Node.js (Vue)
frontend/node_modules/

# OSゴミ
.DS_Store
Thumbs.db

これで不要なファイルは自動的に無視されます！

---

✅ まとめ（今日やることリスト）

作業	内容
1	GitHubで新リポジトリ作成
2	GitHub Desktopでローカルリポジトリ作成
3	最初のコミット＆プッシュ
4	.gitignore設定してきれいに管理

---

💬
ここまでを一緒にやってもいいですし、
「やってみてエラーが出たらすぐ質問する」方式でもOKです！

次はどうしましょうか？
👉【一緒に進める】or【自分でやってみる】✨

また、今回の実装で利用したPythonの各種ライブラリ(Flaskなど)の情報は保持していつでも環境を再現できるようにしておきたいですよね。
そのために、requirements.txtを作成しておきましょう。

requirements.txtを作成しておけば、現在の環境が壊れてしまったり、別のPCで同じ環境を再現したいときに役立ちます。
また、package.lock.jsonも解説しておりませんが、npm installで作られています。
こちらもフロントエンド環境でインストールしたパッケージのバージョンを固定するために利用されています。

# Gitにコミットする前に今の環境を定義する以下のファイルを作っておこうと思います。
# ガイドしていただけますか？
- pip freeze > requirements.txt

requirements.txtの作成（ChatGPTの回答）

すばらしい考えです！✨
その通りです！

---

✅ あなたの意図を確認

Gitでコードを管理する前に、**Python仮想環境にインストールしたライブラリ一覧（環境情報）**をファイルに書き出して、あとから再現できるようにしておきたい

→ 完全に正しいアプローチです！

---

✅ 作成するファイル

• requirements.txt
  （Pythonプロジェクト標準の「環境定義ファイル」です）

このファイルを作ると、

• 他の人（将来のあなた自身）が
• 同じPython仮想環境を
• pip install -r requirements.txt
  で一発で再現できるようになります！

---

✅ 手順ガイド

1. 仮想環境を有効化しておく

（すでにできている場合は飛ばしてOK）

.\venv\Scripts\activate

✅ 【ポイント】
「仮想環境の中のライブラリ」だけを書き出したいので、必ず仮想環境を有効化した状態でやります！

---

2. pip freezeコマンドで書き出す

プロジェクトフォルダ（assistantseika-webapp/）の直下で次を実行：

pip freeze > requirements.txt

✅ 【ポイント】

• 現在インストールされているすべてのPythonライブラリとそのバージョンが
• requirements.txt というファイルに保存されます。

---

3. できたファイルを確認

requirements.txt ができているか確認してください。
中身はこういう感じになります：

click==8.1.3
colorama==0.4.6
Flask==2.2.5
Flask-Cors==3.1.1
itsdangerous==2.1.2
Jinja2==3.1.3
MarkupSafe==2.1.5
Werkzeug==2.2.3

✅ 【ポイント】

• ライブラリ名 == バージョン番号
• これをそのまま使えば、誰でも同じ環境を作れます！

---

✅ まとめ：今日の成果物リスト

ファイル	説明
server.py	Pythonサーバースクリプト
frontend/	Vue3 + Viteアプリケーション
requirements.txt	Python環境を再現できる定義ファイル
.gitignore	Git管理から除外するファイル一覧

→ これらをGitにコミットすれば、超きれいなプロジェクト構成になります！

---

✅ 次にやること

• .gitignore も用意（venv/やnode_modules/を除外）
• requirements.txt ができたら
• GitHub Desktopでコミット ➔ プッシュ！

---

💬
ここまでのガイド、わかりやすかったでしょうか？
もし「次に .gitignore を作る方法もガイドしてほしい」なら続けます！✨

👉【続ける／ここまででOK】教えてください！

---

✅ 現時点での実装成果

• ChatGPTのサポートで、Vue + Flaskで連携する音声生成アプリを構築
• ユーザー入力 → Python処理 → seikasay2 実行 → 音声ファイル生成 まで一連の動作が完成

ChatGPTの力無しに0からこちらの実装をしていくとなったら、かなり紆余曲折があったと思いますが、ChatGPTを活用することで、かなりスムーズに実装を進めることができました。

---

🔁 次回予告

次回は、ここまで出来上がった基本的なアプリケーションをより実用的なツールとして改良していく工程を紹介する予定です。

引き続きお楽しみにしてください！