VOICEVOX

VOICEVOX のエディターです。

（エンジンは VOICEVOX ENGINE 、コアは VOICEVOX CORE 、全体構成はこちらに詳細があります。）

ユーザーの方へ

こちらは開発用のページになります。利用方法に関してはVOICEVOX 公式サイトをご覧ください。

貢献者の方へ

VOICEVOX のエディタは Electron・TypeScript・Vue・Vuex などが活用されており、全体構成がわかりにくくなっています。
コードの歩き方で構成を紹介しているので、開発の一助になれば幸いです。

Issue を解決するプルリクエストを作成される際は、別の方と同じ Issue に取り組むことを避けるため、 Issue 側で取り組み始めたことを伝えるか、最初に Draft プルリクエストを作成してください。

VOICEVOX 非公式 Discord サーバーにて、開発の議論や雑談を行っています。気軽にご参加ください。

デザインガイドライン

UX・UI デザインの方針をご参照ください。

環境構築

.node-version に記載されているバージョンの Node.js をインストールしてください。
Node.js の管理ツール（nvsやVoltaなど）を利用すると簡単にインストールでき、Node.js の自動切り替えもできます。

Node.js をインストール後、このリポジトリを Fork して git clone し、次のコマンドを実行してください。

npm ci

実行

.env.productionをコピーして.envを作成し、VITE_DEFAULT_ENGINE_INFOS内のexecutionFilePathにvoicevox_engineのパスを指定します。

製品版 VOICEVOX のディレクトリのパスを指定すれば動きます。

Windows の場合でもパスの区切り文字は\ではなく/なのでご注意ください。

また、macOS 向けのVOICEVOX.appを利用している場合は/path/to/VOICEVOX.app/Contents/MacOS/runを指定してください。

Linux の場合は、Releasesから入手できる tar.gz 版に含まれるrunコマンドを指定してください。 AppImage 版の場合は$ /path/to/VOICEVOX.AppImage --appimage-mountでファイルシステムをマウントできます。

VOICEVOX エディタの実行とは別にエンジン API のサーバを立てている場合はexecutionFilePathを指定する必要はありません。これは製品版 VOICEVOX を起動している場合もあてはまります。

また、エンジン API の宛先エンドポイントを変更する場合はVITE_DEFAULT_ENGINE_INFOS内のhostを変更してください。

npm run electron:serve

音声合成エンジンのリポジトリはこちらです https://github.com/VOICEVOX/voicevox_engine

ブラウザ版の実行（開発中）

別途音声合成エンジンを起動し、以下を実行して表示された localhost へアクセスします。

npm run browser:serve

また、main ブランチのビルド結果がこちらにデプロイされています https://voicevox-browser-dev.netlify.app/#/talk
今はローカル PC 上で音声合成エンジンを起動する必要があります。

ビルド

npm run electron:build

テスト

単体テスト

npm run test:unit
npm run test-watch:unit # 監視モード
npm run test:unit -- --update # スナップショットの更新

ブラウザ End to End テスト

Electron の機能が不要な、UI や音声合成などの End to End テストを実行します。

Note 一部のエンジンの設定を書き換えるテストは、CI(Github Actions)上でのみ実行されるようになっています。

npm run test:browser-e2e
npm run test-watch:browser-e2e # 監視モード
npm run test-watch:browser-e2e -- --headed # テスト中の UI を表示

Playwright を使用しているためテストパターンを生成することもできます。 ブラウザ版を起動している状態で以下のコマンドを実行してください。

npx playwright codegen http://localhost:5173/#/talk  --viewport-size=800,600

詳細は Playwright ドキュメントの Test generator を参照してください。

スクリーンショットの更新

ブラウザ End to End テストでは Visual Regression Testing を行っています。現在 VRT テストは Windows のみで行っています。以下の手順でスクリーンショットを更新できます：

Github Actions で更新する場合

フォークしたリポジトリの設定で GitHub Actions を有効にします。
リポジトリの設定の Actions > General > Workflow permissions で Read and write permissions を選択します。
[update snapshots] という文字列をコミットメッセージに含めてコミットします。
```
git commit -m "UIを変更 [update snapshots]"
```
Github Workflow が完了すると、更新されたスクリーンショットがコミットされます。

ローカルで更新する場合

ローカル PC の OS に対応したもののみが更新されます。

npm run test:browser-e2e -- --update-snapshots

Electron End to End テスト

Electron の機能が必要な、エンジン起動・終了などを含めた End to End テストを実行します。

npm run test:electron-e2e
npm run test-watch:electron-e2e # 監視モード

依存ライブラリのライセンス情報の生成

依存ライブラリのライセンス情報は Github Workflow でのビルド時に自動生成されます。以下のコマンドで生成できます。

# get licenses.json from voicevox_engine as engine_licenses.json

npm run license:generate -- -o voicevox_licenses.json
npm run license:merge -- -o public/licenses.json -i engine_licenses.json -i voicevox_licenses.json

コードフォーマット

コードのフォーマットを整えます。プルリクエストを送る前に実行してください。

npm run fmt

タイポチェック

typos を使ってタイポのチェックを行っています。 typos をインストールした後

typos

でタイポチェックを行えます。もし誤判定やチェックから除外すべきファイルがあれば設定ファイルの説明に従って_typos.tomlを編集してください。

型チェック

TypeScript の型チェックを行います。

npm run typecheck

Markdownlint

Markdown の文法チェックを行います。

npm run markdownlint

Shellcheck

ShellScript の文法チェックを行います。インストール方法はこちらを参照してください。

shellcheck ./build/*.sh

OpenAPI generator

音声合成エンジンが起動している状態で以下のコマンドを実行してください。

curl http://127.0.0.1:50021/openapi.json >openapi.json

npx openapi-generator-cli generate \
    -i openapi.json \
    -g typescript-fetch \
    -o src/openapi/ \
    --additional-properties "modelPropertyNaming=camelCase,supportsES6=true,withInterfaces=true,typescriptThreePlus=true"

npm run fmt

OpanAPI generator のバージョンアップ

新しいバージョンの確認・インストールは次のコマンドで行えます。

npx openapi-generator-cli version-manager list

VS Code でのデバッグ実行

npm scripts の serve や electron:serve などの開発ビルド下では、ビルドに使用している vite で sourcemap を出力するため、ソースコードと出力されたコードの対応付けが行われます。

.vscode/launch.template.json をコピーして .vscode/launch.json を作成することで、開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。

ライセンス

LGPL v3 と、ソースコードの公開が不要な別ライセンスのデュアルライセンスです。別ライセンスを取得したい場合は、ヒホに求めてください。
X アカウント: @hiho_karuta

femshima/voicevox