マージしてmainブランチに追従

.github/workflows/DANGEROUS_trigger_preview_pages.yml

@@ -0,0 +1,26 @@
+name: "Trigger preview-pages' workflow"
+
+# プレビュー用ページのワークフローを起動する。
+# 詳細： https://github.com/voicevox/preview-pages?tab=readme-ov-file#%E4%BB%95%E7%B5%84%E3%81%BF
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - synchronize
+      - closed
+      - reopened
+  push:
+    branches:
+      - main
+      - project-*
+
+jobs:
+  trigger:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger Workflow
+        run: |
+          gh workflow run -R voicevox/preview-pages update_pages.yml
+        env:
+          GH_TOKEN: ${{ secrets.TRIGGER_PREVIEW_PAGES_TOKEN }}

.github/workflows/build.yml

@@ -26,9 +26,8 @@ on:
         default: false
 
 env:
-  VOICEVOX_ENGINE_REPO_URL: "https://github.com/VOICEVOX/voicevox_engine"
-  VOICEVOX_ENGINE_VERSION: 0.20.0
-  VOICEVOX_RESOURCE_VERSION: 0.20.0
+  VOICEVOX_ENGINE_VERSION: 0.21.1
+  VOICEVOX_RESOURCE_VERSION: 0.21.1
   VOICEVOX_EDITOR_VERSION:
     |- # releaseタグ名か、workflow_dispatchでのバージョン名か、999.999.999-developが入る
     ${{ github.event.release.tag_name || github.event.inputs.version || '999.999.999-develop' }}

.github/workflows/build_preview_pages.yml

@@ -0,0 +1,46 @@
+name: "Build Preview Pages"
+
+# プレビュー用ページをビルドする。
+# 詳細： https://github.com/voicevox/preview-pages?tab=readme-ov-file#%E4%BB%95%E7%B5%84%E3%81%BF
+
+on:
+  push:
+    branches:
+      - main
+      - project-*
+  pull_request:
+
+jobs:
+  # このJobの名前を変更したときは、voicevox/preview-pages側のscripts/collect.tsも変更すること。
+  build_preview_pages:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup environment
+        uses: ./.github/actions/setup-environment
+
+      - name: Build
+        run: |
+          # 追加のバージョン情報
+          if [ -n "${{ github.event.pull_request.head.sha }}" ]; then
+            LOCATION="PR#${{ github.event.pull_request.number }}"
+            SHORT_SHA=$(cut -c 1-7 <<< "${{ github.event.pull_request.head.sha }}")
+          else
+            LOCATION="${{ github.ref_name }}"
+            SHORT_SHA=$(cut -c 1-7 <<< "${{ github.sha }}")
+          fi
+
+          # Storybookのビルド
+          npm run storybook:build -- --output-dir $(pwd)/dist_preview/storybook
+
+          # ブラウザ版エディタのビルド
+          VITE_EXTRA_VERSION_INFO="${LOCATION} @ ${SHORT_SHA}" \
+            npm run browser:build -- --base ./ --outDir $(pwd)/dist_preview/editor
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: preview-pages
+          path: dist_preview

.github/workflows/test.yml

