voicevox_blog

KO | EN

gitlite — search

#python #hacktoberfest #typescript #llm #golang #machine-learning #deep-learning #linux #java #cli #awesome-list #security #mcp #openai

(★ 14)

VOICEVOX公式サイトを作るコードです

voicevox_blog 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# VOICEVOX BLOG

VOICEVOX の公式サイトのリポジトリです。  
https://voicevox.hiroshiba.jp/

## 環境構築

Node v22.21.0、pnpm v10.18.3 を用いて開発されています。

```bash
npm install -g pnpm
pnpm install
```

Astro での開発は VS Code がおすすめです。Astro 公式プラグインを導入することで快適になります。  
[Astro エディタのセットアップ](https://docs.astro.build/ja/editor-setup/#vs-code)

## ローカル環境でチェック

```bash
pnpm start
```

## deploy

Github Workflowの`build-and-deploy.yml`を`workflow_dispatch`してデプロイします。

### プレビュー版

[プレビュー版ページ](https://preview--voicevox.netlify.app/)

Netlify を使ってプレビュー環境デプロイを行っています。
`preview`ブランチに push すると、Netlify のプレビュー環境にデプロイされます。

```bash
# ビルド
pnpm run preview-build
```

## リソース情報の更新

コードの更新

```bash
EDITOR_VERSION="0.25.2"
RESOURCE_VERSION="0.25.2"
NEMO_VERSION="0.24.0"

pnpm run updateVersion \
  --editor_version="$EDITOR_VERSION" \
  --resource_version="$RESOURCE_VERSION" \
  --nemo_version="$NEMO_VERSION"
```

リソースの更新

```bash
editor_tag="0.25.2"
editor_url="https://raw.githubusercontent.com/VOICEVOX/voicevox/$editor_tag"

resource_tag="0.25.2"
resource_url="https://raw.githubusercontent.com/VOICEVOX/voicevox_resource/$resource_tag"

# 規約
curl -s "$resource_url/editor/README.md" |
  pnpm run updateMarkdown -t "src/pages/term.md"

# Q&A
curl -s "$editor_url/public/qAndA.md" |
  pnpm run updateMarkdown -t "src/pages/qa/index.md" --remove-prefix $'# よくあるご質問\n\n' # NOTE: 見出しと本文の間に検索欄を入れるため、見出しを消してレンダリング時に足す

# 変更履歴
curl -s "$editor_url/public/updateInfos.json" \
  >public/updateInfos.json
cp public/updateInfos.json src/data/updateInfos.json  # 0.22までsrc/dataディレクトリだったので、しばらくはコピーする

# デフォルトエンジンの更新情報
pnpm run generateLatestDefaultEngineInfos \
  --github_release_url="https://api.github.com/repos/VOICEVOX/voicevox_engine/releases" \
  --output_path="public/latestDefaultEngineInfos.json"
pnpm run generateLatestDefaultEngineInfos \
  --github_release_url="https://api.github.com/repos/VOICEVOX/voicevox_nemo_engine/releases" \
  --output_path="public/nemoLatestDefaultEngineInfos.json"
```

## サンプル音声の音量

ffmpeg で音量を調べて、だいたい LUFS 値が -20~-23 になるように調整しています。

```bash
# 音量を調べる
audio_file=audio.wav
ffmpeg -nostats -i $audio_file -filter_complex ebur128 -f null - </dev/null 2>&1 |
  grep -3 "Integrated loudness:" |
  grep "I:" |
  tail -n1

# 音量を調整する（例えば -17 LUFS を -20 LUFS くらいにしたい場合は volume=-3dB にする）
audio_file=audio.wav
output_file=output.wav
ffmpeg -i $audio_file -af volume=-3dB $output_file
```

## サムネイル生成

一部のサムネイルは HTML をレンダリングしたものを画像化しています。
次のコマンドで更新してください。

```bash
# 起動
pnpm start

# しばらくしてから実行
pnpm run generateThumb
```

## キャラクター追加方法

1. `src/constants/characterEntry.ts`にキー追加
2. リソースを追加
   - `src/assets/talk-audios`にトーク系音声サンプル
   - `src/assets/dormitory-audios`にボイボ寮音声サンプル
   - `src/assets/song-audios`にソング系音声サンプル
   - `src/assets/portrait-images`に立ち絵
   - `src/assets/bustup-images`にバストアップイラスト
   - `src/constants/characterInfos.ts`にキャラクター情報追加
   - `src/constants/characterInfo.ts`にキャラクター情報import
   - 呼び方・製品ページサムネ・ボイボ寮サムネ
3. バージョンを更新
4. デプロイ

## テスト

### リンター・フォーマッター

```bash
# フォーマットを適用する
pnpm run fmt

# lint チェックを行う
pnpm run lint
```

### GitHub Actions のバージョン固定

[pinact](https://github.com/suzuki-shunsuke/pinact) を使って GitHub Actions のバージョンを full-length commit SHA に固定しています。
プルリクエストを送ると自動でテストされます。

```bash
# バージョンを固定する
pinact run

# バージョンを更新して固定する
pinact run --update --min-age 7
```

### タイポチェック

[typos](https://github.com/crate-ci/typos) を使ってタイポのチェックを行っています。  
プルリクエストを送ると自動でテストされます。

### e2e テスト

ビルドしたあと Playwright を使って e2e テストを行っています。Windows 環境でのテストを想定しています。

```bash
pnpm run test-build

pnpm run test:e2e
pnpm run test:e2e --ui # 開発時は UI モードが便利
```

`pnpm start`してからe2eテストを起動することで、変更を反映しながらテストすることもできます。

`STRICT_USE_PREVIEW=1` を指定することで、必ず preview サーバーを起動して使います。

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

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

##### Github Actions で更新する場合

1. フォークしたリポジトリの設定で GitHub Actions を有効にします。
2. リポジトリの設定の Actions > General > Workflow permissions で Read and write permissions を選択します。
3. GitHub の Actions タブから「Test」ワークフローを選択し、「Run workflow」をクリックします。
4. 更新したいブランチを選択し、「スナップショットを更新する」にチェックを入れて実行します。

gh コマンドでも実行できます。

```bash
   gh workflow run test.yml -R (ユーザー名)/voicevox_blog --ref (ブランチ名) -f update_snapshots=true
   ```

5. Github Workflow が完了すると、更新されたスクリーンショットがコミットされます。
6. プルした後、空コミットをプッシュしてテストを再実行します。

```bash
   git commit --allow-empty -m "（テストを再実行）"
   git push
   ```

> [!NOTE]
> トークンを作成して Secrets に追加することで、自動的にテストを再実行できます。
>
> 1. [Fine-granted Tokens](https://github.com/settings/personal-access-tokens/new) にアクセスします。
> 2. 適当な名前を入力し、 `ユーザー名/voicevox_blog` へのアクセス権を与え、 Repository permissions の Contents で Read and write を選択します。
>    <details>
>    <summary>設定例</summary>
>    <img src="https://raw.githubusercontent.com/VOICEVOX/voicevox/refs/heads/main/docs/res/Fine-granted_Tokensの作成.png" width="320" alt="">
>    </details>
> 3. トークンを作成して文字列をコピーします。
> 4. `ユーザー名/voicevox_blog` のリポジトリの Settings > Secrets and variables > Actions > New repository secret を開きます。
> 5. 名前に `PUSH_TOKEN` と入力し、先ほどの文字列を貼り付けて Secrets を追加します。

## 開発者向け案内

### モードと効果の表

|                        | デフォルト | isDevelopment | isProduction | isPreview | isTest |
| ---------------------- | ---------- | ------------- | ------------ | --------- | ------ |
| Google Analytics       | 有効       | 無効          |              | 無効      | 無効   |
| robots                 | 有効       |               |              | 無効      |        |
| キャラサムネ画像がない | 無視       |               | エラー       |           |        |

### フォントサブセット

フォントは配信容量削減のため、使用する文字だけを含むフォントサブセットを作っています。
生成済みのフォントをキャッシュしておき、元フォントと使用文字が同じ場合は再利用します。

サブセット生成にはWOFF2に対応したfontToolsの`pyftsubset`が必要です。

### コーディング規約

`docs/コーディング規約.md`

### デザインルール

`docs/デザインルール.md`

## LICENSE

VOICEVOX の開発のための利用のみ許可されます。  
異なるライセンスを取得したい場合は、ヒホ（twitter: @hiho_karuta）に求めてください。

## 謝辞

- https://commons.nicovideo.jp/material/nc238325

voicevox_blog

voicevox_blog 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

voicevox_blog

voicevox_blog 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README