アップデート 0.21.0 (#2296)

* アップデート 0.21.0

* [update snapshots]

* （スナップショットを更新）

* テスト＋ちょっと変更

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

public/howtouse.md

@@ -322,12 +322,12 @@ VOICEVOX では、歌声合成機能がプロトタイプ版として提供さ
 「音域調整」の値と中央のキーの関係はおおよそ以下の通りです。
 
 | 音域調整の値 | 中央のキー |
-| --- | --- |
-| 0 | G4（ソ4） |
-| -7 | C4（ド4） |
-| -12 | G3（ソ3） |
-| -19 | C3（ド3） |
-| -24 | G2（ソ2） |
+| ------------ | ---------- |
+| 0            | G4（ソ4）  |
+| -7           | C4（ド4）  |
+| -12          | G3（ソ3）  |
+| -19          | C3（ド3）  |
+| -24          | G2（ソ2）  |
 
 ### 声量調整
 
@@ -346,7 +346,7 @@ VOICEVOX では、歌声合成機能がプロトタイプ版として提供さ
 
 ### マルチトラック
 
-「設定」→「オプション」→「実験的機能」から「ソング：マルチトラック機能」をONにすることで、複数のトラックを編集・再生できるようになります。
+画面左上のハンバーガーメニュー ☰ をクリックすることでトラック一覧を表示できます。トラック一覧の＋ボタンでトラックを追加することで、複数のトラックを編集・再生できるようになります。
 
 ### ソング機能のよくある質問
 

public/updateInfos.json

@@ -1,4 +1,30 @@
 [
+  {
+    "version": "0.21.0",
+    "descriptions": [
+      "ソング：立ち絵表示の有無を切り替え可能に",
+      "ソング：エディタのデザインを刷新",
+      "ソング：マルチトラックを通常機能に",
+      "ソング：書き出し時の詳細設定機能",
+      "設定ダイアログのデザインを刷新",
+      "開発環境の向上",
+      "バグ修正"
+    ],
+    "contributors": [
+      "gigi434",
+      "Hiroshiba",
+      "honey32",
+      "jdkfx",
+      "MT224244",
+      "naga-na",
+      "romot-co",
+      "sabonerune",
+      "Segu-g",
+      "sevenc-nanashi",
+      "sigprogramming",
+      "takusea"
+    ]
+  },
   {
     "version": "0.20.0",
     "descriptions": [

src/backend/common/ConfigManager.ts

@@ -262,6 +262,11 @@ const migrations: [string, (store: Record<string, unknown>) => unknown][] = [
         "",
       );
 
+      // マルチトラック機能を実験的機能じゃなくす
+      if ("enableMultiTrack" in experimentalSetting) {
+        delete experimentalSetting.enableMultiTrack;
+      }
+
       return config;
     },
   ],

src/components/Dialog/ExportSongAudioDialog/Presentation.vue

@@ -2,15 +2,15 @@
   <QDialog ref="dialogRef" v-model="modelValue">
     <QCard class="q-py-sm q-px-md dialog-card">
       <QCardSection>
-        <div class="text-h5">書き出し</div>
+        <div class="text-h5">音声書き出し</div>
       </QCardSection>
 
       <QSeparator />
 
       <QCardSection>
         <BaseCell
-          title="書き出し対象"
-          description="すべてのトラックをまとめて書き出すか、トラックごとに書き出すか選べます。"
+          title="書き出し方法"
+          description="すべてのトラックをまとめて１つの音声ファイルを書き出すか、トラックごとに音声ファイルを書き出すか選べます。"
         >
           <QBtnToggle
             v-model="exportTarget"
@@ -44,13 +44,13 @@
           </QSelect>
         </BaseCell>
         <BaseCell
-          title="リミッターを適用する"
-          description="ONの場合、0dBを極力超えないように音声を調整します。"
+          title="音量を制限する"
+          description="ONの場合、音量が0dBを極力超えないように音声を調整します。"
         >
           <QToggle v-model="withLimiter" />
         </BaseCell>
         <BaseCell
-          title="適用するトラックのパラメーター"
+          title="適用するトラックパラメーター"
           description="パン、ボリューム、ミュートのうち、どのパラメーターを書き出し時に適用するか選べます。"
         >
           <QOptionGroup
@@ -105,14 +105,14 @@ const emit = defineEmits<{
   exportAudio: [exportTarget: ExportTarget, setting: SongExportSetting];
 }>();
 
-// 書き出し対象選択
+// 書き出し方法選択
 const exportTargets = [
   {
-    label: "すべてのトラック",
+    label: "まとめる（ミックス）",
     value: "master",
   },
   {
-    label: "トラックごと",
+    label: "トラック別",
     value: "stem",
   },
 ];

src/components/Dialog/SettingDialog/SettingDialog.vue

@@ -258,7 +258,7 @@
                 />
 
                 <EditButtonCell
-                  title="書き出しファイル名パターン"
+                  title="トーク：書き出しファイル名パターン"
                   description="書き出す際のファイル名のパターンをカスタマイズできます。"
                   :currentValue="audioFileNamePatternWithExt"
                   @buttonClick="showAudioFilePatternEditDialog = true"
@@ -494,20 +494,10 @@ import {
   EditorFontType,
 } from "@/type/preload";
 import { createLogger } from "@/domain/frontend/log";
+import { useRootMiscSetting } from "@/composables/useRootMiscSetting";
 
 type SamplingRateOption = EngineSettingType["outputSamplingRate"];
 
-// ルート直下にある雑多な設定値を簡単に扱えるようにする
-const useRootMiscSetting = <T extends keyof RootMiscSettingType>(key: T) => {
-  const state = computed(() => store.state[key]);
-  const setter = (value: RootMiscSettingType[T]) => {
-    // Vuexの型処理でUnionが解かれてしまうのを迂回している
-    // FIXME: このワークアラウンドをなくす
-    void store.dispatch("SET_ROOT_MISC_SETTING", { key: key as never, value });
-  };
-  return [state, setter] as const;
-};
-
 const props = defineProps<{
   modelValue: boolean;
 }>();
@@ -583,29 +573,40 @@ const availableThemeNameComputed = computed(() => {
     });
 });
 
