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

🛠️ ChatGPTでVOICEROID2の作業を効率化するWebアプリを作ってみた～その1～

🎬 はじめに

動画制作において、VOICEROID2で音声を合成し、動画編集ソフトへ取り込むまでの工程が煩雑で悩んでいました。本記事では、その課題を解決するためにChatGPTを活用して効率化の方法を探り、ローカル環境で動作するWebアプリケーションを構築した事例をご紹介します。
実際に利用したプロンプトも一部公開するので参考にしていただければ幸いです。

🎯 背景と課題

VOICEROID2で音声を生成するには、以下のような手順を踏む必要があります。

1. 喋らせるテキストを入力
2. 音声保存ボタンを押下
3. 音声保存先を指定
4. 音声を保存
5. AviUtlで音声保存ファイルを編集素材として取り込み
   

この作業が頻繁に発生し、手作業では非常に手間がかかっていました。

💡 解決アプローチの概要

ChatGPTを活用して、この工程を自動化するWebアプリケーションを提案してもらい、以下の方針で構築することにしました。

• ローカルPC上で動作するWebアプリケーション
• ブラウザ上からテキスト入力→音声ファイルの自動生成までを一貫して実行
• クライアントサイドはVue.jsを利用して実装
• サーバーサイドはPythonを利用して実装
• コマンドプロンプトからの実行にはAssistantSeikaを利用させていただきます

🛠️ 実装方針と技術スタックの選定理由

• Vue.js：軽量かつ学習コストが低く、ローカルでも使いやすいため選定。（また、少し筆者に経験があったため）
• Python：Pythonを使った経験がほとんどなかったのでせっかくなので使ってみたかったというのとOSのコマンドを比較的簡単に実装できるらしいので採用。
• AssistantSeika：言わずとしれた音声合成製品を制御するプログラム。めちゃくちゃ便利。

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

🤖 ChatGPTへのプロンプト

まずはプロンプトを作成

以下のようなプロンプトをChatGPTに送信しました（モデルはGPT‐4oです）：

# 以下のようなlocalhost環境で動かすWebアプリケーションを構築します。
# 具体的な実装案を提案してください。
## PC二インストールされているAssistantSeika(合成音声ソフトをコマンドラインで実行するソフト)をlocalhostのWebアプリケーションから実行するWebアプリケーション
### 以下はその他の要件です。
#### クライアントサイドはVue.jsのフレームワークを利用します。
#### サーバーサイドはPythonを利用してください。
#### 以下はWindows上で実行するコマンドの例です。
- seikasay2 -cid 2001 -speed 1.3 -pitch 1.1 -emotion 喜び 0.2 -savepath E:\A_動画編集素材\ボイス\琴葉葵 -f genkou.txt
##### genkou.txtには具体的に合成音声ソフトに読ませる内容が書いてあるテキストファイル(txt)です。
##### WebのUI上に入力した内容をもとにテキストファイルを生成してコマンドの引数に与えられるようにしてください。

プロンプトの解説

私がプロンプトを作成する際、以下のポイントを意識しています。

• 主題を意識する（なにをしたいのかを一目でわかるように）
  例、以下のようなlocalhost環境で動かすWebアプリケーションを構築します。
• ChatGPTにお願いしたいことを明確に記載する
  例、具体的な実装案を提案してください。
• 細かな条件を箇条書きで記載する（曖昧さを減らすため）
  例、以下はその他の要件です
• マークダウンで書く（構造を明示し、読みやすくする）
  例、#などを活用してブロックに分ける
  このスタイルによって、GPTの出力精度や実用性が高まると感じています。

ChatGPTの回答

ChatGPTの提案

了解しました！
あなたの要件にぴったり合わせた 具体的な実装案 を提案します。

---

✅ 全体設計（概要）

項目	内容
クライアントサイド	Vue.jsで入力フォームを作成、送信ボタンでテキスト送信
サーバーサイド	Python (Flask) を使ってAPIエンドポイントを作成、テキストファイルを生成し、seikasay2 コマンドを実行
実行環境	Windows + Python3.x + AssistantSeikaインストール済みPC
通信方式	HTTP POST（JSON送信）
ファイル保存先	例えば E:\A_動画編集素材\ボイス\琴葉葵\
コマンド実行	subprocessモジュールを使ってPythonからシェル実行

---

✅ 詳細な構成

1. クライアント側（Vue.js）

• 入力欄

  • 読ませたいテキスト（必須）
  • cid（キャラクターID、選択式でもよい）
  • speed（速度）
  • pitch（ピッチ）
  • emotion（感情タイプと強さ）

• ボタン：送信（サーバーにPOST）

簡単なコンポーネント構成例：

