アプリのUIサイズを変更するショートカットの追加

public/howtouse.md

@@ -236,6 +236,10 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
   - 元に戻す
 - `Ctrl` + `Y`
   - やり直す
+- `Ctrl` + `+`
+  - 拡大
+- `Ctrl` + `-`
+  - 縮小
 - `Esc`
   - テキスト欄からカーソルを外す
 - 1

src/backend/browser/sandbox.ts

@@ -189,6 +189,16 @@ export const api: Sandbox = {
   maximizeWindow() {
     throw new Error(`Not supported on Browser version: maximizeWindow`);
   },
+  zoomIn() {
+    throw new Error(`Not supported on Browser version: zoomIn`);
+  },
+  zoomOut() {
+    throw new Error(`Not supported on Browser version: zoomOut`);
+  },
+  zoomReset() {
+    throw new Error(`Not supported on Browser version: zoomReset`);
+  },
+
   /* eslint-disable no-console */ // ログの吐き出し先は console ぐらいしかないので、ここでは特例で許可している
   logError(...params: unknown[]) {
     console.error(...params);

src/backend/electron/main.ts

@@ -623,7 +623,22 @@ registerIpcMainHandle<IpcMainHandle>({
       win.maximize();
     }
   },
-
+  /** UIの拡大 */
+  ZOOM_IN: () => {
+    win.webContents.setZoomFactor(
+      Math.min(Math.max(win.webContents.getZoomFactor() + 0.1, 0.5), 3),
+    );
+  },
+  /** UIの縮小 */
+  ZOOM_OUT: () => {
+    win.webContents.setZoomFactor(
+      Math.min(Math.max(win.webContents.getZoomFactor() - 0.1, 0.5), 3),
+    );
+  },
+  /** UIの拡大率リセット */
+  ZOOM_RESET: () => {
+    win.webContents.setZoomFactor(1);
+  },
   OPEN_LOG_DIRECTORY: () => {
     void shell.openPath(app.getPath("logs"));
   },

src/backend/electron/preload.ts

@@ -109,6 +109,16 @@ const api: Sandbox = {
     void ipcRendererInvokeProxy.MAXIMIZE_WINDOW();
   },
 
+  zoomIn: () => {
+    void ipcRendererInvokeProxy.ZOOM_IN();
+  },
+  zoomOut: () => {
+    void ipcRendererInvokeProxy.ZOOM_OUT();
+  },
+  zoomReset: () => {
+    void ipcRendererInvokeProxy.ZOOM_RESET();
+  },
+
   logError: (...params) => {
     console.error(...params);
     // 経緯 https://github.com/VOICEVOX/voicevox/pull/1620#discussion_r1371804569

src/components/Menu/MenuBar/MenuBar.vue

@@ -164,6 +164,21 @@ const importProject = () => {
   }
 };
 
+/** UIの拡大 */
+const zoomIn = async () => {
+  await store.actions.ZOOM_IN();
+};
+
+/** UIの縮小 */
+const zoomOut = async () => {
+  await store.actions.ZOOM_OUT();
+};
+
+/** UIの拡大率リセット */
+const zoomReset = async () => {
+  await store.actions.ZOOM_RESET();
+};
+
 // 「最近使ったプロジェクト」のメニュー
 const recentProjectsSubMenuData = ref<MenuItemData[]>([]);
 const updateRecentProjects = async () => {
@@ -400,7 +415,34 @@ const menudata = computed<MenuItemData[]>(() => [
       closeAllDialog();
     },
     disableWhenUiLocked: false,
-    subMenu: [...props.viewSubMenuData],
+    subMenu: [
+      ...props.viewSubMenuData,
+      { type: "separator" },
+      {
+        type: "button",
+        label: "拡大",
+        onClick: () => {
+          void zoomIn();
+        },
+        disableWhenUiLocked: false,
+      },
+      {
+        type: "button",
+        label: "縮小",
+        onClick: () => {
+          void zoomOut();
+        },
+        disableWhenUiLocked: false,
+      },
+      {
+        type: "button",
+        label: "拡大率のリセット",
+        onClick: () => {
+          void zoomReset();
+        },
+        disableWhenUiLocked: false,
+      },
+    ],
   },
   {
     type: "root",
@@ -547,6 +589,18 @@ registerHotkeyForAllEditors({
   callback: importProject,
   name: "プロジェクトを読み込む",
 });
+registerHotkeyForAllEditors({
+  callback: zoomIn,
+  name: "拡大",
+});
+registerHotkeyForAllEditors({
+  callback: zoomOut,
+  name: "縮小",
+});
+registerHotkeyForAllEditors({
+  callback: zoomReset,
+  name: "拡大率のリセット",
+});
 </script>
 
 <style lang="scss">

src/store/type.ts

@@ -2087,6 +2087,18 @@ export type UiStoreTypes = {
     getter: boolean;
   };
 
+  ZOOM_IN: {
+    action(): void;
+  };
+
+  ZOOM_OUT: {
+    action(): void;
+  };
+
+  ZOOM_RESET: {
+    action(): void;
+  };
+
   CHECK_EDITED_AND_NOT_SAVE: {
     action(
       obj:

src/store/ui.ts

@@ -395,6 +395,27 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  /** UIの拡大 */
+  ZOOM_IN: {
+    action() {
+      window.backend.zoomIn();
+    },
+  },
+
+  /** UIの縮小 */
+  ZOOM_OUT: {
+    action() {
+      window.backend.zoomOut();
+    },
+  },
+
+  /** UIの拡大率のリセット */
+  ZOOM_RESET: {
+    action() {
+      window.backend.zoomReset();
+    },
+  },
+
   CHECK_EDITED_AND_NOT_SAVE: {
     /**
      * プロジェクトファイル未保存の場合、保存するかどうかを確認する。

src/type/ipc.ts

@@ -123,6 +123,21 @@ export type IpcIHData = {
     return: void;
   };
 
+  ZOOM_IN: {
+    args: [];
+    return: void;
+  };
+
+  ZOOM_OUT: {
+    args: [];
+    return: void;
+  };
+
+  ZOOM_RESET: {
+    args: [];
+    return: void;
+  };
+
   OPEN_LOG_DIRECTORY: {
     args: [];
     return: void;

src/type/preload.ts

@@ -116,6 +116,18 @@ export const defaultHotkeySettings: HotkeySettingType[] = [
     action: "やり直す",
     combination: HotkeyCombination(!isMac ? "Ctrl Y" : "Shift Meta Z"),
   },
+  {
+    action: "拡大",
+    combination: HotkeyCombination(!isMac ? "Ctrl +" : "Meta +"),
+  },
+  {
+    action: "縮小",
+    combination: HotkeyCombination(!isMac ? "Ctrl -" : "Meta -"),
+  },
+  {
+    action: "拡大率のリセット",
+    combination: HotkeyCombination(""),
+  },
   {
     action: "新規プロジェクト",
     combination: HotkeyCombination(!isMac ? "Ctrl N" : "Meta N"),
@@ -238,6 +250,9 @@ export interface Sandbox {
   closeWindow(): void;
   minimizeWindow(): void;
   maximizeWindow(): void;
+  zoomIn(): void;
+  zoomOut(): void;
+  zoomReset(): void;
   logError(...params: unknown[]): void;
   logWarn(...params: unknown[]): void;
   logInfo(...params: unknown[]): void;
@@ -456,6 +471,9 @@ export const hotkeyActionNameSchema = z.enum([
   `8${actionPostfixSelectNthCharacter}`,
   `9${actionPostfixSelectNthCharacter}`,
   `10${actionPostfixSelectNthCharacter}`,
+  "拡大",
+  "縮小",
+  "拡大率のリセット",
 ]);
 
 export type HotkeyActionNameType = z.infer<typeof hotkeyActionNameSchema>;