-const [editorFont, changeEditorFont] = useRootMiscSetting("editorFont");
+const [editorFont, changeEditorFont] = useRootMiscSetting(store, "editorFont");
 
-const [enableMultiEngine, setEnableMultiEngine] =
-  useRootMiscSetting("enableMultiEngine");
+const [enableMultiEngine, setEnableMultiEngine] = useRootMiscSetting(
+  store,
+  "enableMultiEngine",
+);
 
-const [showTextLineNumber, changeShowTextLineNumber] =
-  useRootMiscSetting("showTextLineNumber");
+const [showTextLineNumber, changeShowTextLineNumber] = useRootMiscSetting(
+  store,
+  "showTextLineNumber",
+);
 
 const [showAddAudioItemButton, changeShowAddAudioItemButton] =
-  useRootMiscSetting("showAddAudioItemButton");
+  useRootMiscSetting(store, "showAddAudioItemButton");
 
-const [enableMemoNotation, changeEnableMemoNotation] =
-  useRootMiscSetting("enableMemoNotation");
+const [enableMemoNotation, changeEnableMemoNotation] = useRootMiscSetting(
+  store,
+  "enableMemoNotation",
+);
 
-const [enableRubyNotation, changeEnableRubyNotation] =
-  useRootMiscSetting("enableRubyNotation");
+const [enableRubyNotation, changeEnableRubyNotation] = useRootMiscSetting(
+  store,
+  "enableRubyNotation",
+);
 
