VOICEVOX のエディターです。
(エンジンは VOICEVOX ENGINE 、 コアは VOICEVOX CORE 、 全体構成は こちら に詳細があります。)
こちらは開発用のページになります。利用方法に関してはVOICEVOX 公式サイト をご覧ください。
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 内のvv-engine/run.exe
を指定すれば動きます。
Windows でインストール先を変更していない場合はC:/Users/(ユーザー名)/AppData/Local/Programs/VOICEVOX/vv-engine/run.exe
を指定してください。
パスの区切り文字は\
ではなく/
なのでご注意ください。
macOS 向けのVOICEVOX.app
を利用している場合は/path/to/VOICEVOX.app/Resources/MacOS/vv-engine/run
を指定してください。
Linux の場合は、Releasesから入手できる tar.gz 版に含まれるvv-engine/run
コマンドを指定してください。
AppImage 版の場合は$ /path/to/VOICEVOX.AppImage --appimage-mount
でファイルシステムをマウントできます。
VOICEVOX エディタの実行とは別にエンジン API のサーバを立てている場合はexecutionFilePath
を指定する必要はありませんが、
代わりにexecutionEnabled
をfalse
にしてください。
これは製品版 VOICEVOX を起動している場合もあてはまります。
エンジン API の宛先エンドポイントを変更する場合はVITE_DEFAULT_ENGINE_INFOS
内のhost
を変更してください。
# 開発しやすい環境で実行
npm run electron:serve
# ビルド時に近い環境で実行
npm run electron:serve -- --mode production
音声合成エンジンのリポジトリはこちらです https://github.com/VOICEVOX/voicevox_engine
Storybook を使ってコンポーネントを開発することができます。
npm run storybook
別途音声合成エンジンを起動し、以下を実行して表示された localhost へアクセスします。
npm run browser:serve
また、main ブランチのビルド結果がこちらにデプロイされています https://voicevox-browser-dev.netlify.app/
今はローカル PC 上で音声合成エンジンを起動する必要があります。
npm run electron:build
fork したリポジトリで Actions を ON にし、workflow_dispatch でbuild.yml
を起動すればビルドできます。
成果物は Release にアップロードされます。
npm run test:unit
npm run test-watch:unit # 監視モード
npm run test:unit -- --update # スナップショットの更新
Storybook を使ってコンポーネントのテストを行います。
npm run storybook # 先に Storybook を起動
npm run test:storybook
npm run test-watch:storybook # 監視モード
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 https://localhost:5173/ --viewport-size=1024,630
詳細は Playwright ドキュメントの Test generator を参照してください。
ブラウザ End to End テストでは Visual Regression Testing を行っています。 現在 VRT テストは Windows のみで行っています。 以下の手順でスクリーンショットを更新できます:
-
フォークしたリポジトリの設定で 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 テストを実行します。
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
コードの静的解析を行い、バグを未然に防ぎます。プルリクエストを送る前に実行してください。
npm run lint
typos を使ってタイポのチェックを行っています。 typos をインストール した後
typos
でタイポチェックを行えます。
もし誤判定やチェックから除外すべきファイルがあれば
設定ファイルの説明 に従って_typos.toml
を編集してください。
TypeScript の型チェックを行います。
npm run typecheck
Markdown の文法チェックを行います。
npm run markdownlint
ShellScript の文法チェックを行います。 インストール方法は こちら を参照してください。
shellcheck ./build/*.sh
音声合成エンジンが起動している状態で以下のコマンドを実行してください。
curl https://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
新しいバージョンの確認・インストールは次のコマンドで行えます。
npx openapi-generator-cli version-manager list
npm scripts の serve
や electron:serve
などの開発ビルド下では、ビルドに使用している vite で sourcemap を出力するため、ソースコードと出力されたコードの対応付けが行われます。
.vscode/launch.template.json
をコピーして .vscode/launch.json
を作成することで、開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
LGPL v3 と、ソースコードの公開が不要な別ライセンスのデュアルライセンスです。
別ライセンスを取得したい場合は、ヒホに求めてください。
X アカウント: @hiho_karuta