Merge branch 'main' into feat/url-infos

.npmrc

@@ -1,2 +1,3 @@
 engine-strict=true
 save-exact=true
+@jsr:registry=https://npm.jsr.io

README.md

@@ -15,7 +15,13 @@
 
 こちらは開発用のページになります。利用方法に関しては[VOICEVOX 公式サイト](https://voicevox.hiroshiba.jp/) をご覧ください。
 
-## 貢献者の方へ
+## プロジェクトに貢献したいと考えている方へ
+
+VOICEVOXプロジェクトは興味ある方の参画を歓迎しています。
+[貢献手順について説明したガイド](./CONTRIBUTING.md)をご用意しております。
+
+貢献というとプログラム作成と思われがちですが、ドキュメント執筆、テスト生成、改善提案への議論参加など様々な参加方法があります。
+初心者歓迎タスクもありますので、皆様のご参加をお待ちしております。
 
 VOICEVOX のエディタは Electron・TypeScript・Vue・Vuex などが活用されており、全体構成がわかりにくくなっています。  
 [コードの歩き方](./docs/コードの歩き方.md)で構成を紹介しているので、開発の一助になれば幸いです。

package.json

@@ -35,8 +35,8 @@
   "dependencies": {
     "@gtm-support/vue-gtm": "1.2.3",
     "@quasar/extras": "1.10.10",
+    "@sevenc-nanashi/utaformatix-ts": "npm:@jsr/[email protected]",
     "async-lock": "1.4.0",
-    "buffer": "6.0.3",
     "dayjs": "1.10.7",
     "electron-log": "5.1.2",
     "electron-window-state": "5.0.3",
@@ -47,14 +47,12 @@
     "hotkeys-js": "3.13.6",
     "immer": "9.0.21",
     "markdown-it": "13.0.2",
-    "midi-file": "1.2.4",
     "move-file": "3.0.0",
     "multistream": "4.1.0",
     "pixi.js": "7.4.0",
     "quasar": "2.11.6",
     "semver": "7.5.4",
     "shlex": "2.1.2",
-    "source-map-support": "0.5.19",
     "systeminformation": "5.21.15",
     "tree-kill": "1.2.2",
     "vue": "3.4.26",
@@ -70,14 +68,11 @@
     "@playwright/test": "1.43.1",
     "@quasar/vite-plugin": "1.6.0",
     "@types/async-lock": "1.4.0",
-    "@types/diff": "5.0.3",
-    "@types/electron-devtools-installer": "2.2.2",
     "@types/encoding-japanese": "1.0.18",
     "@types/glob": "8.0.0",
     "@types/markdown-it": "12.2.0",
     "@types/multistream": "4.1.0",
     "@types/semver": "7.3.9",
-    "@types/unzipper": "0.10.5",
     "@types/wicg-file-system-access": "2020.9.6",
     "@types/yargs": "17.0.32",
     "@typescript-eslint/eslint-plugin": "7.11.0",
@@ -101,15 +96,10 @@
     "eslint-plugin-vue": "9.26.0",
     "happy-dom": "8.4.2",
     "license-checker-rseidelsohn": "4.3.0",
-    "markdownlint": "0.31.1",
     "markdownlint-cli": "0.37.0",
-    "optionator": "0.9.1",
     "prettier": "3.2.5",
     "sass": "1.32.13",
-    "sass-loader": "8.0.2",
-    "tmp": "0.2.1",
     "ts-node": "10.9.1",
-    "tsconfig-paths": "4.1.2",
     "typescript": "5.4.5",
     "vite": "5.2.9",
     "vite-plugin-checker": "0.6.4",

public/howtouse.md

@@ -299,6 +299,12 @@ VOICEVOX では、歌声合成機能がプロトタイプ版として提供さ
 
 ソング機能は鋭意制作中です。フィードバックをお待ちしています。
 
+### 歌詞の入力
+
+ノートをダブルクリックすることで歌詞を入力できます。複数の文字を入力すれば一括入力できます。
+
+<img src="res/song2.png" style="max-height: 8rem" alt="ノートに複数の文字を入力することで、後ろのノートに歌詞が送られる様子が写っています"/>
+
 ### 音域調整
 
 「音域調整」の値が大きいほど高い音域で、小さいほど低い音域でうまく歌えるようになります。

src/backend/browser/fileImpl.ts

@@ -3,6 +3,9 @@ import { directoryHandleStoreKey } from "./contract";
 import { openDB } from "./browserConfig";
 import { SandboxKey } from "@/type/preload";
 import { failure, success } from "@/type/result";
+import { createLogger } from "@/domain/frontend/log";
+
+const log = createLogger("fileImpl");
 
 const storeDirectoryHandle = async (
   directoryHandle: FileSystemDirectoryHandle,
@@ -176,3 +179,45 @@ export const checkFileExistsImpl: (typeof window)[typeof SandboxKey]["checkFileE
 
     return Promise.resolve(fileEntries.includes(fileName));
   };
+
+// FileSystemFileHandleを保持するMap。キーは生成した疑似パス。
+const fileHandleMap: Map<string, FileSystemFileHandle> = new Map();
+
+// ファイル選択ダイアログを開く
+// 返り値はファイルパスではなく、疑似パスを返す
+export const showOpenFilePickerImpl = async (options: {
+  multiple: boolean;
+  fileTypes: {
+    description: string;
+    accept: Record<string, string[]>;
+  }[];
+}) => {
+  try {
+    const handles = await showOpenFilePicker({
+      excludeAcceptAllOption: true,
+      multiple: options.multiple,
+      types: options.fileTypes,
+    });
+    const paths = [];
+    for (const handle of handles) {
+      const fakePath = `<browser-dummy-${crypto.randomUUID()}>-${handle.name}`;
+      fileHandleMap.set(fakePath, handle);
+      paths.push(fakePath);
+    }
+    return handles.length > 0 ? paths : undefined;
+  } catch (e) {
+    log.warn(`showOpenFilePicker error: ${e}`);
+    return undefined;
+  }
+};
+
+// 指定した疑似パスのファイルを読み込む
+export const readFileImpl = async (filePath: string) => {
+  const fileHandle = fileHandleMap.get(filePath);
+  if (fileHandle == undefined) {
+    return failure(new Error(`ファイルが見つかりません: ${filePath}`));
+  }
+  const file = await fileHandle.getFile();
+  const buffer = await file.arrayBuffer();
+  return success(buffer);
+};

src/backend/browser/sandbox.ts

@@ -1,7 +1,9 @@
 import { defaultEngine } from "./contract";
 import {
   checkFileExistsImpl,
+  readFileImpl,
   showOpenDirectoryDialogImpl,
+  showOpenFilePickerImpl,
   writeFileImpl,
 } from "./fileImpl";
 import { getConfigManager } from "./browserConfig";
@@ -127,10 +129,18 @@ export const api: Sandbox = {
       }
     });
   },
