diff --git a/src/backend/electron/engineAndVvppController.ts b/src/backend/electron/engineAndVvppController.ts
index 04a10dae9c..0155cb403d 100644
--- a/src/backend/electron/engineAndVvppController.ts
+++ b/src/backend/electron/engineAndVvppController.ts
@@ -9,7 +9,6 @@ import { getEngineProcessManager } from "./manager/engineProcessManager";
 import { getRuntimeInfoManager } from "./manager/RuntimeInfoManager";
 import { getVvppManager } from "./manager/vvppManager";
 import { getWindowManager } from "./manager/windowManager";
-import { ProgressCallback } from "./type";
 import {
   EngineId,
   EngineInfo,
@@ -23,6 +22,7 @@ import {
 } from "@/domain/defaultEngine/latetDefaultEngine";
 import { loadEnvEngineInfos } from "@/domain/defaultEngine/envEngineInfo";
 import { UnreachableError } from "@/type/utility";
+import { ProgressCallback } from "@/helpers/progressHelper";
 import { createLogger } from "@/helpers/log";
 
 const log = createLogger("EngineAndVvppController");
diff --git a/src/backend/electron/fileHelper.ts b/src/backend/electron/fileHelper.ts
index 062389c845..1fdba47b77 100644
--- a/src/backend/electron/fileHelper.ts
+++ b/src/backend/electron/fileHelper.ts
@@ -1,5 +1,4 @@
 import fs from "fs";
-import { moveFileSync } from "move-file";
 import { uuid4 } from "@/helpers/random";
 import { createLogger } from "@/helpers/log";
 
@@ -14,15 +13,13 @@ export function writeFileSafely(
   data: string | NodeJS.ArrayBufferView,
 ) {
   const tmpPath = `${path}-${uuid4()}.tmp`;
-  fs.writeFileSync(tmpPath, data, { flag: "wx" });
 
   try {
-    moveFileSync(tmpPath, path, {
-      overwrite: true,
-    });
+    fs.writeFileSync(tmpPath, data, { flag: "wx" });
+    fs.renameSync(tmpPath, path);
   } catch (error) {
     if (fs.existsSync(tmpPath)) {
-      fs.promises.unlink(tmpPath).catch((reason) => {
+      void fs.promises.unlink(tmpPath).catch((reason) => {
         log.warn("Failed to remove %s\n  %o", tmpPath, reason);
       });
     }
diff --git a/src/backend/electron/manager/vvppManager.ts b/src/backend/electron/manager/vvppManager.ts
index be61cf1b3f..0f8d3fa008 100644
--- a/src/backend/electron/manager/vvppManager.ts
+++ b/src/backend/electron/manager/vvppManager.ts
@@ -1,32 +1,22 @@
-import fs from "fs";
-import path from "path";
-import { spawn } from "child_process";
+import fs from "node:fs";
+import path from "node:path";
 import { moveFile } from "move-file";
 import { app, dialog } from "electron";
-import MultiStream from "multistream";
-import { glob } from "glob";
 import AsyncLock from "async-lock";
-import { ProgressCallback } from "../type";
 import {
   EngineId,
   EngineInfo,
-  minimumEngineManifestSchema,
   MinimumEngineManifestType,
 } from "@/type/preload";
 import { errorToMessage } from "@/helpers/errorHelper";
+import { extractVvpp } from "@/backend/electron/vvppFile";
+import { ProgressCallback } from "@/helpers/progressHelper";
 import { createLogger } from "@/helpers/log";
 
 const log = createLogger("VvppManager");
 
 const isNotWin = process.platform !== "win32";
 
-// https://www.garykessler.net/library/file_sigs.html#:~:text=7-zip%20compressed%20file
-const SEVEN_ZIP_MAGIC_NUMBER = Buffer.from([
-  0x37, 0x7a, 0xbc, 0xaf, 0x27, 0x1c,
-]);
-
-const ZIP_MAGIC_NUMBER = Buffer.from([0x50, 0x4b, 0x03, 0x04]);
-
 export const isVvppFile = (filePath: string) => {
   return (
     path.extname(filePath) === ".vvpp" || path.extname(filePath) === ".vvppp"
@@ -35,136 +25,6 @@ export const isVvppFile = (filePath: string) => {
 
 const lockKey = "lock-key-for-vvpp-manager";
 
-/** VVPPファイルが分割されている場合、それらのファイルを取得する */
-async function getArchiveFileParts(
-  vvppLikeFilePath: string,
-): Promise<string[]> {
-  let archiveFileParts: string[];
-  // 名前.数値.vvpppの場合は分割されているとみなして連結する
-  if (vvppLikeFilePath.match(/\.[0-9]+\.vvppp$/)) {
-    log.info("vvpp is split, finding other parts...");
-    const vvpppPathGlob = vvppLikeFilePath
-      .replace(/\.[0-9]+\.vvppp$/, ".*.vvppp")
-      .replace(/\\/g, "/"); // node-globはバックスラッシュを使えないので、スラッシュに置換する
-    const filePaths: string[] = [];
-    for (const p of await glob(vvpppPathGlob)) {
-      if (!p.match(/\.[0-9]+\.vvppp$/)) {
-        continue;
-      }
-      log.info(`found ${p}`);
-      filePaths.push(p);
-    }
-    filePaths.sort((a, b) => {
-      const aMatch = a.match(/\.([0-9]+)\.vvppp$/);
-      const bMatch = b.match(/\.([0-9]+)\.vvppp$/);
-      if (aMatch == null || bMatch == null) {
-        throw new Error(`match is null: a=${a}, b=${b}`);
-      }
-      return parseInt(aMatch[1]) - parseInt(bMatch[1]);
-    });
-    archiveFileParts = filePaths;
-  } else {
-    log.info("Not a split file");
-    archiveFileParts = [vvppLikeFilePath];
-  }
-  return archiveFileParts;
-}
-
-/** 分割されているVVPPファイルを連結して返す */
-async function concatenateVvppFiles(
-  format: "zip" | "7z",
-  archiveFileParts: string[],
-) {
-  // -siオプションでの7z解凍はサポートされていないため、
-  // ファイルを連結した一次ファイルを作成し、それを7zで解凍する。
-  log.info(`Concatenating ${archiveFileParts.length} files...`);
-  const tmpConcatenatedFile = path.join(
-    app.getPath("temp"),
-    `vvpp-${new Date().getTime()}.${format}`,
-  );
-  log.info("Temporary file:", tmpConcatenatedFile);
-  await new Promise<void>((resolve, reject) => {
-    if (!tmpConcatenatedFile) throw new Error("tmpFile is undefined");
-    const inputStreams = archiveFileParts.map((f) => fs.createReadStream(f));
-    const outputStream = fs.createWriteStream(tmpConcatenatedFile);
-    new MultiStream(inputStreams)
-      .pipe(outputStream)
-      .on("close", () => {
-        outputStream.close();
-        resolve();
-      })
-      .on("error", reject);
-  });
-  log.info("Concatenated");
-  return tmpConcatenatedFile;
-}
-
-/** 7zでファイルを解凍する */
-async function unarchive(
-  payload: {
-    archiveFile: string;
-    outputDir: string;
-    format: "zip" | "7z";
-  },
-  callbacks?: { onProgress?: ProgressCallback },
-) {
-  const { archiveFile, outputDir, format } = payload;
-
-  const args = [
-    "x",
-    "-o" + outputDir,
-    archiveFile,
-    "-t" + format,
-    "-bsp1", // 進捗出力
-  ];
-
-  let sevenZipPath = import.meta.env.VITE_7Z_BIN_NAME;
-  if (!sevenZipPath) {
-    throw new Error("7z path is not defined");
-  }
-  if (import.meta.env.PROD) {
-    sevenZipPath = path.join(path.dirname(app.getPath("exe")), sevenZipPath);
-  }
-  log.info("Spawning 7z:", sevenZipPath, args.join(" "));
-  await new Promise<void>((resolve, reject) => {
-    const child = spawn(sevenZipPath, args, {
-      stdio: ["pipe", "pipe", "pipe"],
-    });
-
-    child.stdout?.on("data", (data: Buffer) => {
-      const output = data.toString("utf-8");
-      log.info(`7z STDOUT: ${output}`);
-
-      // 進捗を取得
-      // NOTE: ` 75% 106 - pyopenjtalk\open_jtalk_dic_utf_8-1.11\sys.dic` のような出力が来る
-      // TODO: 出力が変わるかもしれないのでテストが必要
-      const progressMatch = output.match(
-        / *(?<percent>\d+)% ?(?<fileCount>\d+)? ?(?<file>.*)/,
-      );
-      if (progressMatch?.groups?.percent) {
-        callbacks?.onProgress?.({
-          progress: parseInt(progressMatch.groups.percent),
-        });
-      }
-    });
-
-    child.stderr?.on("data", (data: Buffer) => {
-      log.error(`7z STDERR: ${data.toString("utf-8")}`);
-    });
-
-    child.on("exit", (code) => {
-      if (code === 0) {
-        callbacks?.onProgress?.({ progress: 100 });
-        resolve();
-      } else {
-        reject(new Error(`7z exited with code ${code}`));
-      }
-    });
-    // FIXME: rejectが2回呼ばれることがある
-    child.on("error", reject);
-  });
-}
-
 // # 軽い概要
 //
 // フォルダ名："エンジン名+UUID"
@@ -240,67 +100,6 @@ export class VvppManager {
     return true;
   }
 
-  private async extractVvpp(
-    vvppLikeFilePath: string,
-    callbacks?: { onProgress?: ProgressCallback },
-  ): Promise<{ outputDir: string; manifest: MinimumEngineManifestType }> {
-    callbacks?.onProgress?.({ progress: 0 });
-
-    const nonce = new Date().getTime().toString();
-    const outputDir = path.join(this.vvppEngineDir, ".tmp", nonce);
-
-    const archiveFileParts = await getArchiveFileParts(vvppLikeFilePath);
-
-    const format = await this.detectFileFormat(archiveFileParts[0]);
-    if (!format) {
-      throw new Error(`Unknown file format: ${archiveFileParts[0]}`);
-    }
-    log.info("Format:", format);
-    log.info("Extracting vvpp to", outputDir);
-    try {
-      let tmpConcatenatedFile: string | undefined;
-      let archiveFile: string;
-      try {
-        if (archiveFileParts.length > 1) {
-          tmpConcatenatedFile = await concatenateVvppFiles(
-            format,
-            archiveFileParts,
-          );
-          archiveFile = tmpConcatenatedFile;
-        } else {
-          archiveFile = archiveFileParts[0];
-          log.info("Single file, not concatenating");
-        }
-
-        await unarchive({ archiveFile, outputDir, format }, callbacks);
-      } finally {
-        if (tmpConcatenatedFile) {
-          log.info("Removing temporary file", tmpConcatenatedFile);
-          await fs.promises.rm(tmpConcatenatedFile);
-        }
-      }
-      const manifest: MinimumEngineManifestType =
-        minimumEngineManifestSchema.parse(
-          JSON.parse(
-            await fs.promises.readFile(
-              path.join(outputDir, "engine_manifest.json"),
-              "utf-8",
-            ),
-          ),
-        );
-      return {
-        outputDir,
-        manifest,
-      };
-    } catch (e) {
-      if (fs.existsSync(outputDir)) {
-        log.info("Failed to extract vvpp, removing", outputDir);
-        await fs.promises.rm(outputDir, { recursive: true });
-      }
-      throw e;
-    }
-  }
-
   /**
    * 追加
    */
@@ -314,7 +113,14 @@ export class VvppManager {
     vvppPath: string,
     callbacks?: { onProgress?: ProgressCallback },
   ) {
-    const { outputDir, manifest } = await this.extractVvpp(vvppPath, callbacks);
+    const { outputDir, manifest } = await extractVvpp(
+      {
+        vvppLikeFilePath: vvppPath,
+        vvppEngineDir: this.vvppEngineDir,
+        tmpDir: app.getPath("temp"),
+      },
+      callbacks,
+    );
 
     const dirName = this.toValidDirName(manifest);
     const engineDirectory = path.join(this.vvppEngineDir, dirName);
@@ -408,23 +214,6 @@ export class VvppManager {
       this.willReplaceEngineDirs.length > 0 || this.willDeleteEngineIds.size > 0
     );
   }
-
-  private async detectFileFormat(
-    filePath: string,
-  ): Promise<"zip" | "7z" | undefined> {
-    const file = await fs.promises.open(filePath, "r");
-
-    const buffer = Buffer.alloc(8);
-    await file.read(buffer, 0, 8, 0);
-    await file.close();
-
-    if (buffer.compare(SEVEN_ZIP_MAGIC_NUMBER, 0, 6, 0, 6) === 0) {
-      return "7z";
-    } else if (buffer.compare(ZIP_MAGIC_NUMBER, 0, 4, 0, 4) === 0) {
-      return "zip";
-    }
-    return undefined;
-  }
 }
 
 export default VvppManager;
diff --git a/src/backend/electron/vvppFile.ts b/src/backend/electron/vvppFile.ts
new file mode 100644
index 0000000000..94a1898488
--- /dev/null
+++ b/src/backend/electron/vvppFile.ts
@@ -0,0 +1,237 @@
+/**
+ * VVPPファイルを扱うモジュール。
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import MultiStream from "multistream";
+import { glob } from "glob";
+import { app } from "electron";
+import {
+  minimumEngineManifestSchema,
+  MinimumEngineManifestType,
+} from "@/type/preload";
+import { ProgressCallback } from "@/helpers/progressHelper";
+import { createLogger } from "@/helpers/log";
+
+const log = createLogger("vvppFile");
+
+/** VVPPファイルが分割されている場合、それらのファイルを取得する */
+async function getArchiveFileParts(
+  vvppLikeFilePath: string,
+): Promise<string[]> {
+  let archiveFileParts: string[];
+  // 名前.数値.vvpppの場合は分割されているとみなして連結する
+  if (vvppLikeFilePath.match(/\.[0-9]+\.vvppp$/)) {
+    log.info("vvpp is split, finding other parts...");
+    const vvpppPathGlob = vvppLikeFilePath
+      .replace(/\.[0-9]+\.vvppp$/, ".*.vvppp")
+      .replace(/\\/g, "/"); // node-globはバックスラッシュを使えないので、スラッシュに置換する
+    const filePaths: string[] = [];
+    for (const p of await glob(vvpppPathGlob)) {
+      if (!p.match(/\.[0-9]+\.vvppp$/)) {
+        continue;
+      }
+      log.info(`found ${p}`);
+      filePaths.push(p);
+    }
+    filePaths.sort((a, b) => {
+      const aMatch = a.match(/\.([0-9]+)\.vvppp$/);
+      const bMatch = b.match(/\.([0-9]+)\.vvppp$/);
+      if (aMatch == null || bMatch == null) {
+        throw new Error(`match is null: a=${a}, b=${b}`);
+      }
+      return parseInt(aMatch[1]) - parseInt(bMatch[1]);
+    });
+    archiveFileParts = filePaths;
+  } else {
+    log.info("Not a split file");
+    archiveFileParts = [vvppLikeFilePath];
+  }
+  return archiveFileParts;
+}
+
+/** 分割されているVVPPファイルを連結して返す */
+async function concatenateVvppFiles(
+  archiveFileParts: string[],
+  outputFilePath: string,
+) {
+  log.info(`Concatenating ${archiveFileParts.length} files...`);
+
+  await new Promise<void>((resolve, reject) => {
+    const inputStreams = archiveFileParts.map((f) => fs.createReadStream(f));
+    const outputStream = fs.createWriteStream(outputFilePath);
+    new MultiStream(inputStreams)
+      .pipe(outputStream)
+      .on("close", () => {
+        outputStream.close();
+        resolve();
+      })
+      .on("error", reject);
+  });
+  log.info("Concatenated");
+}
+
+/** 7zでファイルを解凍する */
+async function unarchive(
+  payload: {
+    archiveFile: string;
+    outputDir: string;
+    format: "zip" | "7z";
+  },
+  callbacks?: { onProgress?: ProgressCallback },
+) {
+  const { archiveFile, outputDir, format } = payload;
+
+  const args = [
+    "x",
+    "-o" + outputDir,
+    archiveFile,
+    "-t" + format,
+    "-bsp1", // 進捗出力
+  ];
+
+  const sevenZipPath = getSevenZipPath();
+  log.info("Spawning 7z:", sevenZipPath, args.join(" "));
+  await new Promise<void>((resolve, reject) => {
+    const child = spawn(sevenZipPath, args, {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    child.stdout?.on("data", (data: Buffer) => {
+      const output = data.toString("utf-8");
+      log.info(`7z STDOUT: ${output}`);
+
+      // 進捗を取得
+      // NOTE: ` 75% 106 - pyopenjtalk\open_jtalk_dic_utf_8-1.11\sys.dic` のような出力が来る
+      // TODO: 出力が変わるかもしれないのでテストが必要
+      const progressMatch = output.match(
+        / *(?<percent>\d+)% ?(?<fileCount>\d+)? ?(?<file>.*)/,
+      );
+      if (progressMatch?.groups?.percent) {
+        callbacks?.onProgress?.({
+          progress: parseInt(progressMatch.groups.percent),
+        });
+      }
+    });
+
+    child.stderr?.on("data", (data: Buffer) => {
+      log.error(`7z STDERR: ${data.toString("utf-8")}`);
+    });
+
+    child.on("exit", (code) => {
+      if (code === 0) {
+        callbacks?.onProgress?.({ progress: 100 });
+        resolve();
+      } else {
+        reject(new Error(`7z exited with code ${code}`));
+      }
+    });
+    // FIXME: rejectが2回呼ばれることがある
+    child.on("error", reject);
+  });
+
+  function getSevenZipPath() {
+    let sevenZipPath = import.meta.env.VITE_7Z_BIN_NAME;
+    if (!sevenZipPath) {
+      throw new Error("7z path is not defined");
+    }
+    if (import.meta.env.PROD) {
+      sevenZipPath = path.join(path.dirname(app.getPath("exe")), sevenZipPath);
+    }
+    return sevenZipPath;
+  }
+}
+
+export async function extractVvpp(
+  payload: { vvppLikeFilePath: string; vvppEngineDir: string; tmpDir: string },
+  callbacks?: { onProgress?: ProgressCallback },
+): Promise<{ outputDir: string; manifest: MinimumEngineManifestType }> {
+  const { vvppLikeFilePath, vvppEngineDir, tmpDir } = payload;
+  callbacks?.onProgress?.({ progress: 0 });
+
+  const nonce = new Date().getTime().toString();
+  const outputDir = path.join(vvppEngineDir, ".tmp", nonce);
+
+  const archiveFileParts = await getArchiveFileParts(vvppLikeFilePath);
+
+  const format = await detectFileFormat(archiveFileParts[0]);
+  if (!format) {
+    throw new Error(`Unknown file format: ${archiveFileParts[0]}`);
+  }
+  log.info("Format:", format);
+  log.info("Extracting vvpp to", outputDir);
+  try {
+    let tmpConcatenatedFile: string | undefined;
+    let archiveFile: string;
+    try {
+      if (archiveFileParts.length > 1) {
+        // -siオプションでの7z解凍はサポートされていないため、
+        // ファイルを連結した一次ファイルを作成し、それを7zで解凍する。
+        tmpConcatenatedFile = createTmpConcatenatedFilePath();
+        log.info("Temporary file:", tmpConcatenatedFile);
+
+        await concatenateVvppFiles(archiveFileParts, tmpConcatenatedFile);
+        archiveFile = tmpConcatenatedFile;
+      } else {
+        archiveFile = archiveFileParts[0];
+        log.info("Single file, not concatenating");
+      }
+
+      await unarchive({ archiveFile, outputDir, format }, callbacks);
+    } finally {
+      if (tmpConcatenatedFile) {
+        log.info("Removing temporary file", tmpConcatenatedFile);
+        await fs.promises.rm(tmpConcatenatedFile);
+      }
+    }
+    const manifest: MinimumEngineManifestType =
+      minimumEngineManifestSchema.parse(
+        JSON.parse(
+          await fs.promises.readFile(
+            path.join(outputDir, "engine_manifest.json"),
+            "utf-8",
+          ),
+        ),
+      );
+    return {
+      outputDir,
+      manifest,
+    };
+  } catch (e) {
+    if (fs.existsSync(outputDir)) {
+      log.info("Failed to extract vvpp, removing", outputDir);
+      await fs.promises.rm(outputDir, { recursive: true });
+    }
+    throw e;
+  }
+
+  function createTmpConcatenatedFilePath(): string {
+    return path.join(tmpDir, `vvpp-${new Date().getTime()}.${format}`);
+  }
+}
+
+async function detectFileFormat(
+  filePath: string,
+): Promise<"zip" | "7z" | undefined> {
+  const file = await fs.promises.open(filePath, "r");
+
+  const buffer = Buffer.alloc(8);
+  await file.read(buffer, 0, 8, 0);
+  await file.close();
+
+  // https://www.garykessler.net/library/file_sigs.html#:~:text=7-zip%20compressed%20file
+  const SEVEN_ZIP_MAGIC_NUMBER = Buffer.from([
+    0x37, 0x7a, 0xbc, 0xaf, 0x27, 0x1c,
+  ]);
+
+  const ZIP_MAGIC_NUMBER = Buffer.from([0x50, 0x4b, 0x03, 0x04]);
+
+  if (buffer.compare(SEVEN_ZIP_MAGIC_NUMBER, 0, 6, 0, 6) === 0) {
+    return "7z";
+  } else if (buffer.compare(ZIP_MAGIC_NUMBER, 0, 4, 0, 4) === 0) {
+    return "zip";
+  }
+  return undefined;
+}
diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index 7b916a9bdc..9cefe07a89 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -163,10 +163,7 @@
 <script setup lang="ts">
 import { inject, ref } from "vue";
 import { QInput } from "quasar";
-import {
-  DictionaryManageDialogContext,
-  dictionaryManageDialogContextKey,
-} from "./DictionaryManageDialog.vue";
+import { dictionaryManageDialogContextKey } from "./DictionaryManageDialog.vue";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
@@ -175,9 +172,7 @@ import type { FetchAudioResult } from "@/store/type";
 
 const store = useStore();
 
-const context = inject<DictionaryManageDialogContext>(
-  dictionaryManageDialogContextKey,
-);
+const context = inject(dictionaryManageDialogContextKey);
 if (context == undefined)
   throw new Error(`dictionaryManageDialogContext == undefined`);
 const {
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 8c3c764737..e10955dfae 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -124,11 +124,9 @@
 </template>
 
 <script lang="ts">
-import { Ref, ComputedRef } from "vue";
+import { Ref, ComputedRef, type InjectionKey } from "vue";
 
-export const dictionaryManageDialogContextKey = "dictionaryManageDialogContext";
-
-export interface DictionaryManageDialogContext {
+export const dictionaryManageDialogContextKey: InjectionKey<{
   wordEditing: Ref<boolean>;
   surfaceInput: Ref<QInput | undefined>;
   selectedId: Ref<string>;
@@ -153,7 +151,7 @@ export interface DictionaryManageDialogContext {
   toInitialState: () => void;
   toWordEditingState: () => void;
   cancel: () => void;
-}
+}> = Symbol("dictionaryManageDialogContextKey");
 </script>
 
 <script setup lang="ts">
@@ -426,7 +424,7 @@ const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
 
-provide<DictionaryManageDialogContext>(dictionaryManageDialogContextKey, {
+provide(dictionaryManageDialogContextKey, {
   wordEditing,
   surfaceInput,
   selectedId,
diff --git a/src/components/Dialog/SettingDialog/SettingDialog.vue b/src/components/Dialog/SettingDialog/SettingDialog.vue
index de29dc7465..004be181eb 100644
--- a/src/components/Dialog/SettingDialog/SettingDialog.vue
+++ b/src/components/Dialog/SettingDialog/SettingDialog.vue
@@ -444,6 +444,15 @@
                     )
                   "
                 />
+                <ToggleCell
+                  v-if="!isProduction"
+                  title="[開発時のみ機能] ソング：パラメーターパネルの表示"
+                  description="ONの場合、ソングエディタでパラメーターパネルが表示されます。"
+                  :modelValue="experimentalSetting.showParameterPanel"
+                  @update:modelValue="
+                    changeExperimentalSetting('showParameterPanel', $event)
+                  "
+                />
               </div>
               <div class="setting-card">
                 <h5 class="headline">データ収集</h5>
diff --git a/src/components/Sing/CharacterPortrait.vue b/src/components/Sing/CharacterPortrait.vue
index 9456d1f539..3c240cf7a2 100644
--- a/src/components/Sing/CharacterPortrait.vue
+++ b/src/components/Sing/CharacterPortrait.vue
@@ -1,6 +1,8 @@
 <template>
-  <div v-if="showSingCharacterPortrait" class="character-portrait-wrap">
-    <img class="character-portrait" :src="portraitPath" />
+  <div v-if="showSingCharacterPortrait" class="clipping-container">
+    <div class="character-portrait-wrap">
+      <img class="character-portrait" :src="portraitPath" />
+    </div>
   </div>
 </template>
 
@@ -36,46 +38,32 @@ const portraitPath = computed(() => {
 @use "@/styles/colors" as colors;
 
 // 表示変数
-$header-margin: vars.$toolbar-height + vars.$menubar-height + 30px; // 30pxはルーラーの高さ
-$right-margin: 24px;
-$portrait-max-width: 40vw;
-$portrait-max-height: 60vh;
 $portrait-min-height: 500px;
 
+// 画像がはみ出ないようにクリップする
+.clipping-container {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  pointer-events: none;
+}
+
 // 画面右下に固定表示
-// 幅固定、高さ可変、画像のアスペクト比を保持、wrapのwidthに合わせてheightを調整
-// bottom位置はスクロールバーの上に表示
+// 幅固定、高さ可変、画像のアスペクト比を保持、heightを調整
 .character-portrait-wrap {
-  opacity: 0.55;
-  overflow: visible;
-  contain: layout;
-  pointer-events: none;
-  position: fixed;
-  display: grid;
-  place-items: end;
-  bottom: 0;
-  right: $right-margin;
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  overflow: hidden;
 }
 
+// 通常は下部基準だが、親要素が最小高さより小さい場合は上部基準とし頭を残して足から隠れさせる
 .character-portrait {
-  width: auto;
-  height: $portrait-max-height;
-  min-height: $portrait-min-height;
-  max-width: $portrait-max-width;
-  overflow: visible;
+  display: block;
+  margin-top: auto;
+  min-height: max(75%, $portrait-min-height);
+  opacity: 0.55;
   backface-visibility: hidden;
-  object-fit: cover;
-  object-position: top center;
-}
-
-// ポートレートサイズが画面サイズを超えた場合、ヘッダーを考慮してポートレートを上部基準で表示させる
-// ヘッダー高さ120px+ポートレート高さ500pxだとする
-@media (max-height: #{calc(#{$portrait-min-height} + #{$header-margin})}) {
-  .character-portrait-wrap {
-    top: $header-margin; // ヘッダーの高さより下に位置させる
-    bottom: auto;
-    height: calc(100vh - #{$header-margin});
-    place-items: start end;
-  }
+  object-fit: contain;
 }
 </style>
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 89c30447a7..ca72246881 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -1,179 +1,237 @@
 <template>
-  <div class="score-sequencer">
-    <!-- 左上の角 -->
-    <div class="sequencer-corner"></div>
-    <!-- ルーラー -->
-    <SequencerRuler class="sequencer-ruler" :offset="scrollX" :numMeasures />
-    <!-- 鍵盤 -->
-    <SequencerKeys
-      class="sequencer-keys"
-      :offset="scrollY"
-      :blackKeyWidth="28"
-    />
-    <!-- シーケンサ -->
-    <div
-      ref="sequencerBody"
-      class="sequencer-body"
-      :class="{
-        'edit-note': editTarget === 'NOTE',
-        'edit-pitch': editTarget === 'PITCH',
-        previewing: nowPreviewing,
-        [cursorClass]: true,
-      }"
-      aria-label="シーケンサ"
-      @mousedown="onMouseDown"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-      @dblclick.stop="onDoubleClick"
-      @wheel="onWheel"
-      @scroll="onScroll"
-      @contextmenu.prevent
-    >
-      <!-- グリッド -->
-      <SequencerGrid />
-      <div
-        v-if="editTarget === 'NOTE' && showGuideLine"
-        class="sequencer-guideline"
-        :style="{
-          height: `${gridHeight}px`,
-          transform: `translateX(${guideLineX}px)`,
-        }"
-      ></div>
-      <!-- キャラクター全身 -->
-      <CharacterPortrait />
-      <!-- undefinedだと警告が出るのでnullを渡す -->
-      <!-- TODO: ちゃんとしたトラックIDを渡す -->
-      <SequencerShadowNote
-        v-for="note in notesInOtherTracks"
-        :key="note.id"
-        :note
-      />
-      <SequencerNote
-        v-for="note in editTarget === 'NOTE'
-          ? notesInSelectedTrackWithPreview
-          : notesInSelectedTrack"
-        :key="note.id"
-        class="sequencer-note"
-        :note
-        :isSelected="selectedNoteIds.has(note.id)"
-        :isPreview="previewNoteIds.has(note.id)"
-        :isOverlapping="overlappingNoteIdsInSelectedTrack.has(note.id)"
-        :previewLyric="previewLyrics.get(note.id) || null"
-        :nowPreviewing
-        :previewMode
-        :cursorClass
-        @barMousedown="onNoteBarMouseDown($event, note)"
-        @barDoubleClick="onNoteBarDoubleClick($event, note)"
-        @leftEdgeMousedown="onNoteLeftEdgeMouseDown($event, note)"
-        @rightEdgeMousedown="onNoteRightEdgeMouseDown($event, note)"
-      />
-      <SequencerLyricInput
-        v-if="editingLyricNote != undefined"
-        :editingLyricNote
-        @lyricInput="onLyricInput"
-        @lyricConfirmed="onLyricConfirmed"
-      />
-    </div>
-    <SequencerPitch
-      v-if="editTarget === 'PITCH'"
-      class="sequencer-pitch"
-      :style="{
-        marginRight: `${scrollBarWidth}px`,
-        marginBottom: `${scrollBarWidth}px`,
-      }"
-      :offsetX="scrollX"
-      :offsetY="scrollY"
-      :previewPitchEdit
-    />
-    <div
-      class="sequencer-overlay"
-      :style="{
-        marginRight: `${scrollBarWidth}px`,
-        marginBottom: `${scrollBarWidth}px`,
-      }"
-    >
-      <div
-        ref="rectSelectHitbox"
-        class="rect-select-preview"
-        :style="{
-          display: isRectSelecting ? 'block' : 'none',
-          left: `${Math.min(rectSelectStartX, cursorX)}px`,
-          top: `${Math.min(rectSelectStartY, cursorY)}px`,
-          width: `${Math.abs(cursorX - rectSelectStartX)}px`,
-          height: `${Math.abs(cursorY - rectSelectStartY)}px`,
-        }"
-      ></div>
-      <SequencerPhraseIndicator
-        v-for="phraseInfo in phraseInfosInOtherTracks"
-        :key="phraseInfo.key"
-        :phraseKey="phraseInfo.key"
-        :isInSelectedTrack="false"
-        class="sequencer-phrase-indicator"
-        :style="{
-          width: `${phraseInfo.width}px`,
-          transform: `translateX(${phraseInfo.x - scrollX}px)`,
-        }"
-      />
-      <SequencerPhraseIndicator
-        v-for="phraseInfo in phraseInfosInSelectedTrack"
-        :key="phraseInfo.key"
-        :phraseKey="phraseInfo.key"
-        isInSelectedTrack
-        class="sequencer-phrase-indicator"
-        :style="{
-          width: `${phraseInfo.width}px`,
-          transform: `translateX(${phraseInfo.x - scrollX}px)`,
-        }"
-      />
-      <div
-        class="sequencer-playhead"
-        data-testid="sequencer-playhead"
-        :style="{
-          transform: `translateX(${playheadX - scrollX}px)`,
-        }"
-      ></div>
-    </div>
-    <QSlider
-      :modelValue="zoomX"
-      :min="ZOOM_X_MIN"
-      :max="ZOOM_X_MAX"
-      :step="ZOOM_X_STEP"
-      class="zoom-x-slider"
-      trackSize="2px"
-      @update:modelValue="setZoomX"
-    />
-    <QSlider
-      :modelValue="zoomY"
-      :min="ZOOM_Y_MIN"
-      :max="ZOOM_Y_MAX"
-      :step="ZOOM_Y_STEP"
-      vertical
-      reverse
-      class="zoom-y-slider"
-      trackSize="2px"
-      @update:modelValue="setZoomY"
-    />
-    <ContextMenu ref="contextMenu" :menudata="contextMenuData" />
-    <SequencerToolPalette
-      :editTarget
-      :sequencerNoteTool
-      :sequencerPitchTool
-      @update:sequencerNoteTool="
-        (value) =>
-          store.dispatch('SET_SEQUENCER_NOTE_TOOL', {
-            sequencerNoteTool: value,
-          })
-      "
-      @update:sequencerPitchTool="
-        (value) =>
-          store.dispatch('SET_SEQUENCER_PITCH_TOOL', {
-            sequencerPitchTool: value,
-          })
-      "
-    />
-  </div>
+  <QSplitter
+    :modelValue="isParameterPanelOpen ? parameterPanelHeight : 0"
+    reverse
+    unit="px"
+    horizontal
+    :disable="!isParameterPanelOpen"
+    :separatorStyle="{
+      display: isParameterPanelOpen ? 'block' : 'none',
+      // NOTE: 当たり判定を小さくする
+      overflow: 'hidden',
+      height: '4px',
+    }"
+    @update:modelValue="setParameterPanelHeight"
+  >
+    <template #before>
+      <div class="score-sequencer full-height">
+        <!-- 左上の角 -->
+        <div class="sequencer-corner"></div>
+        <!-- ルーラー -->
+        <SequencerRuler
+          class="sequencer-ruler"
+          :offset="scrollX"
+          :numMeasures
+        />
+        <!-- 鍵盤 -->
+        <SequencerKeys
+          class="sequencer-keys"
+          :offset="scrollY"
+          :blackKeyWidth="28"
+        />
+        <!-- グリッド -->
+        <SequencerGrid
+          class="sequencer-grid"
+          :offsetX="scrollX"
+          :offsetY="scrollY"
+          :style="{
+            marginRight: `${scrollBarWidth}px`,
+            marginBottom: `${scrollBarWidth}px`,
+          }"
+        />
+        <!-- キャラクター全身 -->
+        <CharacterPortrait
+          class="sequencer-character-portrait"
+          :style="{
+            marginRight: `${scrollBarWidth}px`,
+            marginBottom: `${scrollBarWidth}px`,
+          }"
+        />
+        <!-- ノート入力のための補助線 -->
+        <div
+          v-if="editTarget === 'NOTE' && showGuideLine"
+          class="sequencer-guideline-container"
+          :style="{
+            marginRight: `${scrollBarWidth}px`,
+            marginBottom: `${scrollBarWidth}px`,
+          }"
+        >
+          <div
+            class="sequencer-guideline"
+            :style="{
+              transform: `translateX(${guideLineX - scrollX}px)`,
+            }"
+          ></div>
+        </div>
+        <!-- シーケンサ -->
+        <div
+          ref="sequencerBody"
+          class="sequencer-body"
+          :class="{
+            'edit-note': editTarget === 'NOTE',
+            'edit-pitch': editTarget === 'PITCH',
+            previewing: nowPreviewing,
+            [cursorClass]: true,
+          }"
+          aria-label="シーケンサ"
+          @mousedown="onMouseDown"
+          @mouseenter="onMouseEnter"
+          @mouseleave="onMouseLeave"
+          @dblclick.stop="onDoubleClick"
+          @wheel="onWheel"
+          @scroll="onScroll"
+          @contextmenu.prevent
+        >
+          <!-- 実際のグリッド全体と同じ大きさを持つ要素 -->
+          <SequencerGridSpacer />
+          <!-- undefinedだと警告が出るのでnullを渡す -->
+          <!-- TODO: ちゃんとしたトラックIDを渡す -->
+          <SequencerShadowNote
+            v-for="note in notesInOtherTracks"
+            :key="note.id"
+            :note
+          />
+          <SequencerNote
+            v-for="note in editTarget === 'NOTE'
+              ? notesInSelectedTrackWithPreview
+              : notesInSelectedTrack"
+            :key="note.id"
+            class="sequencer-note"
+            :note
+            :isSelected="selectedNoteIds.has(note.id)"
+            :isPreview="previewNoteIds.has(note.id)"
+            :isOverlapping="overlappingNoteIdsInSelectedTrack.has(note.id)"
+            :previewLyric="previewLyrics.get(note.id) || null"
+            :nowPreviewing
+            :previewMode
+            :cursorClass
+            @barMousedown="onNoteBarMouseDown($event, note)"
+            @barDoubleClick="onNoteBarDoubleClick($event, note)"
+            @leftEdgeMousedown="onNoteLeftEdgeMouseDown($event, note)"
+            @rightEdgeMousedown="onNoteRightEdgeMouseDown($event, note)"
+          />
+          <SequencerLyricInput
+            v-if="editingLyricNote != undefined"
+            :editingLyricNote
+            @lyricInput="onLyricInput"
+            @lyricConfirmed="onLyricConfirmed"
+          />
+        </div>
+        <SequencerPitch
+          v-if="editTarget === 'PITCH'"
+          class="sequencer-pitch"
+          :style="{
+            marginRight: `${scrollBarWidth}px`,
+            marginBottom: `${scrollBarWidth}px`,
+          }"
+          :offsetX="scrollX"
+          :offsetY="scrollY"
+          :previewPitchEdit
+        />
+        <div
+          class="sequencer-overlay"
+          :style="{
+            marginRight: `${scrollBarWidth}px`,
+            marginBottom: `${scrollBarWidth}px`,
+          }"
+        >
+          <div
+            ref="rectSelectHitbox"
+            class="rect-select-preview"
+            :style="{
+              display: isRectSelecting ? 'block' : 'none',
+              left: `${Math.min(rectSelectStartX, cursorX)}px`,
+              top: `${Math.min(rectSelectStartY, cursorY)}px`,
+              width: `${Math.abs(cursorX - rectSelectStartX)}px`,
+              height: `${Math.abs(cursorY - rectSelectStartY)}px`,
+            }"
+          ></div>
+          <SequencerPhraseIndicator
+            v-for="phraseInfo in phraseInfosInOtherTracks"
+            :key="phraseInfo.key"
+            :phraseKey="phraseInfo.key"
+            :isInSelectedTrack="false"
+            class="sequencer-phrase-indicator"
+            :style="{
+              width: `${phraseInfo.width}px`,
+              transform: `translateX(${phraseInfo.x - scrollX}px)`,
+            }"
+          />
+          <SequencerPhraseIndicator
+            v-for="phraseInfo in phraseInfosInSelectedTrack"
+            :key="phraseInfo.key"
+            :phraseKey="phraseInfo.key"
+            isInSelectedTrack
+            class="sequencer-phrase-indicator"
+            :style="{
+              width: `${phraseInfo.width}px`,
+              transform: `translateX(${phraseInfo.x - scrollX}px)`,
+            }"
+          />
+          <div
+            class="sequencer-playhead"
+            data-testid="sequencer-playhead"
+            :style="{
+              transform: `translateX(${playheadX - scrollX}px)`,
+            }"
+          ></div>
+        </div>
+        <QSlider
+          :modelValue="zoomX"
+          :min="ZOOM_X_MIN"
+          :max="ZOOM_X_MAX"
+          :step="ZOOM_X_STEP"
+          class="zoom-x-slider"
+          trackSize="2px"
+          @update:modelValue="setZoomX"
+        />
+        <QSlider
+          :modelValue="zoomY"
+          :min="ZOOM_Y_MIN"
+          :max="ZOOM_Y_MAX"
+          :step="ZOOM_Y_STEP"
+          vertical
+          reverse
+          class="zoom-y-slider"
+          trackSize="2px"
+          @update:modelValue="setZoomY"
+        />
+        <ContextMenu ref="contextMenu" :menudata="contextMenuData" />
+        <SequencerToolPalette
+          :editTarget
+          :sequencerNoteTool
+          :sequencerPitchTool
+          @update:sequencerNoteTool="
+            (value) =>
+              store.dispatch('SET_SEQUENCER_NOTE_TOOL', {
+                sequencerNoteTool: value,
+              })
+          "
+          @update:sequencerPitchTool="
+            (value) =>
+              store.dispatch('SET_SEQUENCER_PITCH_TOOL', {
+                sequencerPitchTool: value,
+              })
+          "
+        />
+      </div>
+    </template>
+    <template #after>
+      <SequencerParameterPanel v-if="isParameterPanelOpen" />
+    </template>
+  </QSplitter>
 </template>
 