<template>
  <div>
    <h1>テキスト読み上げ依頼</h1>
    <input v-model="text" placeholder="読み上げテキスト" />
    <input v-model="cid" placeholder="キャラID (例:2001)" />
    <input v-model="speed" placeholder="スピード (例:1.3)" />
    <input v-model="pitch" placeholder="ピッチ (例:1.1)" />
    <input v-model="emotion" placeholder="感情 (例:喜び)" />
    <input v-model="emotion_value" placeholder="感情値 (例:0.2)" />
    <button @click="send">送信</button>
  </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 send = async () => {
  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
  })
  alert('送信しました')
}
</script>

---

2. サーバー側（Python Flask）

基本フロー

1. POSTされたJSONを受け取る
2. テキストファイル (genkou.txt) を一時生成
3. subprocessでコマンドライン呼び出し (seikasay2) 実行
4. 必要に応じて結果を返す（成功/失敗）

Pythonサーバーコード案：

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

app = Flask(__name__)

SAVE_DIR = r"E:\A_動画編集素材\ボイス\琴葉葵"
TEXT_FILE = "genkou.txt"
ASSISTANT_COMMAND = "seikasay2"

@app.route('/generate', methods=['POST'])
def generate():
    data = request.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)

---

✅ 必要な環境

• pip install flask
• pip install axios（クライアント(Vue)側）
• WindowsにPATHが通ったseikasay2.exe
• Vue.js開発環境（npm init vue@latestなどでセットアップ）
• フロントとバックエンドをCORS許可するならFlaskにCORS設定（flask-cors）

（もし必要なら、そのCORS設定方法も教えます）

---

✅ 起動手順まとめ

1. Pythonサーバーを起動

python server.py

2. Vue.jsアプリケーションを起動

npm run dev

3. http://localhost:3000/ からブラウザアクセス → テキスト送信 → 音声ファイル作成！

---

✅ オプションでできる拡張案（もし興味あれば）

• 音声生成後、生成された音声ファイルをVue側でダウンロードできるようにする
• テキストだけじゃなく、感情プリセットもVue側で選べるようにする
• コマンドライン引数をユーザーに隠して、もっとわかりやすいUIにする
• サーバーにリクエスト履歴を保存して、ログ管理する
• ファイル名をランダムにして、上書き防止する（UUIDとか）

---

ここまででいかがでしょうか？
さらに 「もう一歩踏み込んだ版」（例えば「音声ファイルを即ダウンロードできる」とか「非同期で複数リクエスト処理できる」とか）も提案できますよ！
興味ありますか？✨

実際に環境構築を実施する

ChatGPTから提案されたものがすでにかなり出来が良かったのでそのまま環境構築していきます。（すでにnode.jsとPythonはインストールされている状態だったので、インストールの手順は省いてもらいます）

# 開発環境の構築手順を教えて下さい。
## node.jsはインストールされています。
## pythonもインストールされています。

ChatGPTの回答

環境構築手順

了解しました！
あなたの状況（Node.js、Pythonインストール済み）を前提に、
この**「AssistantSeikaをWeb経由で実行できる環境」**の開発環境構築手順をまとめます。

---

✅ 前提

• OS：Windows
• Node.js：インストール済み（npmも使える）
• Python3.x：インストール済み（pipも使える）
• seikasay2.exe 実行可能（PATH設定済みまたはパスがわかる）

---

✅ ステップ別手順

① フロントエンド(Vue.js)の準備

1. 任意の作業フォルダを作成

mkdir assistantseika-webapp
cd assistantseika-webapp

2. Vueプロジェクトを作成

npm init vue@latest

※ 質問されたら以下のように回答（例）

• Project name: frontend
• Add TypeScript? → No
• Add JSX Support? → No
• Add Vue Router? → No（必要ならYes）
• Add Pinia? → No
• Add ESLint? → Yes（好み）
• Add testing support? → No

3. frontendディレクトリに移動

cd frontend

4. ライブラリをインストール

npm install
npm install axios

---

② バックエンド(Python Flask)の準備

5. もう一度 assistantseika-webapp のルートに戻る

cd ..

6. Python仮想環境を作成（推奨）

python -m venv venv

7. 仮想環境を有効化

.\venv\Scripts\activate

（コマンドプロンプトなら↑、PowerShellなら少し違う場合あり）

8. Flaskなど必要なパッケージをインストール

pip install flask flask-cors

flask-corsはVue.jsとFlaskの通信でCORS（クロスオリジン制約）を回避するために入れます。

9. サーバーコード（例：server.py）を作成

• 先ほどの提案で書いたFlaskコードを貼り付けます。

---

③ ファイル構成例（最終的な見た目）

assistantseika-webapp/
├── frontend/ （Vueプロジェクト）
│    ├── src/
│    ├── public/
│    └── package.json
├── server.py （Flaskサーバースクリプト）
├── venv/ （仮想環境フォルダ）
└── README.md（任意）

