0.15に向けたUXやUIの調整 (#1719)

* 行番号のデザイン調整

* トーストのUI・UX調整

* エディタの＋ボタンを隠すときにダイアログを表示しないように変更

* 設定ダイアログの縦幅を統一

* 設定やUIの名称を調整

* 「再生位置を追従」をq-btn-toggleに合わせる

* プリセット機能を通常機能に、スライドトランジションも追加

* ツールチップの挙動を統一

* speaker -> styleId

* Revert "speaker -> styleId"

This reverts commit 5cf0e7f.

* openapiを戻す

* 使い方を更新

* 「調整結果の保持」を開発時のみ機能に

docs/UX・UIデザインの方針.md

@@ -45,7 +45,7 @@
    - テキストでも手書きの図でもサンプル実装でもなんでも OK です
 2. 実際に実装してプルリクエストを作成
    - UI/UX デザインは触ってみないとわからない部分が多いので、実装をお願いする形になります
-   - デザインの変更はコード量が少なくても内容がかさばるので、+-合計80程度の差分に収めておくとマージまでがスムーズです
+   - デザインの変更はコード量が少なくても内容がかさばるので、+-合計 80 程度の差分に収めておくとマージまでがスムーズです
 3. 問題箇所を洗い出す
 4. マージ
 5. 全体のデザインを見て必要であればメンテナーが微調整
@@ -80,7 +80,7 @@
     - 行番号 ･･･ レーンの番号、レーンがユーザー向けになったら「レーン番号」へ
     - キャラクターアイコン ･･･ キャラクターやスタイルを変更できるボタン
     - テキスト欄 ･･･ 音声合成するためのテキストを入力する区画
-  - テキスト欄追加ボタン 🚷 ･･･ レーンを追加するボタン
+  - テキスト追加ボタン ･･･ レーンを追加するボタン
 - パラメータ調整欄 🚷 ･･･ 画面右にあるパラメータなどを調整できるパネル
 - 詳細調整欄 🚷 ･･･ 画面下にあるイントネーションなどを調整できるパネル
   - 項目 ･･･ 詳細調整欄のイントネーションやアクセントなどの選択ボタン

public/howtouse.md

@@ -40,7 +40,7 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 
 <img src="res/image4.png" style="max-height: 6rem" alt="音声合成エンジンを起動している様子" />
 
-## 音声の生成
+## 音声の生成・再生
 
 キャラクターアイコンの右にある空白をクリックしてテキストを入力してみてください。
 
@@ -58,6 +58,8 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 
 <img src="res/image10.png" style="max-height: 12rem" alt="テキスト欄が増えた様子" />
 
+テキスト欄にマウスカーソルを合わせると出てくるゴミ箱のボタンで、そのテキスト欄を削除できます。
+
 ## キャラクターの変更
 
 テキスト入力欄の左にあるアイコンをクリックすると、テキストを読み上げてくれるキャラクターを変更することができます。
@@ -76,7 +78,7 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 
 例えば「ディープラーニング」がこのように分かれてしまった場合は、
 
-<img src="res/image9.png" style="max-height: 16rem" alt="「ディープラーニング」が「ディープ」と「ラーニング」に分かれた様子"/>
+<img src="res/image9.png" style="max-height: 12rem" alt="「ディープラーニング」が「ディープ」と「ラーニング」に分かれた様子"/>
 
 ２つの隙間をクリックすると
 
@@ -99,6 +101,23 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 
 <img src="res/image8.png" style="max-height: 7.5rem" alt="「ディープラーニング」" /> → <img src="res/image1.png" style="max-height: 8rem" alt="「↑ ディープラ ↓ アニング」" />
 
+## パラメータの変更
+
+画面の右の欄で、テキスト欄ごとに話速や抑揚などのパラメータを変更することができます。
+
+<img src="res/image24.png" style="max-height: 12rem" alt="「イントネーション」をクリックして現れる縦線のバー"/>
+
+- 話速
+  - 読み上げ速度を変更できます。数値が大きいほど速くなります。
+- 音高
+  - 読み上げの高さを変更できます。数値が大きいほど高くなります。
+- 抑揚
+  - 読み上げの抑揚を変更できます。数値が小さいほど棒読みに近くなります。
+- 音量
+  - 音声の音量を変更できます。数値が大きいほど音が大きくなります。
+- 開始無音・終了無音
+  - 音声の先頭や末尾の無音の長さを変更できます。数値が大きいほど無音時間が長くなります。
+
 ## イントネーションの変更
 
 アクセントを変更してもうまく行かなかったときや、抑揚をより拘りたいときに、文字ごとの音の高さ（イントネーション）を直接変更することができます。
@@ -144,10 +163,16 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 
 <img src="res/image22.png" style="max-height: 12rem" alt="一つの文字のバーが中央で縦に分かれている様子"/>
 
+## 音声を途中から再生
+
+アクセント区間をクリックすることで、その区間から音声を再生できます。もう一度クリックすると解除できます。
+
+<img src="res/image23.png" style="max-height: 8rem" alt="アクセント区間をクリックした様子。クリックされたアクセント区間が青色になっています。"/>
+
 ## 音声ファイルの書き出し
 
 メニューにある「ファイル」の「音声書き出し」ボタンを押すと、全テキスト欄の音声が WAV ファイルとして書き出されます。
-ファイル保存時、ファイル名は `[何行目]_[キャラ名]_[テキスト冒頭].wav` として保存されます。設定でテキストファイルも一緒に書き出すこともできます。
+ファイル保存時、ファイル名は `[何行目]_[キャラ名]_[テキスト冒頭].wav` として保存されます。設定でテキストファイルも一緒に書き出すこともできます。ファイル名は設定の「書き出しファイル名パターン」で変更できます。
 
 ## テキストファイルの読み込み
 
@@ -245,6 +270,10 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 
 <img src="res/dict02.png" style="max-height: 17rem" alt="単語と読みとアクセントの登録画面"/>
 
+<!--
+TODO: 右クリックメニューの説明。項目が増えてきたら追加する。
+-->
+
 ## オプション
 
 「設定」の「オプション」でいろいろな設定を変更することができます。
@@ -263,6 +292,17 @@ Linux は Nvidia 製 GPU のみに対応しています。
 
 ### 「操作」項目
 
+#### プリセット機能
+
+話速や抑揚などのパラメータをまとめて登録できるプリセット機能を利用できるようになります。ソフトウェアが終了しても設定したプリセットは残ります。  
+プリセットを再登録する際、同じプリセットを割り当てているテキスト欄のパラメータを一括で変更することもできます。
+
+スタイルごとに１つデフォルトプリセットが用意されています。
+
+#### スタイル変更時にデフォルトプリセットを適用
+
+プリセット機能をオンにしている場合、スタイルを変更したときにデフォルトプリセットを自動的に適用するようになります。
+
 #### パラメータの引き継ぎ
 
 テキスト欄を追加する際、話速や抑揚といったパラメータを引き継ぐようになります。
@@ -271,15 +311,19 @@ Linux は Nvidia 製 GPU のみに対応しています。
 
 再生中の単語が画面内に収まるよう、自動的にスクロールして追従するようになります。
 
-#### テキスト分割の挙動
+#### テキスト自動分割
 
-テキストを貼り付け時、句点や改行でテキストを分割するかの挙動を変更できます。
+テキストを貼り付ける時、句点や改行でテキストを分割するかの挙動を変更できます。
 
-### 「保存」項目
+#### メモ機能
 
-#### 文字コード
+テキストを`[]`で囲むことで、テキスト中にメモを書けます。半角の`[]`と全角の`［］`のどちらにも対応しています。
 
-読み込み・書き込み用の文字コードを選択できます。
+#### ルビ機能
+
+テキストに`{ルビ対象|よみかた}`と書くことでテキストの読み方を変えられるようになります。半角の`{|}`と全角の`｛｜｝`のどちらにも対応しています。書き出しテキストを変えずに読み方を変えたいときに便利です。
+
+### 「保存」項目
 
 #### 書き出し先を固定
 
@@ -293,6 +337,10 @@ Linux は Nvidia 製 GPU のみに対応しています。
 
 同じファイル名のファイルがあった場合に連番として保存します。
 
+#### 文字コード
+
+読み込み・書き込み用の文字コードを選択できます。
+
 #### txt ファイルを書き出し
 
 テキスト内容を一緒に保存します。
@@ -301,6 +349,24 @@ Linux は Nvidia 製 GPU のみに対応しています。
 
 リップシンクなどに便利な、音声の音素情報とそのタイミング情報が書かれたラベルファイルを一緒に保存します。
 
+### 「外観」項目
+
+#### テーマ
+
+デフォルトのライトテーマと、暗めのダークテーマを切り替えることが出来ます。
+
+#### フォント
+
+ソフトウェアで使用するフォントを変更できます。
+
+#### 行番号の表示
+
+テキスト欄の左に行番号を表示します。
+
+#### テキスト追加ボタンの表示
+
+テキスト追加ボタンを非表示にできます。ショートカットキー`Shift`+`Enter`でテキスト欄を追加できます。
+
 ### 「高度な設定」項目
 
 #### マルチエンジン機能
@@ -323,15 +389,6 @@ VOICEVOX API 準拠エンジンを VOICEVOX 内で利用できるようになり
 
 開発中の便利機能を利用することができます。
 
-#### テーマ変更
-
-デフォルトのライトテーマと、暗めのダークテーマを切り替えることが出来ます。
-
-#### プリセット機能
-
-話速や抑揚などのパラメータをまとめて登録できる機能です。  
-ソフトウェアが終了しても設定したプリセットは残ります。
-
 #### 疑問文自動調整
 
 疑問文のときに自動的に語尾の音を上げて、疑問文っぽい音声を生成するようになります。
@@ -341,6 +398,10 @@ VOICEVOX API 準拠エンジンを VOICEVOX 内で利用できるようになり
 対応している音声を混ぜてモーフィングした音声を合成できるようになります。  
 ２つの音声を一度生成してから、音声を機械的に分析・再合成する後処理を行うことで実現しています。
 
+#### 複数選択
+
+複数のテキスト欄を選択できるようになります。
+
 ### 「データ収集」項目
 
 #### ソフトウェア利用状況のデータ収集を許可する

src/components/AudioCell.vue

@@ -567,7 +567,7 @@ const contextMenudata = ref<
   { type: "separator" },
   {
     type: "button",
-    label: "内容をテキストのみに適用",
+    label: "読みを変えずに適用",
     onClick: async () => {
       contextMenu.value?.hide();
       isChangeFlag.value = false;
@@ -676,7 +676,8 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
     height: 2rem;
     width: v-bind(textLineNumberWidth);
     line-height: 2rem;
-    margin-right: -0.3rem;
+    margin-left: -0.1rem;
+    margin-right: -0.4rem;
     opacity: 0.6;
     text-align: right;
     color: colors.$display;

src/components/Dialog.ts

@@ -352,7 +352,7 @@ const showWriteErrorDialog = ({
   }
 };
 
-const NOTIFY_TIMEOUT = 5000;
+const NOTIFY_TIMEOUT = 7000;
 
 export const showNotifyAndNotShowAgainButton = (
   {
@@ -373,7 +373,7 @@ export const showNotifyAndNotShowAgainButton = (
     timeout: NOTIFY_TIMEOUT,
     actions: [
       {
-        label: "今後この通知をしない",
+        label: "今後このメッセージを表示しない",
         textColor: "toast-button-display" + suffix,
         handler: () => {
           dispatch("SET_CONFIRMED_TIP", {
@@ -383,6 +383,10 @@ export const showNotifyAndNotShowAgainButton = (
           });
         },
       },
+      {
+        label: "閉じる",
+        color: "toast-button-display" + suffix,
+      },
     ],
   });
 };