+<script lang="ts">
+import { ComputedRef } from "vue";
+import type { InjectionKey } from "vue";
+
+export const gridInfoInjectionKey: InjectionKey<{
+  gridWidth: ComputedRef<number>;
+  gridHeight: ComputedRef<number>;
+}> = Symbol();
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -183,7 +241,10 @@ import {
   onActivated,
   onDeactivated,
   watch,
+  provide,
 } from "vue";
+import SequencerParameterPanel from "./SequencerParameterPanel.vue";
+import SequencerGridSpacer from "./SequencerGridSpacer.vue";
 import ContextMenu, {
   ContextMenuItemData,
 } from "@/components/Menu/ContextMenu/Container.vue";
@@ -197,13 +258,13 @@ import {
 } from "@/store/type";
 import {
   getEndTicksOfPhrase,
+  getMeasureDuration,
   getNoteDuration,
   getStartTicksOfPhrase,
   noteNumberToFrequency,
   tickToSecond,
 } from "@/sing/domain";
 import {
-  getKeyBaseHeight,
   tickToBaseX,
   baseXToTick,
   noteNumberToBaseY,
@@ -223,6 +284,7 @@ import {
   MouseDownBehavior,
   MouseDoubleClickBehavior,
   CursorState,
+  getKeyBaseHeight,
 } from "@/sing/viewHelper";
 import SequencerGrid from "@/components/Sing/SequencerGrid/Container.vue";
 import SequencerRuler from "@/components/Sing/SequencerRuler/Container.vue";
@@ -333,17 +395,37 @@ const snapTicks = computed(() => {
   return getNoteDuration(state.sequencerSnapType, tpqn.value);
 });
 
-// グリッド
-const gridCellBaseHeight = getKeyBaseHeight();
-const gridHeight = computed(() => {
-  return gridCellBaseHeight * zoomY.value * keyInfos.length;
-});
-
 // 小節の数
 const numMeasures = computed(() => {
   return store.getters.SEQUENCER_NUM_MEASURES;
 });
 
+// グリッド関係の値
+const gridWidth = computed(() => {
+  const timeSignatures = store.state.timeSignatures;
+  const gridCellWidth = tickToBaseX(snapTicks.value, tpqn.value) * zoomX.value;
+
+  let numOfGridColumns = 0;
+  for (const [i, timeSignature] of timeSignatures.entries()) {
+    const nextTimeSignature = timeSignatures[i + 1];
+    const nextMeasureNumber =
+      nextTimeSignature?.measureNumber ?? numMeasures.value + 1;
+    const beats = timeSignature.beats;
+    const beatType = timeSignature.beatType;
+    const measureDuration = getMeasureDuration(beats, beatType, tpqn.value);
+    numOfGridColumns +=
+      Math.round(measureDuration / snapTicks.value) *
+      (nextMeasureNumber - timeSignature.measureNumber);
+  }
+  return gridCellWidth * numOfGridColumns;
+});
+const gridHeight = computed(() => {
+  const gridCellHeight = getKeyBaseHeight() * zoomY.value;
+  return gridCellHeight * keyInfos.length;
+});
+
+provide(gridInfoInjectionKey, { gridWidth, gridHeight });
+
 // スクロール位置
 const scrollX = ref(0);
 const scrollY = ref(0);
@@ -379,6 +461,17 @@ const phraseInfosInOtherTracks = computed(() => {
   );
 });
 
