From ef7a2b31a46f4ca6cebd5db6398fe9bd38b0f99f Mon Sep 17 00:00:00 2001 From: Hiroshiba Date: Tue, 31 Jan 2023 13:03:05 +0900 Subject: [PATCH] =?UTF-8?q?0.14.0=E5=90=91=E3=81=91=E3=83=87=E3=82=B6?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E8=AA=BF=E6=95=B4=20(#1158)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/funcs.nsh | 12 +- build/installer.nsh | 6 +- ...63\343\201\256\346\226\271\351\207\235.md" | 20 +- public/howtouse.md | 10 +- public/qAndA.md | 4 +- src/App.vue | 7 +- src/background.ts | 15 +- src/background/engineManager.ts | 10 +- src/components/AudioInfo.vue | 12 +- src/components/DefaultStyleListDialog.vue | 73 +------ src/components/DefaultStyleSelectDialog.vue | 12 +- src/components/DictionaryManageDialog.vue | 2 +- src/components/EngineManageDialog.vue | 50 +++-- src/components/MenuBar.vue | 37 ++-- src/components/SettingDialog.vue | 12 +- src/electron/preload.ts | 4 +- src/store/engine.ts | 20 +- src/store/index.ts | 12 +- src/store/type.ts | 8 +- src/store/ui.ts | 6 +- src/type/ipc.ts | 2 +- src/type/preload.ts | 180 +++++++++--------- src/views/EditorHome.vue | 16 +- tests/unit/store/Vuex.spec.ts | 2 +- 24 files changed, 234 insertions(+), 298 deletions(-) diff --git a/build/funcs.nsh b/build/funcs.nsh index ce54787bf4..4e3d2fc944 100644 --- a/build/funcs.nsh +++ b/build/funcs.nsh @@ -172,10 +172,10 @@ !macroend ; ${getDiskSpace} Result Dir -; Dir に指定されたディレクトリーがあるドライブの空き容量をバイト単位で取得する -; Windows 標準機能でドライブをフォルダーへマウントしたりすると -; C:\somedir の空き容量が C:\ と一致するとは限らないため、調べたいディレクトリーを渡す必要がある -; @param Dir 空き容量を調べたいディレクトリー +; Dir に指定されたディレクトリがあるドライブの空き容量をバイト単位で取得する +; Windows 標準機能でドライブをフォルダへマウントしたりすると +; C:\somedir の空き容量が C:\ と一致するとは限らないため、調べたいディレクトリを渡す必要がある +; @param Dir 空き容量を調べたいディレクトリ ; @return Result インストール先の空き容量（バイト単位）、失敗時は "" !define getDiskSpace "!insertmacro getDiskSpace" !macro getDiskSpace Result Dir @@ -183,7 +183,7 @@ Exch $0 ; $0 Push $1 ; $1 $0 - ; 存在しないディレクトリーだと失敗するので親を辿る + ; 存在しないディレクトリだと失敗するので親を辿る getDiskSpace_loop: ${IfNot} ${FileExists} "$0\*.*" ${GetParent} $0 $0 @@ -191,7 +191,7 @@ ${EndIf} ; Input - ; $0 = 空き容量を調べたいディレクトリー + ; $0 = 空き容量を調べたいディレクトリ ; Output ; $0 = 取得した空き容量 ; $1 = 成功したかどうか diff --git a/build/installer.nsh b/build/installer.nsh index 70c2655650..e397014e29 100644 --- a/build/installer.nsh +++ b/build/installer.nsh @@ -3,7 +3,7 @@ !include "funcs.nsh" ; voicevox-X.X.X-x64.nsis.7z.ini などが配置されている場所 -; 開発中はここを一時的に差し替えて、out フォルダー内で npx http-server などとするとテストしやすい +; 開発中はここを一時的に差し替えて、out フォルダ内で npx http-server などとするとテストしやすい ; !define DOWNLOAD_BASE_URL "http://127.0.0.1:8080" !define DOWNLOAD_BASE_URL "${APP_PACKAGE_URL}" @@ -531,7 +531,7 @@ verifyPartedFile_finish${UniqueID}: ${EndIf} ${ElseIf} $0 == "No entry" ; ini ファイルから必要な情報が見つけられなかった - ; ウィルス対策ソフトや掃除系ソフトによって一時フォルダー内のファイルを削除されると起こるかもしれない + ; ウィルス対策ソフトや掃除系ソフトによって一時フォルダ内のファイルを削除されると起こるかもしれない MessageBox MB_OK|MB_ICONSTOP "ファイル検証に必要なデータが見つからなかったため処理を中断しました。$\r$\n時間を置いてからやり直してみてください。" ${myQuit} ${ElseIf} $0 == "Failed to get file size" @@ -650,7 +650,7 @@ Function welcomePageLeave ${myQuit} ${ElseIf} $0 == "No entry" ; ini ファイルから必要な情報が見つけられなかった - ; ウィルス対策ソフトや掃除系ソフトによって一時フォルダー内のファイルを削除されると起こるかもしれない + ; ウィルス対策ソフトや掃除系ソフトによって一時フォルダ内のファイルを削除されると起こるかもしれない MessageBox MB_OK|MB_ICONSTOP "ファイル検証に必要なデータが見つからなかったため処理を中断しました。$\r$\n時間を置いてからやり直してみてください。" ${myQuit} ${ElseIf} $0 != "OK" diff --git "a/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" "b/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" index c9b73dd79e..1da449e37a 100644 --- "a/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" +++ "b/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" @@ -1,4 +1,4 @@ -## UI/UXデザイン方針 +## UI/UX デザイン方針 メモ程度ですが、VOICEVOX の UX や UI のデザインの設計方針を共有します。 @@ -32,15 +32,23 @@ まだ試行錯誤を重ねていますが、だいたいこのような流れで進めています。 -1. デザインの外観をIssueなどで提案する - * 考慮抜け漏れを早期に見つけるためのステップです - * テキストでも手書きの図でもサンプル実装でもなんでもOKです +1. デザインの外観を Issue などで提案する + - 考慮抜け漏れを早期に見つけるためのステップです + - テキストでも手書きの図でもサンプル実装でもなんでも OK です 2. 実際に実装してプルリクエストを作成 - * UI/UXデザインは触ってみないとわからない部分が多いので、実装をお願いする形になります + - UI/UX デザインは触ってみないとわからない部分が多いので、実装をお願いする形になります 3. 問題箇所を洗い出す 4. マージ 5. 全体のデザインを見て必要であればメンテナーが微調整 ## 細かいデザインガイドライン -* キャンセルボタンは左 +- キャンセルボタンは左 + +## 名称 + +- ユーザーに提示する場合は「ディレクトリ」ではなく「フォルダ」 +- マルチエンジン周り + - VOICEVOX API 準拠エンジンのことは「エンジン」 + - VOICEVOX のエンジンなのか準拠エンジンなのかわからない場合は「VOICEVOX 準拠エンジン」 + - VVPP ファイルはそのまま「VVPP ファイル」、説明が必要なら「VOICEVOX 準拠エンジンパッケージ」 diff --git a/public/howtouse.md b/public/howtouse.md index ed65e2f211..e6f1f79f88 100644 --- a/public/howtouse.md +++ b/public/howtouse.md @@ -274,7 +274,7 @@ Linux は Nvidia 製 GPU のみに対応しています。 #### 書き出し先を固定 -音声ファイルを書き出すディレクトリを固定し、毎回ディレクトリを選択しなくても同じディレクトリに書き出し続けるようにします。 +音声ファイルを書き出すフォルダを固定し、毎回フォルダを選択しなくても同じフォルダに書き出し続けるようにします。 #### 書き出しファイル名パターン @@ -343,13 +343,13 @@ Linux は Nvidia 製 GPU のみに対応しています。 ### Windows 版 -インストーラー版でインストールした場合、インストールしたディレクトリの中にある Uninstall VOICEVOX.exe を実行してください。 -ZIP ファイルを解凍した場合、ダウンロードした ZIP ファイルと、展開したディレクトリを消去すればアンインストール完了です。 +インストーラー版でインストールした場合、インストールしたフォルダの中にある Uninstall VOICEVOX.exe を実行してください。 +ZIP ファイルを解凍した場合、ダウンロードした ZIP ファイルと、展開したフォルダを消去すればアンインストール完了です。 ### Mac 版 -インストーラー版でインストールした場合、「アプリケーション」ディレクトリにある VOICEVOX を「ゴミ箱」にドラッグ＆ドロップしてください。 -ZIP ファイルを解凍した場合、ダウンロードした ZIP ファイルと、展開したディレクトリを消去すればアンインストール完了です。 +インストーラー版でインストールした場合、「アプリケーション」フォルダにある VOICEVOX を「ゴミ箱」にドラッグ＆ドロップしてください。 +ZIP ファイルを解凍した場合、ダウンロードした ZIP ファイルと、展開したフォルダを消去すればアンインストール完了です。 ## よくあるご質問 diff --git a/public/qAndA.md b/public/qAndA.md index 08bf2eb314..aaaea54232 100644 --- a/public/qAndA.md +++ b/public/qAndA.md @@ -39,7 +39,7 @@ GPU 搭載の Windows PC と、Nvidia 製 GPU 搭載の Linux PC に対応して これは、実行しようとしたアプリやファイルの危険性がないかどうかの確認を促す、Windows SmartScreen（または Windows Defender SmartScreen）という機能からのメッセージです。 発行元などを確認して問題がない場合は、メッセージ内の「詳細情報」をクリックして表示される画面から、インストーラーを実行して下さい。 -### Q. インストール先のディレクトリはどこですか？ +### Q. インストール先のフォルダはどこですか？ デフォルトのインストール先は下記の場所です。 @@ -127,7 +127,7 @@ VOICEVOX Twitter アカウント [@voicevox_pj](https://twitter.com/voicevox_pj) ### Q. エラーログはどこで確認できますか？ -以下のディレクトリに保存されています。 +以下のフォルダに保存されています。 #### Windows 版 diff --git a/src/App.vue b/src/App.vue index 8f4b23d863..b3d8c4d249 100644 --- a/src/App.vue +++ b/src/App.vue @@ -22,12 +22,15 @@ export default defineComponent({ const store = useStore(); store.dispatch("INIT_VUEX"); - // URLパラメータに従ってセーフモードにする + // URLパラメータに従ってマルチエンジンをオフにする const route = useRoute(); const query = computed(() => route.query); watch(query, (newQuery) => { if (newQuery) { - store.dispatch("SET_IS_SAFE_MODE", newQuery["isSafeMode"] === "true"); + store.dispatch( + "SET_IS_MULTI_ENGINE_OFF_MODE", + newQuery["isMultiEngineOffMode"] === "true" + ); } }); diff --git a/src/background.ts b/src/background.ts index 57d7065f01..76bd250881 100644 --- a/src/background.ts +++ b/src/background.ts @@ -387,7 +387,7 @@ migrateHotkeySettings(); const appState = { willQuit: false, willRestart: false, - isSafeMode: false, + isMultiEngineOffMode: false, }; let filePathOnMac: string | undefined = undefined; // create window @@ -419,12 +419,15 @@ async function createWindow() { if (process.env.WEBPACK_DEV_SERVER_URL) { await win.loadURL( (process.env.WEBPACK_DEV_SERVER_URL as string) + - "#/home?isSafeMode=" + - appState.isSafeMode + "#/home?isMultiEngineOffMode=" + + appState.isMultiEngineOffMode ); } else { createProtocol("app"); - win.loadURL("app://./index.html#/home?isSafeMode=" + appState.isSafeMode); + win.loadURL( + "app://./index.html#/home?isMultiEngineOffMode=" + + appState.isMultiEngineOffMode + ); } if (isDevelopment) win.webContents.openDevTools(); @@ -825,9 +828,9 @@ ipcMainHandle("VALIDATE_ENGINE_DIR", (_, { engineDir }) => { return engineManager.validateEngineDir(engineDir); }); -ipcMainHandle("RESTART_APP", async (_, { isSafeMode }) => { +ipcMainHandle("RESTART_APP", async (_, { isMultiEngineOffMode }) => { appState.willRestart = true; - appState.isSafeMode = isSafeMode; + appState.isMultiEngineOffMode = isMultiEngineOffMode; win.close(); }); diff --git a/src/background/engineManager.ts b/src/background/engineManager.ts index 638aba52cd..1a45070495 100644 --- a/src/background/engineManager.ts +++ b/src/background/engineManager.ts @@ -83,7 +83,7 @@ export class EngineManager { /** * 追加エンジンの一覧を取得する。 - * FIXME: store.get("engineDirs")への副作用をEngineManager外に移動する + * FIXME: store.get("registeredEngineDirs")への副作用をEngineManager外に移動する */ fetchAdditionalEngineInfos(): EngineInfo[] { const engines: EngineInfo[] = []; @@ -129,8 +129,8 @@ export class EngineManager { log.log(`Failed to load engine: ${result}, ${engineDir}`); } } - // FIXME: この関数の引数でengineDirsを受け取り、動かないエンジンをreturnして、EngineManager外でstore.setする - for (const engineDir of this.store.get("engineDirs")) { + // FIXME: この関数の引数でregisteredEngineDirsを受け取り、動かないエンジンをreturnして、EngineManager外でstore.setする + for (const engineDir of this.store.get("registeredEngineDirs")) { const result = addEngine(engineDir, "path"); if (result !== "ok") { log.log(`Failed to load engine: ${result}, ${engineDir}`); @@ -141,8 +141,8 @@ export class EngineManager { `${engineDir}を読み込めませんでした。このエンジンは削除されます。` ); this.store.set( - "engineDirs", - this.store.get("engineDirs").filter((p) => p !== engineDir) + "registeredEngineDirs", + this.store.get("registeredEngineDirs").filter((p) => p !== engineDir) ); } } diff --git a/src/components/AudioInfo.vue b/src/components/AudioInfo.vue index e6139498b8..0978ced4df 100644 --- a/src/components/AudioInfo.vue +++ b/src/components/AudioInfo.vue @@ -399,7 +399,7 @@ disabled: uiLocked, }" > - + モーフィング
-
-
+
+
{{ morphingTargetCharacterInfo ? morphingTargetCharacterInfo.metas.speakerName @@ -423,13 +423,13 @@ morphingTargetCharacterInfo && morphingTargetCharacterInfo.metas.styles.length >= 2 " - class="text-body2 text-no-wrap ellipsis overflow-hidden" + class="text-body2 ellipsis overflow-hidden" > - ({{ + （{{ morphingTargetStyleInfo ? morphingTargetStyleInfo.styleName : undefined - }}) + }}）
diff --git a/src/components/DefaultStyleListDialog.vue b/src/components/DefaultStyleListDialog.vue index bb9f464487..152a7a71ca 100644 --- a/src/components/DefaultStyleListDialog.vue +++ b/src/components/DefaultStyleListDialog.vue @@ -53,7 +53,7 @@ v-ripple="isHoverableItem" class="q-pa-none character-item" :class="[isHoverableItem && 'hoverable-character-item']" - @dblclick="openStyleSelectDialog(speaker)" + @click="openStyleSelectDialog(speaker)" >
- - 変更 -
@@ -259,16 +249,6 @@ export default defineComponent({ .q-toolbar div:first-child { min-width: 0; } -.character-portrait-wrapper { - display: grid; - justify-content: center; - width: 100%; - height: 100%; - overflow: hidden; - .character-portrait { - margin: auto; - } -} .main { height: calc( @@ -291,10 +271,10 @@ export default defineComponent({ overflow-y: scroll; > div { - $character-item-size: 215px; + $character-item-size: 200px; display: grid; grid-template-columns: repeat(auto-fit, $character-item-size); - grid-auto-rows: 230px; + grid-auto-rows: 200px; column-gap: 10px; row-gap: 10px; align-content: center; @@ -332,41 +312,6 @@ export default defineComponent({ align-items: center; margin-top: -1rem; } - .new-character-item { - color: colors.$primary-light; - position: absolute; - left: 0px; - top: 0px; - } - } - } - } -} - -.character-order-container { - width: 180px; - height: 100%; - - display: flex; - flex-direction: column; - - .character-order { - flex: 1; - - display: flex; - flex-direction: column; - gap: 0.5rem; - height: 100%; - - overflow-y: auto; - - .character-order-item { - border-radius: 10px; - border: 2px solid rgba(colors.$display-rgb, 0.15); - text-align: center; - cursor: grab; - &.selected-character-order-item { - border: 2px solid colors.$primary-light; } } } @@ -379,16 +324,4 @@ export default defineComponent({ overflow: hidden; } } - -@media screen and (max-width: 880px) { - .q-drawer-container { - display: none; - } - .q-page-container { - padding-left: unset !important; - .q-page-sticky { - left: 0 !important; - } - } -} diff --git a/src/components/DefaultStyleSelectDialog.vue b/src/components/DefaultStyleSelectDialog.vue index 5be2e63fa9..bd663a2a85 100644 --- a/src/components/DefaultStyleSelectDialog.vue +++ b/src/components/DefaultStyleSelectDialog.vue @@ -1,8 +1,8 @@ -
- 既にインストールされているエンジンのフォルダを指定します。FIXME: - 説明を良い感じにする -
-
-
VVPPファイルの場所
+
+
PC内にあるエンジンを追加します。
@@ -193,10 +195,6 @@
-
- VVPPファイルとして配布されているエンジンを追加します。FIXME: - 説明を良い感じにする -
@@ -360,7 +358,7 @@ export default defineComponent({ const uiLockedState = ref(null); // ダイアログ内でstore.getters.UI_LOCKEDは常にtrueなので独自に管理 const uiLocked = computed(() => uiLockedState.value !== null); const isAddingEngine = ref(false); - const engineLoaderType = ref("dir"); + const engineLoaderType = ref("vvpp"); const lockUi = function ( lockType: "addingEngine" | "deletingEngine", diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue index bd1448a888..2d52ab3094 100644 --- a/src/components/MenuBar.vue +++ b/src/components/MenuBar.vue @@ -17,7 +17,7 @@ " /> -
+
{{ titleText }}
@@ -81,7 +81,7 @@ const currentVersion = ref(""); window.electron.getAppInfos().then((obj) => { currentVersion.value = obj.version; }); -const isSafeMode = computed(() => store.state.isSafeMode); +const isMultiEngineOffMode = computed(() => store.state.isMultiEngineOffMode); const uiLocked = computed(() => store.getters.UI_LOCKED); const menubarLocked = computed(() => store.getters.MENUBAR_LOCKED); const projectName = computed(() => store.getters.PROJECT_NAME); @@ -102,7 +102,7 @@ const titleText = computed( "VOICEVOX" + (currentVersion.value ? " - Ver. " + currentVersion.value + " - " : "") + (useGpu.value ? "GPU" : "CPU") + - (isSafeMode.value ? " - セーフモード" : "") + (isMultiEngineOffMode.value ? " - マルチエンジンオフ" : "") ); // FIXME: App.vue内に移動する @@ -398,21 +398,6 @@ const menudata = ref([ }, ]); -if (store.state.isSafeMode) { - ( - menudata.value.find((data) => data.label === "設定") as MenuItemRoot - ).subMenu.push({ - type: "button", - label: "セーフモードを解除", - onClick() { - store.dispatch("RESTART_APP", { - isSafeMode: false, - }); - }, - disableWhenUiLocked: false, - }); -} - const subMenuOpenFlags = ref( [...Array(menudata.value.length)].map(() => false) ); @@ -524,6 +509,22 @@ watch([engineInfos, engineManifests, enableMultiEngine], updateEngines, { immediate: true, }); +// マルチエンジンオフモードの解除 +if (store.state.isMultiEngineOffMode) { + ( + menudata.value.find((data) => data.label === "エンジン") as MenuItemRoot + ).subMenu.push({ + type: "button", + label: "マルチエンジンをオンにして再起動", + onClick() { + store.dispatch("RESTART_APP", { + isMultiEngineOffMode: false, + }); + }, + disableWhenUiLocked: false, + }); +} + watch(uiLocked, () => { // UIのロックが解除された時に再びメニューが開かれてしまうのを防ぐ if (uiLocked.value) { diff --git a/src/components/SettingDialog.vue b/src/components/SettingDialog.vue index 67d3d04788..8e29be7520 100644 --- a/src/components/SettingDialog.vue +++ b/src/components/SettingDialog.vue @@ -28,7 +28,7 @@
- +
エンジン
@@ -520,7 +520,7 @@ export default defineComponent({ await store.dispatch("GET_ENGINE_INFOS"); let engineIds: string[]; - if (store.state.isSafeMode) { + if (store.state.isMultiEngineOffMode) { // デフォルトエンジンだけを含める const main = Object.values(store.state.engineInfos).find( (engine) => engine.type === "default" @@ -600,7 +600,7 @@ export default defineComponent({ return lastEngineState; // FIXME: 暫定的に1つのエンジンの状態を返す }); - const isEngineWaitingLong = ref(false); + const isEngineWaitingLong = ref(true); let engineTimer: number | undefined = undefined; watch(allEngineState, (newEngineState) => { if (engineTimer !== undefined) { @@ -611,13 +611,13 @@ export default defineComponent({ isEngineWaitingLong.value = false; engineTimer = window.setTimeout(() => { isEngineWaitingLong.value = true; - }, 60000); + }, 30000); } else { isEngineWaitingLong.value = false; } }); - const restartAppWithSafeMode = () => { - store.dispatch("RESTART_APP", { isSafeMode: true }); + const restartAppWithMultiEngineOffMode = () => { + store.dispatch("RESTART_APP", { isMultiEngineOffMode: true }); }; const openFaq = () => { @@ -776,7 +776,7 @@ export default defineComponent({ allEngineState, isEngineWaitingLong, isMultipleEngine, - restartAppWithSafeMode, + restartAppWithMultiEngineOffMode, openFaq, isHelpDialogOpenComputed, isSettingDialogOpenComputed, diff --git a/tests/unit/store/Vuex.spec.ts b/tests/unit/store/Vuex.spec.ts index 690378df07..cb776f241a 100644 --- a/tests/unit/store/Vuex.spec.ts +++ b/tests/unit/store/Vuex.spec.ts @@ -49,7 +49,7 @@ describe("store/vuex.js test", () => { isAcceptRetrieveTelemetryDialogOpen: false, isAcceptTermsDialogOpen: false, isMaximized: false, - isSafeMode: false, + isMultiEngineOffMode: false, savedLastCommandUnixMillisec: null, savingSetting: { fileEncoding: "UTF-8",