アップデート 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);
 };