ブラウザでEditorが動作する状態にする

README.md

@@ -65,6 +65,14 @@ npm run electron:serve
 
 音声合成エンジンのリポジトリはこちらです <https://github.com/VOICEVOX/voicevox_engine>
 
+### ブラウザ版の実行（開発中）
+
+別途音声合成エンジンを起動し、以下を実行して表示された localhost へアクセスします。
+
+```bash
+npm run browser:serve
+```
+
 ## ビルド
 
 ```bash

docs/コードの歩き方.md

@@ -75,13 +75,14 @@ TODO
 ## ソースコードのディレクトリ構成
 
 - src
-  - background.ts ･･･ 最初に実行されるコード。ウィンドウを表示したり、エンジンを起動したりする。Electron のメインプロセス。
+  - background.ts ･･･ Electron 版で最初に実行されるコード。ウィンドウを表示したり、エンジンを起動したりする。Electron のメインプロセス。
   - main.ts ･･･ ウィンドウを表示するために最初に実行されるコード。ここで Vue や Vuex を組み込む。
   - App.vue ･･･ Vue のルートになるコンポーネント。他の全てのコンポーネントの親。
   - views ディレクトリ ･･･ 画面全体を覆うような Vue コンポーネントのディレクトリ。
   - components ディレクトリ ･･･ UI のパーツになる Vue コンポーネントディレクトリ。
   - store ディレクトリ ･･･ Vuex のストアのディレクトリ。アプリのロジックの大半はここに書かれる。
   - electron ディレクトリ ･･･ Electron の ipc 通信などのコードが置かれるディレクトリ。
+  - browser ディレクトリ ･･･ WIP
   - type ディレクトリ ･･･ TypeScript 用の型定義などが入るディレクトリ。
   - styles ディレクトリ ･･･ CSS や SCSS などのディレクトリ。
   - infrastructures ディレクトリ ･･･ UI 用のコードと UI 以外のコードを跨ぐときに一枚かませたいときのためのコードのディレクトリ。

package.json

@@ -29,6 +29,7 @@
     "electron:build_pnever": "cross-env VITE_IS_ELECTRON=true vite build && electron-builder --config electron-builder.config.js --publish never",
     "electron:build_pnever_prepackaged": "cross-var electron-builder --config electron-builder.config.js --publish never --prepackaged $PREPACKAGED",
     "electron:serve": "cross-env VITE_IS_ELECTRON=true vite",
+    "browser:serve": "cross-env VITE_IS_ELECTRON=false VITE_IS_BROWSER=true vite",
     "postinstall": "electron-builder install-app-deps && node build/download7z.js",
     "postuninstall": "electron-builder install-app-deps",
     "license:generate": "node build/generateLicenses.js",
@@ -82,6 +83,7 @@
     "@types/semver": "7.3.9",
     "@types/unzipper": "0.10.5",
     "@types/uuid": "8.3.4",
+    "@types/wicg-file-system-access": "2020.9.6",
     "@typescript-eslint/eslint-plugin": "5.38.1",
     "@typescript-eslint/parser": "5.38.1",
     "@vitejs/plugin-vue": "4.0.0",

src/browser/contract.ts

@@ -0,0 +1,14 @@
+import { EngineInfo, EngineId } from "@/type/preload";
+
+export const defaultEngine: EngineInfo = {
+  uuid: EngineId("074fc39e-678b-4c13-8916-ffca8d505d1d"),
+  host: "http://127.0.0.1:50021",
+  name: "VOICEVOX Engine",
+  path: undefined,
+  executionEnabled: false,
+  executionFilePath: "",
+  executionArgs: [],
+  type: "default",
+};
+
+export const directoryHandleStoreKey = "directoryHandle";

src/browser/fileImpl.ts

@@ -0,0 +1,178 @@
+import { sep } from "path";
+import { directoryHandleStoreKey } from "./contract";
+import { openDB } from "./storeImpl";
+import { SandboxKey } from "@/type/preload";
+import { failure, success } from "@/type/result";
+
+const storeDirectoryHandle = async (
+  directoryHandle: FileSystemDirectoryHandle
+): Promise<void> => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(directoryHandleStoreKey, "readwrite");
+    const store = transaction.objectStore(directoryHandleStoreKey);
+    const request = store.put(directoryHandle, directoryHandle.name);
+    request.onsuccess = () => {
+      resolve();
+    };
+    request.onerror = () => {
+      reject(request.error);
+    };
+  });
+};
+
+const fetchStoredDirectoryHandle = async (maybeDirectoryHandleName: string) => {
+  const db = await openDB();
+  return new Promise<FileSystemDirectoryHandle | undefined>(
+    (resolve, reject) => {
+      const transaction = db.transaction(directoryHandleStoreKey, "readonly");
+      const store = transaction.objectStore(directoryHandleStoreKey);
+      const request = store.get(maybeDirectoryHandleName);
+      request.onsuccess = () => {
+        resolve(request.result);
+      };
+      request.onerror = () => {
+        reject(request.error);
+      };
+    }
+  );
+};
+
+// ディレクトリ名をキーとして、Write権限を持ったFileSystemDirectoryHandleを保持する
+// writeFileに`ディレクトリ名/ファイル名`の形式でfilePathが渡ってくるため、
+// `/`で区切ってディレクトリ名を取得し、そのディレクトリ名をキーとしてdirectoryHandleMapからハンドラを取得し、fileWriteを可能にする
+const directoryHandleMap: Map<string, FileSystemDirectoryHandle> = new Map();
+
+const showWritableDirectoryPicker = async (): Promise<
+  FileSystemDirectoryHandle | undefined
+> =>
+  window
+    .showDirectoryPicker({
+      mode: "readwrite",
+    })
+    // キャンセルするとエラーが投げられる
+    .catch(() => undefined); // FIXME: このままだとダイアログ表示エラーと見分けがつかない
+
+export const showOpenDirectoryDialogImpl: typeof window[typeof SandboxKey]["showOpenDirectoryDialog"] =
+  async () => {
+    const _directoryHandler = await showWritableDirectoryPicker();
+    if (_directoryHandler === undefined) {
+      return undefined;
+    }
+
+    await storeDirectoryHandle(_directoryHandler);
+
+    // NOTE: 同一のディレクトリ名だった場合、後で選択されたディレクトリがそれ移行の処理で使用されるため、意図しない保存が発生するかもしれない
+    directoryHandleMap.set(_directoryHandler.name, _directoryHandler);
+    return _directoryHandler.name;
+  };
+
+// separator 以前の文字列はディレクトリ名として扱う
+const resolveDirectoryName = (path: string) => path.split(sep)[0];
+
+// FileSystemDirectoryHandle.getFileHandle では / のような separator が含まれるとエラーになるため、ファイル名のみを抽出している
+const resolveFileName = (path: string) => {
+  const maybeDirectoryHandleName = resolveDirectoryName(path);
+  return path.slice(maybeDirectoryHandleName.length + sep.length);
+};
+
+// FileSystemDirectoryHandle.getFileHandle では / のような separator が含まれるとエラーになるため、以下の if 文で separator を除去している
+// また separator 以前の文字列はディレクトリ名として扱われ、それを key として directoryHandleMap からハンドラを取得したり、set している
+const getDirectoryHandleFromDirectoryPath = async (
+  maybeDirectoryPathKey: string
+): Promise<FileSystemDirectoryHandle> => {
+  const maybeHandle = directoryHandleMap.get(maybeDirectoryPathKey);
+
+  if (maybeHandle !== undefined) {
+    return maybeHandle;
+  } else {
+    // NOTE: fixedDirectoryの場合こっちに落ちる場合がある
+    const maybeFixedDirectory = await fetchStoredDirectoryHandle(
+      maybeDirectoryPathKey
+    );
+
+    if (maybeFixedDirectory === undefined) {
+      throw new Error(
+        `フォルダへのアクセス許可がありません。アクセスしようとしたフォルダ名: ${maybeDirectoryPathKey}`
+      );
+    }
+
+    if (!(await maybeFixedDirectory.requestPermission({ mode: "readwrite" }))) {
+      throw new Error(
+        "フォルダへのアクセス許可がありません。ファイルの読み書きのためにアクセス許可が必要です。"
+      );
+    }
+
+    return maybeFixedDirectory;
+  }
+};
+
+// NOTE: fixedExportEnabled が有効になっている GENERATE_AND_SAVE_AUDIO action では、ファイル名に加えディレクトリ名も指定された状態でfilePathが渡ってくる
+// また GENERATE_AND_SAVE_ALL_AUDIO action では fixedExportEnabled の有効の有無に関わらず、ディレクトリ名も指定された状態でfilePathが渡ってくる
+export const writeFileImpl: typeof window[typeof SandboxKey]["writeFile"] =
+  async (obj: { filePath: string; buffer: ArrayBuffer }) => {
+    const path = obj.filePath;
+
+    if (path.indexOf(sep) === -1) {
+      const aTag = document.createElement("a");
+      const blob = URL.createObjectURL(new Blob([obj.buffer]));
+      aTag.href = blob;
+      aTag.download = path;
+      document.body.appendChild(aTag);
+      aTag.click();
+      document.body.removeChild(aTag);
+      URL.revokeObjectURL(blob);
+      return success(undefined);
+    }
+
+    const fileName = resolveFileName(path);
+    const maybeDirectoryHandleName = resolveDirectoryName(path);
+
+    const directoryHandle = await getDirectoryHandleFromDirectoryPath(
+      maybeDirectoryHandleName
+    );
+
+    directoryHandleMap.set(maybeDirectoryHandleName, directoryHandle);
+
+    return directoryHandle
+      .getFileHandle(fileName, { create: true })
+      .then(async (fileHandle) => {
+        const writable = await fileHandle.createWritable();
+        await writable.write(obj.buffer);
+        return writable.close();
+      })
+      .then(() => success(undefined))
+      .catch((e) => {
+        return failure(e);
+      });
+  };
+
+export const checkFileExistsImpl: typeof window[typeof SandboxKey]["checkFileExists"] =
+  async (file) => {
+    const path = file;
+
+    if (path.indexOf(sep) === -1) {
+      return Promise.resolve(false);
+    }
+
+    const fileName = resolveFileName(path);
+    const maybeDirectoryHandleName = resolveDirectoryName(path);
+
+    const directoryHandle = await getDirectoryHandleFromDirectoryPath(
+      maybeDirectoryHandleName
+    );
+
+    directoryHandleMap.set(maybeDirectoryHandleName, directoryHandle);
+
+    const fileEntries = [];
+    for await (const [
+      fileOrDirectoryName,
+      entry,
+    ] of directoryHandle.entries()) {
+      if (entry.kind === "file") {
+        fileEntries.push(fileOrDirectoryName);
+      }
+    }
+
+    return Promise.resolve(fileEntries.includes(fileName));
+  };

src/browser/preload.ts

@@ -0,0 +1,6 @@
+import { SandboxKey, Sandbox } from "../type/preload";
+import { api } from "./sandbox";
+
+const sandbox: Sandbox = api;
+// @ts-expect-error readonlyになっているが、初期化処理はここで行うので問題ない
+window[SandboxKey] = sandbox;