-  showProjectLoadDialog(/* obj: { title: string } */) {
-    throw new Error(
-      "ブラウザ版では現在ファイルの読み込みをサポートしていません",
-    );
+  async showProjectLoadDialog() {
+    return showOpenFilePickerImpl({
+      multiple: false,
+      fileTypes: [
+        {
+          description: "Voicevox Project File",
+          accept: {
+            "application/json": [".vvproj"],
+          },
+        },
+      ],
+    });
   },
   showMessageDialog(obj: {
     type: "none" | "info" | "error" | "question" | "warning";
@@ -156,18 +166,35 @@ export const api: Sandbox = {
       `Not implemented: showQuestionDialog, request: ${JSON.stringify(obj)}`,
     );
   },
-  showImportFileDialog(/* obj: { title: string } */) {
-    throw new Error(
-      "ブラウザ版では現在ファイルの読み込みをサポートしていません",
-    );
+  async showImportFileDialog(obj: {
+    name?: string;
+    extensions?: string[];
+    title: string;
+  }) {
+    const fileHandle = await showOpenFilePickerImpl({
+      multiple: false,
+      fileTypes: [
+        {
+          description: obj.name ?? "Text",
+          accept: obj.extensions
+            ? {
+                "application/octet-stream": obj.extensions.map(
+                  (ext) => `.${ext}`,
+                ),
+              }
+            : {
+                "plain/text": [".txt"],
+              },
+        },
+      ],
+    });
+    return fileHandle?.[0];
   },
   writeFile(obj: { filePath: string; buffer: ArrayBuffer }) {
     return writeFileImpl(obj);
   },
-  readFile(/* obj: { filePath: string } */) {
-    throw new Error(
-      "ブラウザ版では現在ファイルの読み込みをサポートしていません",
-    );
+  readFile(obj: { filePath: string }) {
+    return readFileImpl(obj.filePath);
   },
   isAvailableGPUMode() {
     // TODO: WebAssembly版をサポートする時に実装する

src/components/Dialog/AllDialog.vue

@@ -22,7 +22,7 @@
   <UpdateNotificationDialogContainer
     :canOpenDialog="canOpenNotificationDialog"
   />
-  <ImportMidiDialog v-model="isImportMidiDialogOpenComputed" />
+  <ImportSongProjectDialog v-model="isImportSongProjectDialogOpenComputed" />
 </template>
 
 <script setup lang="ts">
@@ -38,7 +38,7 @@ import AcceptTermsDialog from "@/components/Dialog/AcceptTermsDialog.vue";
 import DictionaryManageDialog from "@/components/Dialog/DictionaryManageDialog.vue";
 import EngineManageDialog from "@/components/Dialog/EngineManageDialog.vue";
 import UpdateNotificationDialogContainer from "@/components/Dialog/UpdateNotificationDialog/Container.vue";
-import ImportMidiDialog from "@/components/Dialog/ImportMidiDialog.vue";
+import ImportSongProjectDialog from "@/components/Dialog/ImportSongProjectDialog.vue";
 import { useStore } from "@/store";
 import { filterCharacterInfosByStyleType } from "@/store/utility";
 
@@ -159,12 +159,12 @@ const canOpenNotificationDialog = computed(() => {
   );
 });
 
-// MIDIインポート時の設定ダイアログ
-const isImportMidiDialogOpenComputed = computed({
-  get: () => store.state.isImportMidiDialogOpen,
+// ソングのプロジェクトファイルのインポート時の設定ダイアログ
+const isImportSongProjectDialogOpenComputed = computed({
+  get: () => store.state.isImportSongProjectDialogOpen,
   set: (val) =>
     store.dispatch("SET_DIALOG_OPEN", {
-      isImportMidiDialogOpen: val,
+      isImportSongProjectDialogOpen: val,
     }),
 });
 </script>