0.14.0向けデザイン調整 (VOICEVOX#1158)

build/funcs.nsh

@@ -172,26 +172,26 @@
 !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
   Push "${Dir}" ; Stack <Dir>
   Exch $0       ;       $0
   Push $1       ;       $1 $0
 
-  ; 存在しないディレクトリーだと失敗するので親を辿る
+  ; 存在しないディレクトリだと失敗するので親を辿る
   getDiskSpace_loop:
   ${IfNot} ${FileExists} "$0\*.*"
     ${GetParent} $0 $0
     Goto getDiskSpace_loop
   ${EndIf}
 
   ; Input
-  ;  $0 = 空き容量を調べたいディレクトリー
+  ;  $0 = 空き容量を調べたいディレクトリ
   ; Output
   ;  $0 = 取得した空き容量
   ;  $1 = 成功したかどうか

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"

docs/UX・UIデザインの方針.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 準拠エンジンパッケージ」

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 ファイルと、展開したフォルダを消去すればアンインストール完了です。
 
 ## よくあるご質問
 

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 版
 

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"
+        );
       }
     });
 

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();
 });
 

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)
         );
       }
     }

src/components/AudioInfo.vue

@@ -399,7 +399,7 @@
         disabled: uiLocked,
       }"
     >
-      <q-separator class="q-mb-md" />
+      <q-separator class="q-my-md" />
       <span class="text-body1 q-mb-xs">モーフィング</span>
       <div class="row no-wrap items-center">
         <character-button
@@ -410,8 +410,8 @@
           :ui-locked="uiLocked"
           v-model:selected-voice="morphingTargetVoice"
         />
-        <div class="q-pl-xs overflow-hidden">
-          <div class="text-body2 text-no-wrap ellipsis overflow-hidden">
+        <div class="q-pl-xs row overflow-hidden">
+          <div class="text-body2 ellipsis overflow-hidden">
             {{
               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
-            }})
+            }}）
           </div>
         </div>
       </div>

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)"
               >
                 <div class="character-item-inner">
                   <img
@@ -86,16 +86,6 @@
                       }}スタイル）</span
                     >
                   </div>
-                  <q-btn
-                    outline
-                    class="q-mt-sm"
-                    text-color="display"
-                    @mouseenter="isHoverableItem = false"
-                    @mouseleave="isHoverableItem = true"
-                    @click.stop="openStyleSelectDialog(speaker)"
-                  >
-                    変更
-                  </q-btn>
                 </div>
               </q-item>
             </div>
@@ -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;
-    }
-  }
-}
 </style>