---

④ 開発中の実行手順

1. サーバー起動（Flask）

.\venv\Scripts\activate
python server.py

（ポート5000で待ち受け）

2. フロントエンド起動（Vue）

cd frontend
npm run dev

（デフォルトではポート3000で起動）

→ ブラウザで http://localhost:3000 にアクセスできるようになります！

---

✅ 注意点・補足

• seikasay2.exe はWindowsのPATHが通っていればそのまま実行できますが、通ってない場合は、Pythonサーバー内でフルパス指定してください。
  例：

  ASSISTANT_COMMAND = r"C:\Program Files\AssistantSeika\seikasay2.exe"
  

• ポート番号が競合しているとエラーになる場合があるので、その場合は変更してください。

• 本番環境ではセキュリティ対応（バリデーション、パスのエスケープなど）が必要ですが、開発用なら今回の方法で問題ありません。

• 必要ならファイル保存場所の自動生成（存在しなければ作成）もできます。

---

✅ まとめ：一連の流れ

項目	コマンド例
Vueプロジェクト作成	npm init vue@latest
必要パッケージ	npm install, npm install axios
仮想環境作成	python -m venv venv
Flaskインストール	pip install flask flask-cors
サーバー起動	python server.py
クライアント起動	npm run dev

---

ここまでが基本です！
さらに 「開発をもっと楽にするtips」（例：起動スクリプトまとめる、ホットリロード対応する）とか興味ありますか？
必要なら続けて提案しますね！✨

ちなみに今回、Vueの開発環境ではViteを採用したかったので、以下の指示を出してViteの手順も教えてもらっています

# VueについてはViteを利用したいです。
## 可能ですか？

バッチリ、Viteでの構築手順についても教えてくれましたね

Vite版の構築手順

はい、もちろんです！
結論：Viteを使ってVue開発するのは大歓迎・むしろ推奨です！

---

✅ なぜViteを使うのが良いか？

項目	説明
高速起動	従来のVue CLIより圧倒的にサーバー起動が速い
軽量ビルド	Rollupベースの効率的なビルドシステム
モダン仕様	ESモジュール標準対応、開発体験が現代的
公式推奨	Vue.jsの公式チームも「新規開発はViteを推奨」しています

つまり、**Viteを使う方が今のVue開発の「普通」**です。
（Vue CLIはもうメンテナンスモードになりつつあります）

---

✅ 実際のやり方（Vite版で構築する手順）

1. まず、任意の作業フォルダに移動

cd assistantseika-webapp

2. Vite + Vue プロジェクトを作成

npm create vite@latest frontend

（frontendはプロジェクト名なので自由に決めてOK）

3. プロンプトに答えます

質問	推奨回答例
Project name	frontend（または任意）
Select a framework	Vue
Select a variant	JavaScript（TypeScriptでもいいですが今回はJSでOK）

4. 生成されたfrontendフォルダに移動

cd frontend

5. 依存関係インストール

npm install

6. 必要なライブラリを追加（例：axios）

npm install axios

7. 開発サーバーを起動

npm run dev

→ これで、超高速なVite＋Vue開発環境が動きます！！

---

✅ まとめ：構成図（Vite版）

assistantseika-webapp/
├── frontend/ （Viteで作ったVueプロジェクト）
│    ├── index.html
│    ├── src/
│    ├── public/
│    └── package.json
├── server.py （Python Flaskサーバー）
├── venv/ （Python仮想環境）
└── README.md（任意）

• フロントエンド：Vite+Vue3
• バックエンド：Flask (Python)

でシンプル＆強力なローカル開発ができる、という形になります！

---

✅ 注意点（1個だけ）

CORS問題（ポートが違うので、Flaskサーバー側にCORS設定を入れる必要あり）
→ これはPythonサーバーにこれを追加するだけでOKです。

from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # ←これをつけるだけ！

これでVue（localhost:5173） → Flask（localhost:5000）間の通信が普通にできます。

---

✅ 要約

まとめポイント	内容
Vite利用	✅ 可能、むしろ推奨
必要手順	npm create vite@latest frontendで簡単
注意点	CORS設定をFlaskに入れるだけ

---

💬
ここまで問題なさそうでしょうか？
このまま 「具体的なVite版Vueコンポーネント雛形」（先ほどの送信用フォームもVite向けに書き直し）も用意できますが、どうしますか？✨
（必要ならすぐ作ります！）

🛠️ 環境構築まとめ

実装案の提案の段階でここまで精度の高い回答結果が得られると思わなかったので正直おどろきました。
ChatGPTがあればなんでもできそうな気がしてきますね。
次回の投稿で実際に実装していく様子をまとめていきたいと思います。

続きはこちらからご覧ください。(2025/06/18 更新)
https://zenn.dev/pwrengineer/articles/3315387c142ab5