-const [enablePreset, _changeEnablePreset] = useRootMiscSetting("enablePreset");
+const [enablePreset, _changeEnablePreset] = useRootMiscSetting(
+  store,
+  "enablePreset",
+);
 
 const [
   shouldApplyDefaultPresetOnVoiceChanged,
   changeShouldApplyDefaultPresetOnVoiceChanged,
-] = useRootMiscSetting("shouldApplyDefaultPresetOnVoiceChanged");
+] = useRootMiscSetting(store, "shouldApplyDefaultPresetOnVoiceChanged");
 
 const canSetAudioOutputDevice = computed(() => {
   return !!HTMLAudioElement.prototype.setSinkId;
@@ -817,8 +818,10 @@ watchEffect(async () => {
   }
 });
 
-const [splitTextWhenPaste, changeSplitTextWhenPaste] =
-  useRootMiscSetting("splitTextWhenPaste");
+const [splitTextWhenPaste, changeSplitTextWhenPaste] = useRootMiscSetting(
+  store,
+  "splitTextWhenPaste",
+);
 
 const showAudioFilePatternEditDialog = ref(false);
 const showSongTrackAudioFilePatternEditDialog = ref(false);

src/components/Sing/CharacterPortrait.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showSinger" class="character-portrait-wrap">
+  <div v-if="showSingCharacterPortrait" class="character-portrait-wrap">
     <img class="character-portrait" :src="portraitPath" />
   </div>
 </template>
@@ -9,7 +9,9 @@ import { computed } from "vue";
 import { useStore } from "@/store";
 
 const store = useStore();
-const showSinger = computed(() => store.state.showSinger);
+const showSingCharacterPortrait = computed(
+  () => store.state.showSingCharacterPortrait,
+);
 
 const portraitPath = computed(() => {
   const userOrderedCharacterInfos =

src/components/Sing/menuBarData.ts

@@ -1,22 +1,14 @@
 import { computed } from "vue";
 import { useStore } from "@/store";
 import { MenuItemData } from "@/components/Menu/type";
+import { useRootMiscSetting } from "@/composables/useRootMiscSetting";
 
 export const useMenuBarData = () => {
   const store = useStore();
   const uiLocked = computed(() => store.getters.UI_LOCKED);
   const isNotesSelected = computed(
     () => store.getters.SELECTED_NOTE_IDS.size > 0,
   );
-  const showSinger = computed({
-    get: () => store.state.showSinger,
-    set: (showSinger: boolean) => {
-      void store.dispatch("SET_ROOT_MISC_SETTING", {
-        key: "showSinger",
-        value: showSinger,
-      });
-    },
-  });
 
   const importExternalSongProject = async () => {
     if (uiLocked.value) return;
@@ -32,6 +24,7 @@ export const useMenuBarData = () => {
     });
   };
 
+  // 「ファイル」メニュー
   const fileSubMenuData = computed<MenuItemData[]>(() => [
     {
       type: "button",
@@ -52,6 +45,7 @@ export const useMenuBarData = () => {
     },
   ]);
 
+  // 「編集」メニュー
   const editSubMenuData = computed<MenuItemData[]>(() => [
     { type: "separator" },
     {
@@ -116,12 +110,17 @@ export const useMenuBarData = () => {
     },
   ]);
 
+  // 「表示」メニュー
+  const [showSingCharacterPortrait, setShowSingCharacterPortrait] =
+    useRootMiscSetting(store, "showSingCharacterPortrait");
   const viewSubMenuData = computed<MenuItemData[]>(() => [
     {
       type: "button",
-      label: showSinger.value ? "立ち絵を非表示" : "立ち絵を表示",
+      label: showSingCharacterPortrait.value
+        ? "立ち絵を非表示"
+        : "立ち絵を表示",
       onClick: () => {
-        showSinger.value = !showSinger.value;
+        setShowSingCharacterPortrait(!showSingCharacterPortrait.value);
       },
       disableWhenUiLocked: true,
     },

src/components/Talk/menuBarData.ts

@@ -2,6 +2,7 @@ import { computed } from "vue";
 import { MenuItemData } from "@/components/Menu/type";
 
 import { useStore } from "@/store";
+import { useRootMiscSetting } from "@/composables/useRootMiscSetting";
 
 export const useMenuBarData = () => {
   const store = useStore();
@@ -55,7 +56,20 @@ export const useMenuBarData = () => {
   const editSubMenuData = computed<MenuItemData[]>(() => []);
 
   // 「表示」メニュー
-  const viewSubMenuData = computed<MenuItemData[]>(() => []);
+  const [showTextLineNumber, changeShowTextLineNumber] = useRootMiscSetting(
+    store,
+    "showTextLineNumber",
+  );
+  const viewSubMenuData = computed<MenuItemData[]>(() => [
+    {
+      type: "button",
+      label: showTextLineNumber.value ? "行番号を非表示" : "行番号を表示",
+      onClick: () => {
+        changeShowTextLineNumber(!showTextLineNumber.value);
+      },
+      disableWhenUiLocked: true,
+    },
+  ]);
 
   return {
     fileSubMenuData,

src/composables/useRootMiscSetting.ts

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { Store } from "@/store";
+import { RootMiscSettingType } from "@/type/preload";
+
+/** ルート直下にある雑多な設定値を簡単に扱える便利コンポーザブル */
+export const useRootMiscSetting = <T extends keyof RootMiscSettingType>(
+  store: Store,
+  key: T,
+) => {
+  const state = computed(() => store.state[key]);
+  const setter = (value: RootMiscSettingType[T]) => {
+    // Vuexの型処理でUnionが解かれてしまうのを迂回している
+    // FIXME: このワークアラウンドをなくす
+    void store.dispatch("SET_ROOT_MISC_SETTING", {
+      key: key as never,
+      value,
+    });
+  };
+  return [state, setter] as const;
+};

src/store/index.ts

@@ -1,5 +1,9 @@
 import { InjectionKey } from "vue";
-import { createStore, Store, useStore as baseUseStore } from "./vuex";
+import {
+  createStore,
+  Store as BaseStore,
+  useStore as baseUseStore,
+} from "./vuex";
 
 import {
   AllActions,
@@ -42,9 +46,8 @@ import {
   isProduction,
 } from "@/type/preload";
 
-export const storeKey: InjectionKey<
-  Store<State, AllGetters, AllActions, AllMutations>
-> = Symbol();
+export type Store = BaseStore<State, AllGetters, AllActions, AllMutations>;
+export const storeKey: InjectionKey<Store> = Symbol();
 
 export const indexStoreState: IndexStoreState = {
   defaultStyleIds: [],
@@ -412,11 +415,6 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
   strict: !isProduction,
 });
 
-export const useStore = (): Store<
-  State,
-  AllGetters,
-  AllActions,
-  AllMutations
-> => {
+export const useStore = (): Store => {
   return baseUseStore(storeKey);
 };