+const parameterPanelHeight = ref(300);
+const isParameterPanelOpen = computed(
+  () => store.state.experimentalSetting.showParameterPanel,
+);
+
+const setParameterPanelHeight = (height: number) => {
+  if (isParameterPanelOpen.value) {
+    parameterPanelHeight.value = height;
+  }
+};
+
 const ctrlKey = useCommandOrControlKey();
 const editorFrameRate = computed(() => state.editorFrameRate);
 const scrollBarWidth = ref(12);
@@ -1919,6 +2012,31 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
   grid-column: 1;
 }
 
+.sequencer-grid {
+  grid-row: 2;
+  grid-column: 2;
+}
+
+.sequencer-character-portrait {
+  grid-row: 2;
+  grid-column: 2;
+}
+
+.sequencer-guideline-container {
+  grid-row: 2;
+  grid-column: 2;
+  position: relative;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.sequencer-guideline {
+  left: -0.5px;
+  width: 1px;
+  height: 100%;
+  background: var(--scheme-color-inverse-primary);
+}
+
 .sequencer-body {
   grid-row: 2;
   grid-column: 2;
@@ -1935,20 +2053,6 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
   }
 }
 
-.sequencer-grid {
-  display: block;
-  pointer-events: none;
-}
-
-.sequencer-guideline {
-  position: absolute;
-  top: 0;
-  left: -0.5px;
-  width: 1px;
-  background: var(--scheme-color-inverse-primary);
-  pointer-events: none;
-}
-
 .sequencer-pitch {
   grid-row: 2;
   grid-column: 2;
@@ -1996,7 +2100,7 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
 }
 
 .zoom-x-slider {
-  position: fixed;
+  position: absolute;
   bottom: 16px;
   right: 32px;
   width: 80px;
@@ -2012,7 +2116,7 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
 }
 
 .zoom-y-slider {
-  position: fixed;
+  position: absolute;
   bottom: 40px;
   right: 16px;
   height: 80px;
diff --git a/src/components/Sing/SequencerGrid/Container.vue b/src/components/Sing/SequencerGrid/Container.vue
index 0d433420d6..72f5d7ffba 100644
--- a/src/components/Sing/SequencerGrid/Container.vue
+++ b/src/components/Sing/SequencerGrid/Container.vue
@@ -6,11 +6,17 @@
     :sequencerZoomY
     :sequencerSnapType
     :numMeasures
+    :gridWidth
+    :gridHeight
+    :offsetX="props.offsetX"
+    :offsetY="props.offsetY"
   />
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { inject } from "vue";
+import { gridInfoInjectionKey } from "../ScoreSequencer.vue";
 import Presentation from "./Presentation.vue";
 import { useStore } from "@/store";
 
@@ -18,6 +24,18 @@ defineOptions({
   name: "SequencerGrid",
 });
 
+const props = defineProps<{
+  offsetX: number;
+  offsetY: number;
+}>();
+
+const injectedValue = inject(gridInfoInjectionKey);
+if (injectedValue == undefined) {
+  throw new Error("injectedValue is undefined.");
+}
+
+const { gridWidth, gridHeight } = injectedValue;
+
 const store = useStore();
 
 const tpqn = computed(() => store.state.tpqn);
diff --git a/src/components/Sing/SequencerGrid/Presentation.vue b/src/components/Sing/SequencerGrid/Presentation.vue
index ac19ace72d..908ebdbdef 100644
--- a/src/components/Sing/SequencerGrid/Presentation.vue
+++ b/src/components/Sing/SequencerGrid/Presentation.vue
@@ -1,116 +1,121 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :width="gridWidth"
-    :height="gridHeight"
-    class="sequencer-grid"
-    shape-rendering="crispEdges"
-  >
-    <defs>
-      <pattern
-        id="sequencer-grid-pattern-background"
-        patternUnits="userSpaceOnUse"
-        :x="0"
-        :width="gridCellWidth"
-        :height="gridCellHeight * 12"
-      >
-        <!-- セルの背景 -->
-        <rect
-          v-for="(keyInfo, index) in keyInfos"
-          :key="`cell-${index}`"
-          x="0"
-          :y="gridCellHeight * index"
-          :width="gridCellWidth"
-          :height="gridCellHeight * 12"
-          :class="`sequencer-grid-cell sequencer-grid-cell-${keyInfo.color}`"
-        />
-        <!-- スナップグリッド線 -->
-        <line
-          :x1="gridCellWidth"
-          :x2="gridCellWidth"
-          y1="0"
-          :y2="gridCellHeight * 12"
-          class="sequencer-grid-vertical-line"
-        />
-      </pattern>
-      <pattern
-        v-for="(pattern, patternIndex) in gridPatterns"
-        :id="`sequencer-grid-pattern-${patternIndex}`"
-        :key="`pattern-${patternIndex}`"
-        patternUnits="userSpaceOnUse"
-        :x="pattern.x"
-        :width="pattern.patternWidth"
-        :height="gridCellHeight * 12"
-      >
-        <!-- E/Fの中間線 -->
-        <line
-          v-for="index in horizontalLineIndices"
-          :key="`horizontal-${index}`"
-          x1="0"
-          :x2="pattern.patternWidth"
-          :y1="gridCellHeight * (index + 1)"
-          :y2="gridCellHeight * (index + 1)"
-          class="sequencer-grid-horizontal-line"
-        />
-        <!-- 拍線 -->
-        <line
-          v-for="n in pattern.timeSignature.beats"
-          :key="`beatline-${n}`"
-          :x1="pattern.beatWidth * n"
-          :x2="pattern.beatWidth * n"
-          y1="0"
-          :y2="gridCellHeight * 12"
-          class="sequencer-grid-beat-line"
-        />
-      </pattern>
-    </defs>
-    <!-- グリッド背景 -->
-    <rect
-      x="0"
-      y="0"
+  <div class="sequencer-grid">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
       :width="gridWidth"
       :height="gridHeight"
-      :fill="`url(#sequencer-grid-pattern-background)`"
-    />
-    <!-- グリッドパターン -->
-    <rect
-      v-for="gridPattern in gridPatterns"
-      :key="`grid-${gridPattern.id}`"
-      :x="gridPattern.x"
-      y="0"
-      :width="gridPattern.width"
-      :height="gridHeight"
-      :fill="`url(#${gridPattern.id})`"
-    />
-    <!-- オクターブ線（グリッドの上に描画） -->
-    <line
-      v-for="index in octaveLineIndices"
-      :key="`octave-${index}`"
-      x1="0"
-      :x2="gridWidth"
-      :y1="gridCellHeight * (index + 1)"
-      :y2="gridCellHeight * (index + 1)"
-      class="sequencer-grid-octave-line"
-    />
-    <!-- 小節線（グリッドおよびオクターブ線の上に描画） -->
-    <line
-      v-for="x in measureLines"
-      :key="`measureline-${x}`"
-      :x1="x"
-      :x2="x"
-      y1="0"
-      :y2="gridHeight"
-      class="sequencer-grid-measure-line"
-    />
-  </svg>
+      class="sequencer-grid-svg"
+      shape-rendering="crispEdges"
+      :style="{
+        transform: `translate3d(${-offsetX}px,${-offsetY}px,0)`,
+      }"
+    >
+      <defs>
+        <pattern
+          id="sequencer-grid-pattern-background"
+          patternUnits="userSpaceOnUse"
+          :x="0"
+          :width="gridCellWidth"
+          :height="gridCellHeight * 12"
+        >
+          <!-- セルの背景 -->
+          <rect
+            v-for="(keyInfo, index) in keyInfos"
+            :key="`cell-${index}`"
+            x="0"
+            :y="gridCellHeight * index"
+            :width="gridCellWidth"
+            :height="gridCellHeight * 12"
+            :class="`sequencer-grid-cell sequencer-grid-cell-${keyInfo.color}`"
+          />
+          <!-- スナップグリッド線 -->
+          <line
+            :x1="gridCellWidth"
+            :x2="gridCellWidth"
+            y1="0"
+            :y2="gridCellHeight * 12"
+            class="sequencer-grid-vertical-line"
+          />
+        </pattern>
+        <pattern
+          v-for="(pattern, patternIndex) in gridPatterns"
+          :id="`sequencer-grid-pattern-${patternIndex}`"
+          :key="`pattern-${patternIndex}`"
+          patternUnits="userSpaceOnUse"
+          :x="pattern.x"
+          :width="pattern.patternWidth"
+          :height="gridCellHeight * 12"
+        >
+          <!-- E/Fの中間線 -->
+          <line
+            v-for="index in horizontalLineIndices"
+            :key="`horizontal-${index}`"
+            x1="0"
+            :x2="pattern.patternWidth"
+            :y1="gridCellHeight * (index + 1)"
+            :y2="gridCellHeight * (index + 1)"
+            class="sequencer-grid-horizontal-line"
+          />
+          <!-- 拍線 -->
+          <line
+            v-for="n in pattern.timeSignature.beats"
+            :key="`beatline-${n}`"
+            :x1="pattern.beatWidth * n"
+            :x2="pattern.beatWidth * n"
+            y1="0"
+            :y2="gridCellHeight * 12"
+            class="sequencer-grid-beat-line"
+          />
+        </pattern>
+      </defs>
+      <!-- グリッド背景 -->
+      <rect
+        x="0"
+        y="0"
+        :width="gridWidth"
+        :height="gridHeight"
+        :fill="`url(#sequencer-grid-pattern-background)`"
+      />
+      <!-- グリッドパターン -->
+      <rect
+        v-for="gridPattern in gridPatterns"
+        :key="`grid-${gridPattern.id}`"
+        :x="gridPattern.x"
+        y="0"
+        :width="gridPattern.width"
+        :height="gridHeight"
+        :fill="`url(#${gridPattern.id})`"
+      />
+      <!-- オクターブ線（グリッドの上に描画） -->
+      <line
+        v-for="index in octaveLineIndices"
+        :key="`octave-${index}`"
+        x1="0"
+        :x2="gridWidth"
+        :y1="gridCellHeight * (index + 1)"
+        :y2="gridCellHeight * (index + 1)"
+        class="sequencer-grid-octave-line"
+      />
+      <!-- 小節線（グリッドおよびオクターブ線の上に描画） -->
+      <line
+        v-for="x in measureLines"
+        :key="`measureline-${x}`"
+        :x1="x"
+        :x2="x"
+        y1="0"
+        :y2="gridHeight"
+        class="sequencer-grid-measure-line"
+      />
+    </svg>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, toRef } from "vue";
-import { keyInfos, getKeyBaseHeight, tickToBaseX } from "@/sing/viewHelper";
-import { getMeasureDuration, getNoteDuration } from "@/sing/domain";
+import { getKeyBaseHeight, keyInfos, tickToBaseX } from "@/sing/viewHelper";
 import { TimeSignature } from "@/store/type";
 import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