@@ -25,7 +25,6 @@ jobs:
         id: check-whether-to-update-snapshots
         uses: actions/github-script@v7
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const commits = ${{ toJson(github.event.commits) }};
             if (!commits) {
@@ -175,6 +174,11 @@ jobs:
     if: needs.config.outputs.shouldUpdateSnapshots == 'true'
     steps:
       - uses: actions/checkout@v4
+        with:
+          # NOTE: デフォルトの設定だとgithub-push-actionが動いてくれないので設定を変えている。
+          # ref: https://github.com/ad-m/github-push-action/issues/44#issuecomment-581706892
+          persist-credentials: false
+          fetch-depth: 0
 
       - name: Download artifacts
         uses: actions/download-artifact@v4
@@ -184,6 +188,7 @@ jobs:
           merge-multiple: true
 
       - name: Commit updated snapshots
+        id: commit-updated-snapshots
         run: |
           # パッチを適用
           for patch in patches/*.diff; do
@@ -197,11 +202,36 @@ jobs:
             git config --global user.email "github-actions[bot]@users.noreply.github.com"
             git add tests/
             git commit -m "（スナップショットを更新）"
-            git push
+
+            echo "changes_exist=true" >> $GITHUB_OUTPUT
           else
             echo "No changes to commit"
+
+            echo "changes_exist=false" >> $GITHUB_OUTPUT
           fi
 
+      - name: Push changes
+        if: steps.commit-updated-snapshots.outputs.changes_exist == 'true'
+        uses: ad-m/github-push-action@77c5b412c50b723d2a4fbc6d71fb5723bcd439aa
+        with:
+          github_token: ${{ secrets.PUSH_TOKEN || secrets.GITHUB_TOKEN }}
+          branch: ${{ github.ref }}
+
+      - name: Show warning if token is not set
+        if: steps.commit-updated-snapshots.outputs.changes_exist == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const pushTokenProvided = `${{ secrets.PUSH_TOKEN }}` !== "";
+            if (!pushTokenProvided) {
+              core.warning(
+                "スクリーンショットを更新したので、空コミットをプッシュしてテストを再実行してください。\n" +
+                "PUSH_TOKENをSecretsに追加すると次からこの操作を省けます。\n" +
+                "Secretsの設定方法はREADME.mdを参照してください。"
+              );
+            }
+            console.log(`pushTokenProvided: ${pushTokenProvided}`);
+
   lint:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -44,3 +44,6 @@ electron-builder.yml
 
 # Storybook
 storybook-static/
+
+# Preview Build Output
+dist_preview/

.storybook/preview.ts

@@ -53,6 +53,11 @@ const preview: Preview = {
           value: "#333",
         },
       ],
+      grid: {
+        cellSize: 8,
+        cellAmount: 4,
+        opacity: 0.1,
+      },
     },
   },
   decorators: [

.vscode/launch.template.json

@@ -6,11 +6,14 @@
     "configurations": [
         {
             "name": "Attach to Renderer Process",
-            // NOTE: background.tsで指定しているremote-debugging-port
-            "port": 9222,
+            "port": 9222, // NOTE: background.tsで指定しているremote-debugging-port
             "request": "attach",
             "type": "chrome",
-            "webRoot": "${workspaceFolder}",
+            "webRoot": "${workspaceFolder}/src",
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/**",
+                "!**/node_modules/**"
+            ],
             "timeout": 20000, // 20 * 1000 ms程度あればビルド時間は間に合うはず
         },
         {
@@ -26,6 +29,23 @@
             ],
             "type": "node"
         },
+        {
+            // 直接Electronのみを起動し、バックグラウンドで"electron:serve"を実行する
+            // NOTE: ホットリロードできない代わりに、デバッグ起動が軽い
+            "name": "Launch Electron Main Process without hot reload",
+            "request": "launch",
+            "type": "node",
+            "runtimeExecutable": "npx",
+            "args": [
+                "electron",
+                ".",
+                "--no-sandbox"
+            ],
+            "preLaunchTask": "Electron Serve without Launch Electron",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
+        },
         {
             "name": "Attach by Process ID",
             // .bin viteを指定するとElectronのMain Processのデバッグが可能
@@ -35,13 +55,25 @@
                 "<node_internals>/**"
             ],
             "type": "node"
-        },
+        }
     ],
     "compounds": [
         {
             "name": "Launch Electron Main/Renderer",
-            "configurations": ["Attach to Renderer Process", "Launch Electron Main Process via NPM"],
+            "configurations": [
+                "Attach to Renderer Process",
+                "Launch Electron Main Process via NPM"
+            ],
+            "stopAll": true
+        },
+        {
+            // ホットリロードできない代わりにデバッグ起動が軽いモード
+            "name": "Launch Electron Main/Renderer without hot reload",
+            "configurations": [
+                "Attach to Renderer Process",
+                "Launch Electron Main Process without hot reload"
+            ],
             "stopAll": true
         }
     ]
-}
+}

.vscode/tasks.template.json

@@ -0,0 +1,28 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Electron Serve without Launch Electron",
+            // Electronを起動せずにバックグラウンドで"electron:serve"を実行する
+            // NOTE: デバッグ起動を軽くできる
+            "type": "npm",
+            "script": "electron:serve",
+            "options": {
+                "env": {
+                    "SKIP_LAUNCH_ELECTRON": "1"
+                }
+            },
+            "isBackground": true,
+            "problemMatcher": {
+                "pattern": {
+                    "regexp": ""
+                },
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": "building for development\\.\\.\\.",
+                    "endsPattern": "main process build is complete\\."
+                }
+            }
+        }
+    ]
+}

README.md

@@ -148,6 +148,7 @@ Electron の機能が不要な、UI や音声合成などの End to End テス
 npm run test:browser-e2e
 npm run test-watch:browser-e2e # 監視モード
 npm run test-watch:browser-e2e -- --headed # テスト中の UI を表示
+npm run test-ui:browser-e2e # Playwright の UI を表示
 ```
 
 Playwright を使用しているためテストパターンを生成することもできます。
@@ -168,6 +169,8 @@ Storybook のコンポーネントのスクリーンショットを比較して
 
 ```bash
 npm run test:storybook-vrt
+npm run test-watch:storybook-vrt # 監視モード
+npm run test-ui:storybook-vrt # Playwright の UI を表示
 ```
 
 #### スクリーンショットの更新
@@ -187,6 +190,25 @@ npm run test:storybook-vrt
    ```
 
 4. Github Workflow が完了すると、更新されたスクリーンショットがコミットされます。
+5. プルした後、空コミットをプッシュしてテストを再実行します。
+
+   ```bash
+   git commit --allow-empty -m "（テストを再実行）"
+   git push
+   ```
+
+> [!NOTE]
+> トークンを作成して Secrets に追加することで、自動的にテストを再実行できます。
+>
+> 1. [Fine-granted Tokens](https://github.com/settings/personal-access-tokens/new) にアクセスします。
+> 2. 適当な名前を入力し、 `ユーザー名/voicevox` へのアクセス権を与え、 Repository permissions の Contents で Read and write を選択します。
+>    <details>
+>    <summary>設定例</summary>
+>    <img src="./docs/res/Fine-granted_Tokensの作成.png" width="320">
+>    </details>
+> 3. トークンを作成して文字列をコピーします。
+> 4. `ユーザー名/voicevox` のリポジトリの Settings > Secrets and variables > Actions > New repository secret を開きます。
+> 5. 名前に `PUSH_TOKEN` と入力し、先ほどの文字列を貼り付けて Secrets を追加します。
 
 ##### ローカルで更新する場合
 
@@ -297,7 +319,9 @@ npx openapi-generator-cli version-manager list
 
 npm scripts の `serve` や `electron:serve` などの開発ビルド下では、ビルドに使用している vite で sourcemap を出力するため、ソースコードと出力されたコードの対応付けが行われます。
 
-`.vscode/launch.template.json` をコピーして `.vscode/launch.json` を作成することで、開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
+`.vscode/launch.template.json` をコピーして `.vscode/launch.json` を、
+`.vscode/tasks.template.json` をコピーして `.vscode/tasks.json` を作成することで、
+開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
 
 ## ライセンス
 

package.json

@@ -20,7 +20,10 @@
     "test-watch:electron-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=electron playwright test",
     "test:browser-e2e": "cross-env VITE_TARGET=browser playwright test",
     "test-watch:browser-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=browser playwright test",
+    "test-ui:browser-e2e": "cross-env VITE_TARGET=browser playwright test --ui",
     "test:storybook-vrt": "cross-env TARGET=storybook playwright test",
+    "test-watch:storybook-vrt": "cross-env TARGET=storybook PWTEST_WATCH=1 playwright test",
+    "test-ui:storybook-vrt": "cross-env TARGET=storybook playwright test --ui",
     "lint": "eslint --ext .js,.vue,.ts,.mts *.config.* src tests build .storybook",
     "fmt": "eslint --ext .js,.vue,.ts,.mts *.config.* src tests build .storybook --fix",
     "markdownlint": "markdownlint --ignore node_modules/ --ignore dist/ --ignore dist_electron/ ./",

public/updateInfos.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": "0.21.1",
+    "descriptions": ["キャラクター「Voidoll」を追加"],
+    "contributors": []
+  },
   {
     "version": "0.21.0",
     "descriptions": [

src/backend/browser/contract.ts

@@ -1,8 +1,7 @@
-import { type EngineInfo, envEngineInfoSchema } from "@/type/preload";
+import { loadEnvEngineInfos } from "@/domain/defaultEngine/envEngineInfo";
+import { type EngineInfo } from "@/type/preload";
 
-const baseEngineInfo = envEngineInfoSchema
-  .array()
-  .parse(JSON.parse(import.meta.env.VITE_DEFAULT_ENGINE_INFOS))[0];
+const baseEngineInfo = loadEnvEngineInfos()[0];
 
 export const defaultEngine: EngineInfo = (() => {
   const { protocol, hostname, port, pathname } = new URL(baseEngineInfo.host);

src/backend/browser/sandbox.ts

@@ -19,8 +19,8 @@ import {
 } from "@/type/preload";
 import { AssetTextFileNames } from "@/type/staticResources";
 
-// TODO: base pathを設定できるようにするか、ビルド時埋め込みにする
-const toStaticPath = (fileName: string) => `/${fileName}`;
+const toStaticPath = (fileName: string) =>
+  `${import.meta.env.BASE_URL}/${fileName}`.replaceAll(/\/\/+/, "/");
 
 // FIXME: asを使わないようオーバーロードにした。オーバーロードも使わない書き方にしたい。
 function onReceivedIPCMsg<