+import { getNoteDuration } from "@/sing/domain";
 
 const props = defineProps<{
   tpqn: number;
@@ -119,18 +124,21 @@ const props = defineProps<{
   sequencerZoomY: number;
   sequencerSnapType: number;
   numMeasures: number;
+  gridWidth: number;
+  gridHeight: number;
+  offsetX: number;
+  offsetY: number;
 }>();
 
-const gridCellTicks = computed(() => {
-  return getNoteDuration(props.sequencerSnapType, props.tpqn);
-});
 const gridCellWidth = computed(() => {
-  return tickToBaseX(gridCellTicks.value, props.tpqn) * props.sequencerZoomX;
+  const snapTicks = getNoteDuration(props.sequencerSnapType, props.tpqn);
+  return tickToBaseX(snapTicks, props.tpqn) * props.sequencerZoomX;
 });
-const gridCellBaseHeight = getKeyBaseHeight();
+
 const gridCellHeight = computed(() => {
-  return gridCellBaseHeight * props.sequencerZoomY;
+  return getKeyBaseHeight() * props.sequencerZoomY;
 });
+
 const beatWidth = (timeSignature: TimeSignature) => {
   const beatType = timeSignature.beatType;
   const wholeNoteDuration = props.tpqn * 4;
@@ -138,25 +146,6 @@ const beatWidth = (timeSignature: TimeSignature) => {
   return tickToBaseX(beatTicks, props.tpqn) * props.sequencerZoomX;
 };
 
-const gridWidth = computed(() => {
-  let numOfGridColumns = 0;
-  for (const [i, timeSignature] of props.timeSignatures.entries()) {
-    const nextTimeSignature = props.timeSignatures[i + 1];
-    const nextMeasureNumber =
-      nextTimeSignature?.measureNumber ?? props.numMeasures + 1;
-    const beats = timeSignature.beats;
-    const beatType = timeSignature.beatType;
-    const measureDuration = getMeasureDuration(beats, beatType, props.tpqn);
-    numOfGridColumns +=
-      Math.round(measureDuration / gridCellTicks.value) *
-      (nextMeasureNumber - timeSignature.measureNumber);
-  }
-  return gridCellWidth.value * numOfGridColumns;
-});
-const gridHeight = computed(() => {
-  return gridCellHeight.value * keyInfos.length;
-});
-
 const gridPatterns = useSequencerGrid({
   timeSignatures: toRef(() => props.timeSignatures),
   tpqn: toRef(() => props.tpqn),
@@ -213,8 +202,12 @@ const octaveLineIndices = computed(() => gridLines.value.octaveLines);
 @use "@/styles/colors" as colors;
 
 .sequencer-grid {
-  display: block;
   pointer-events: none;
+  overflow: hidden;
+}
+
+.sequencer-grid-svg {
+  display: block;
 }
 
 .sequencer-grid-cell {
diff --git a/src/components/Sing/SequencerGrid/index.stories.ts b/src/components/Sing/SequencerGrid/index.stories.ts
index 8acbdd97c9..c99706c9a7 100644
--- a/src/components/Sing/SequencerGrid/index.stories.ts
+++ b/src/components/Sing/SequencerGrid/index.stories.ts
@@ -25,6 +25,10 @@ const meta: Meta<typeof Presentation> = {
     tpqn: 480,
     sequencerSnapType: 16,
     numMeasures: 32,
+    gridWidth: 3840,
+    gridHeight: 2880,
+    offsetX: 0,
+    offsetY: 0,
   },
   argTypes: {
     sequencerZoomX: {
diff --git a/src/components/Sing/SequencerGridSpacer.vue b/src/components/Sing/SequencerGridSpacer.vue
new file mode 100644
index 0000000000..2bd3782231
--- /dev/null
+++ b/src/components/Sing/SequencerGridSpacer.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="sequencer-grid-spacer"></div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { gridInfoInjectionKey } from "./ScoreSequencer.vue";
+
+const injectedValue = inject(gridInfoInjectionKey);
+if (injectedValue == undefined) {
+  throw new Error("injectedValue is undefined.");
+}
+
+const { gridWidth, gridHeight } = injectedValue;
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/variables" as vars;
+@use "@/styles/colors" as colors;
+
+.sequencer-grid-spacer {
+  display: block;
+  width: v-bind("`${gridWidth}px`");
+  height: v-bind("`${gridHeight}px`");
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/Sing/SequencerParameterPanel.vue b/src/components/Sing/SequencerParameterPanel.vue
new file mode 100644
index 0000000000..bd4834e0f4
--- /dev/null
+++ b/src/components/Sing/SequencerParameterPanel.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>パラメーターパネル</div>
+  <!-- TODO: 音素タイミングなどを実装する -->
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/colors" as colors;
+</style>
diff --git a/src/components/Sing/SequencerRuler/index.stories.ts b/src/components/Sing/SequencerRuler/index.stories.ts
index 8e7e625df0..9eaef47d25 100644
--- a/src/components/Sing/SequencerRuler/index.stories.ts
+++ b/src/components/Sing/SequencerRuler/index.stories.ts
@@ -27,6 +27,7 @@ const meta: Meta<typeof Presentation> = {
     offset: 0,
     numMeasures: 32,
     sequencerSnapType: 16,
+    uiLocked: false,
     "onUpdate:playheadTicks": fn<(value: number) => void>(),
     onDeselectAllNotes: fn(),
   },
diff --git a/src/backend/electron/type.ts b/src/helpers/progressHelper.ts
similarity index 100%
rename from src/backend/electron/type.ts
rename to src/helpers/progressHelper.ts
diff --git a/src/store/setting.ts b/src/store/setting.ts
index e000302461..1cd2aa1dd9 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -48,6 +48,7 @@ export const settingStoreState: SettingStoreState = {
     enableMorphing: false,
     enableMultiSelect: false,
     shouldKeepTuningOnTextChange: false,
+    showParameterPanel: false,
   },
   splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
   splitterPosition: {
diff --git a/src/type/preload.ts b/src/type/preload.ts
index 16f825d51f..f5e565f70b 100644
--- a/src/type/preload.ts
+++ b/src/type/preload.ts
@@ -357,6 +357,7 @@ export const experimentalSettingSchema = z.object({
   enableMorphing: z.boolean().default(false),
   enableMultiSelect: z.boolean().default(false),
   shouldKeepTuningOnTextChange: z.boolean().default(false),
+  showParameterPanel: z.boolean().default(false),
 });
 
 export type ExperimentalSettingType = z.infer<typeof experimentalSettingSchema>;
diff --git "a/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png" "b/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png"
index c5e5a5971d..175e5c9728 100644
Binary files "a/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png" and "b/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png" differ
diff --git "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-0-browser-win32.png" "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-0-browser-win32.png"
index 6044bd2f18..e60f2719ad 100644
Binary files "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-0-browser-win32.png" and "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-0-browser-win32.png" differ
diff --git "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-1-browser-win32.png" "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-1-browser-win32.png"
index fb17f84399..84326c3de8 100644
Binary files "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-1-browser-win32.png" and "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-1-browser-win32.png" differ
diff --git "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-2-browser-win32.png" "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-2-browser-win32.png"
index 65dc00209a..47355f0bbe 100644
Binary files "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-2-browser-win32.png" and "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-2-browser-win32.png" differ
diff --git "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-3-browser-win32.png" "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-3-browser-win32.png"
index 1eb623fc37..46d6396909 100644
Binary files "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-3-browser-win32.png" and "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-3-browser-win32.png" differ
diff --git "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-4-browser-win32.png" "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-4-browser-win32.png"
index 455f46dcdf..af07079da6 100644
Binary files "a/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-4-browser-win32.png" and "b/tests/e2e/browser/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260/\350\250\255\345\256\232\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts-snapshots/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210-4-browser-win32.png" differ
diff --git a/tests/unit/backend/common/__snapshots__/configManager.spec.ts.snap b/tests/unit/backend/common/__snapshots__/configManager.spec.ts.snap
index 4da839ee6a..23598f3943 100644
--- a/tests/unit/backend/common/__snapshots__/configManager.spec.ts.snap
+++ b/tests/unit/backend/common/__snapshots__/configManager.spec.ts.snap
@@ -29,6 +29,7 @@ exports[`0.13.0からマイグレーションできる 1`] = `
     "enableMorphing": false,
     "enableMultiSelect": false,
     "shouldKeepTuningOnTextChange": false,
+    "showParameterPanel": false,
   },
   "hotkeySettings": [
     {
diff --git a/tests/unit/backend/electron/fileHelper.node.spec.ts b/tests/unit/backend/electron/fileHelper.node.spec.ts
new file mode 100644
index 0000000000..2530da26c0
--- /dev/null
+++ b/tests/unit/backend/electron/fileHelper.node.spec.ts
@@ -0,0 +1,45 @@
+import fs from "fs";
+import path from "path";
+import os from "os";
+import { test, expect, beforeAll, afterAll } from "vitest";
+import { writeFileSafely } from "@/backend/electron/fileHelper";
+import { uuid4 } from "@/helpers/random";
+
+let tmpDir: string;
+
+beforeAll(() => {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), uuid4()));
+});
+
+afterAll(() => {
+  fs.rmdirSync(tmpDir, { recursive: true });
+});
+
+describe("writeFileSafely", () => {
+  test("ファイルを書き込める", async () => {
+    const filePath = path.join(tmpDir, uuid4());
+    const content = "Hello World";
+    writeFileSafely(filePath, content);
+    expect(fs.readFileSync(filePath, "utf-8")).toBe(content);
+  });
+
+  test("ファイルを上書きできる", async () => {
+    const filePath = path.join(tmpDir, uuid4());
+    fs.writeFileSync(filePath, "old content");
+    const newContent = "new content";
+    writeFileSafely(filePath, newContent);
+    expect(fs.readFileSync(filePath, "utf-8")).toBe(newContent);
+  });
+
+  test("存在しないディレクトリに書き込もうとするとエラー", async () => {
+    const nonExistentDir = path.join(tmpDir, uuid4(), "not-exist");
+    const filePath = path.join(nonExistentDir, "test.txt");
+    expect(() => writeFileSafely(filePath, "data")).toThrow();
+  });
+
+  test("指定したパスにディレクトリが存在するとエラー", async () => {
+    const filePath = path.join(tmpDir, uuid4());
+    fs.mkdirSync(filePath);
+    expect(() => writeFileSafely(filePath, "data")).toThrow();
+  });
+});
diff --git a/tests/unit/backend/electron/vvppFile.node.spec.ts b/tests/unit/backend/electron/vvppFile.node.spec.ts
new file mode 100644
index 0000000000..3dd04933f2
--- /dev/null
+++ b/tests/unit/backend/electron/vvppFile.node.spec.ts
@@ -0,0 +1,104 @@
+import os from "os";
+import path from "path";
+import { exec } from "child_process";
+import fs from "fs";
+import { promisify } from "util";
+import { test, afterAll, beforeAll } from "vitest";
+import { extractVvpp } from "@/backend/electron/vvppFile";
+import { uuid4 } from "@/helpers/random";
+
+let tmpDir: string;
+beforeAll(() => {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), uuid4()));
+});
+afterAll(() => {
+  fs.rmdirSync(tmpDir, { recursive: true });
+});
+
+test("正しいVVPPファイルからエンジンを切り出せる", async () => {
+  const targetName = "perfect.vvpp";
+  const sourceDir = path.join(__dirname, "vvpps", targetName);
+  const outputFilePath = path.join(tmpDir, uuid4() + targetName);
+  await createZipFile(sourceDir, outputFilePath);
+
+  const vvppEngineDir = createVvppEngineDir();
+  await extractVvpp({
+    vvppLikeFilePath: outputFilePath,
+    vvppEngineDir,
+    tmpDir,
+  });
+  expectManifestExists(vvppEngineDir);
+});
+
+test("分割されたVVPPファイルからエンジンを切り出せる", async () => {
+  const targetName = "perfect.vvpp";
+  const sourceDir = path.join(__dirname, "vvpps", targetName);
+  const outputFilePath = path.join(tmpDir, uuid4() + targetName);
+  await createZipFile(sourceDir, outputFilePath);
+
+  const outputFilePath1 = outputFilePath + ".1.vvppp";
+  const outputFilePath2 = outputFilePath + ".2.vvppp";
+  splitFile(outputFilePath, outputFilePath1, outputFilePath2);
+
+  const vvppEngineDir = createVvppEngineDir();
+  await extractVvpp({
+    vvppLikeFilePath: outputFilePath1,
+    vvppEngineDir,
+    tmpDir,
+  });
+  expectManifestExists(vvppEngineDir);
+});
+
+test.each([
+  ["invalid_manifest.vvpp", /SyntaxError|is not valid JSON/],
+  ["no_engine_id.vvpp", undefined], // TODO: エンジンIDが見つからない専用のエラーを用意する
+  ["no_manifest.vvpp", /ENOENT|engine_manifest.json/],
+])(
+  "不正なVVPPファイルからエンジンを切り出せない: %s",
+  async (targetName, expectedError) => {
+    const sourceDir = path.join(__dirname, "vvpps", targetName);
+    const outputFilePath = path.join(tmpDir, uuid4() + targetName);
+    await createZipFile(sourceDir, outputFilePath);
+    await expect(
+      extractVvpp({
+        vvppLikeFilePath: outputFilePath,
+        vvppEngineDir: tmpDir,
+        tmpDir,
+      }),
+    ).rejects.toThrow(expectedError);
+  },
+);
+
+/** 7zを使って指定したフォルダからzipファイルを作成する */
+async function createZipFile(sourceDir: string, outputFilePath: string) {
+  const sevenZipBin = import.meta.env.VITE_7Z_BIN_NAME;
+  const command = `"${sevenZipBin}" a -tzip "${outputFilePath}" "${path.join(sourceDir, "*")}"`;
+  await promisify(exec)(command);
+}
+
+function createVvppEngineDir() {
+  const dir = path.join(tmpDir, uuid4());
+  fs.mkdirSync(dir);
+  return dir;
+}
+
+function expectManifestExists(vvppEngineDir: string) {
+  const files = fs.readdirSync(vvppEngineDir, { recursive: true });
+  const manifestExists = files.some(
+    (file) =>
+      typeof file === "string" && path.basename(file) == "engine_manifest.json",
+  );
+  expect(manifestExists).toBe(true);
+}
+
+/** ファイルを2つに分割する */
+function splitFile(
+  inputFilePath: string,
+  outputFilePath1: string,
+  outputFilePath2: string,
+) {
+  const data = fs.readFileSync(inputFilePath);
+  const midPoint = Math.floor(data.length / 2);
+  fs.writeFileSync(outputFilePath1, data.subarray(0, midPoint));
+  fs.writeFileSync(outputFilePath2, data.subarray(midPoint));
+}
diff --git a/tests/unit/backend/electron/vvpps/README.md b/tests/unit/backend/electron/vvpps/README.md
new file mode 100644
index 0000000000..72730c93d0
--- /dev/null
+++ b/tests/unit/backend/electron/vvpps/README.md
@@ -0,0 +1,9 @@
+# vvpps
+
+テスト用のVVPPファイルを作るためのディレクトリ。
+各ディレクトリをzip化して拡張子を.vvppに変えればテスト用ファイルになる。
+
+- perfect.vvpp：完璧なVVPP
+- invalid_manifest.vvpp：不正なエンジンマニフェストがあるVVPP
+- no_manifest.vvpp：エンジンマニフェストがないVVPP
+- no_engine_id.vvpp：エンジンマニフェストはあるが、エンジンidがないVVPP
diff --git a/tests/unit/backend/electron/vvpps/invalid_manifest.vvpp/engine_manifest.json b/tests/unit/backend/electron/vvpps/invalid_manifest.vvpp/engine_manifest.json
new file mode 100644
index 0000000000..ea368b7a02
--- /dev/null
+++ b/tests/unit/backend/electron/vvpps/invalid_manifest.vvpp/engine_manifest.json
@@ -0,0 +1 @@
+invalid manifest
\ No newline at end of file
diff --git a/tests/unit/backend/electron/vvpps/no_engine_id.vvpp/engine_manifest.json b/tests/unit/backend/electron/vvpps/no_engine_id.vvpp/engine_manifest.json
new file mode 100644
index 0000000000..e2575552e2
--- /dev/null
+++ b/tests/unit/backend/electron/vvpps/no_engine_id.vvpp/engine_manifest.json
@@ -0,0 +1,6 @@
+{
+  "name": "Dummy Engine",
+  "command": "dummy.exe",
+  "port": 404,
+  "supported_features": {}
+}
diff --git a/tests/unit/backend/electron/vvpps/no_manifest.vvpp/invalid_file_name.json b/tests/unit/backend/electron/vvpps/no_manifest.vvpp/invalid_file_name.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tests/unit/backend/electron/vvpps/perfect.vvpp/engine_manifest.json b/tests/unit/backend/electron/vvpps/perfect.vvpp/engine_manifest.json
new file mode 100644
index 0000000000..7f32baf842
--- /dev/null
+++ b/tests/unit/backend/electron/vvpps/perfect.vvpp/engine_manifest.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dummy Engine",
+  "uuid": "00000000-0000-0000-0000-000000000001",
+  "command": "dummy.exe",
+  "port": 404,
+  "supported_features": {}
+}