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

[yamachu]

内容

VOICEVOXのEditorをElectron非依存で実行できるようにします。

関連 Issue

ref #1204

スクリーンショット・動画など

out.mp4

その他

一部機能はまだブラウザ版では実装されていなかったり、FIXMEのままのものがあります。

非対応の機能は

• エディタからWindowの最大化、最小化などを行う処理
• エンジンの追加・削除
• エンジンの実行
• Windowの固定化（ピン機能）
• ネイティブテーマの変更機能（？）
• GPU周り

今後対応したい機能は

• プロジェクトが保存されていない状態で、プロジェクトを閉じようとした時の確認ダイアログ

また、ブラウザ版を考える上での残りタスク

• テストまわり
  • Workerで実行している処理のMockのやり方のサンプルの提供
  • Engineがない場合のEditor単体のテスト（MSWなどを使うイメージのもの）
• ダイアログまわり
  • <dialog> タグを使ったEditor非依存のダイアログ
• 他のエンジン（接続先）との連携
• Documentの整備
• UXの向上
• ブラウザに保存する設定について
  • migration
  • バージョニング
  • schemaに対応した値が入るように厳密な検査

追記

• Routingについて
  • VITE_IS_BROWSER=true npx vite build でビルドした後、nginx などで serve していない場合 /home の Editor 画面に遷移する方法がない
  • nginx で index.html に fallback 出来る環境であれば問題ない
  • 例えば GitHub Pages とかで serve するとなると、hash router を使う必要があり、src/router/index.ts の書き換えが必要
  • どっちにするかは serve する環境次第なのでどっちを default にするか決めないと…
  • serve する際は HTTPS じゃないと crypto 周りが使えないので、その辺りを考えないと
    • API 側も HTTPS じゃないと Mixed Content Error になりつらい

[yamachu]

まとめありがとうございますmm

ちょと認識違いそうな箇所や補足が必要そうな箇所があったので補足します

• 複数書き出しや書き出し先固定のことを考えると、ディレクトリ単位で書き出したほうがUXが良い
  • その代わり１ファイル書き出しのときにディレクトリパスとファイルパスの２回指定が必要

１ファイルの書き込みに見えて、ラベルの出力だったりテキストの出力もある場合があるので、ディレクトリ単位の権限が必要になっているという背景があります（GENERATE_AND_SAVE_AUDIOは1~3ファイルの書き込みが発生します）
例えば１つ書き出しの時に最大３回ファイルモーダルの出現を許容できればなんとかなりそうです（file名の取得の際にfilePickerを使ってFileHandleは取得できているため）
とは言えこれを実現するにはfileWriteなどのinterfaceを変える必要があります

• directoryHandleはダイアログ選択でしか得られず、書き出し権限はdirectoryHandleからしか得られない

ファイル単体のPickerからも権限は要求できますが、UXの観点から〜（上のコメント参照

• directoryHandleからディレクトリパスは得られない

#1345 (comment)
にも回答したように、パスは取得できないですね

• だからlastSelectedDirectoryHandleが必要

• writeFileに渡される引数にはそもそもファイル名しかない（ディレクトリ固定の書き出しの時は path.join で渡ってくるので hoge/fuga.wav みたいのは渡ってくるが）
• directoryHandleはダイアログでしか得られない
• そのため、ユーザ操作で取得した lastSelectedDirectoryHandle のような、ディレクトリを特定するなにかが必要

みたいな感じですね

---

仕様

• 書き出し先を固定してない場合はファイルダウンロードにしちゃう
  • ファイルパスを選んでもらう必要がなくなり、かなりすっきりするはず
    • Vuex側のコードは改修しないとだけど

無理やり a タグでダウンロードさせるみたいなやつを fileImpl に生やすことは可能かも………………？

• FILE_EXISTが使えないので上書き防止を無効化しないといけない

これはファイル名に / が含まれていなかったら false みたいな処理で実現できそうかなーみたいに思ってます

[Hiroshiba]

いろいろ認識修正ありがとうございます！！
ラベルやテキストの書き出しもあるというのは完全に忘れていました･･･。

仕様に関して、

無理やり a タグでダウンロードさせる

javascriptって未だにこの方法しかないんですね。。。

FILE_EXISTが使えないので上書き防止を無効化しないといけない

これはファイル名に / が含まれていなかったら false みたいな処理で実現できそうかなーみたいに思ってます

あ、ダウンロードさせる形だとブラウザが必ず上書き防止してくる（(1)とかつける）ので、上書き防止をOFFにしていてもONのような挙動になるから、設定をON固定にせねば、という意図でした！

[yamachu]

上書き防止をOFFにしていてもONのような挙動になるから、設定をON固定にせねば、という意図でした！

あーーーこれをやるとするとBrowserの場合は固定でstoreから返すかUIの方で制御するかみたいのが出てくるので、例えばstoreやUIに出すと共通コードに漏れ出ちゃいますね……
どこであっても、このための特例処理を入れると厳しくなるな…

50bd37c
aタグダウンロードをやってみましたが、ディレクトリを指定しても macOS Chrome でデフォルト運用だと ${Home}/Downloads にダウンロードされますねー
うーーーーーん、これはどうしよう
やはりlastSelectedDirectoryHandleがないと対象ディレクトリに投げるが出来ないのか…

[Hiroshiba]

動かしてみました、しっかりダウンロードできました！！
（なぜかwavファイルが２回ダウンロードされてました！！）

共通化に関しては今後の課題にしちゃって、今はこんな感じでマージしてあとから変えていくのが良いのかなと！
特別な処理と言っても、ファイル書き出しかダウンロードかを返す関数をSandboxに持たせて依存を逃がせば、GUI部分は完全に共通化できる気がしています。
再度レビューします！！

[Hiroshiba]

PR全部見ました、もうマージ間近ですね！！！！！！！

READMEに軽くブラウザ版起動方法を書いてもいいかもとか思いました。
ご面倒であればこっちで書いちゃいます！！
雰囲気こんな感じ･･･？

### ブラウザ版起動方法（開発中）

別途エンジンを起動し、以下を実行して表示された localhost へアクセス。

```bash
npm run browser:serve
```

[Hiroshiba]

LGTM！！！！！！！！！！！

いくつか提案していますが、マージ後に個別issue作るかタスクリストissue作るとかして、そこにいろいろメモれば良いのかなと思いました。

今後の方針どうしましょう。
とりあえずリリース予定は今のところ無いので、いろいろリファクタリングしたり、仕様を詰めていくのが良いのかな～とふんわり考えてます。
とりあえずリストアップ･･･？

どうでしょう、道は険しいながらも、ブラウザ版を作っていくのだいぶ面白いのかなと思ったのですが、より洗練していきませんか 👀 @yamachu
ひとまずの出口としては、VOICEVOXブラウザ版をデモ版としてVOICEVOXホームページから飛べるようになっている形がかっこいいのではと想像しています。

あるいはプロダクト開発ではなく、テスト方面の充実を伸ばすのも楽しそうに感じてます。
自動テストとか楽しそう。

このあたり興味とマッチするものがあれば･･･！！！！

[Hiroshiba]

@y-chan
設計レベルとかでなにかコメントとかあれば･･･！
（判断とか考えとか、メンテナレベルでのわからない点もあればなんでも聞いていただければ）

[yamachu]

超巨大なPRのレビューありがとうございましたmmmm

Issueで最初のゴールを明確にして進めれば、もう少し刻んで進められただろうなとか、コードのレビューの負荷を抑えられたかもしれませんね…
次からはもう少しうまく進められるように調整してみます

#1345 (review)

そうですねー積み残しタスクは結構多いのでIssueにまとめておきたいなと
あとミニマムゴールまでどういうタスクがあるのかとかその辺りも含めもうちょい議論していきたいなと

まずはブラウザ版を育てつつも、出てきた関連タスク…例えば設定の保存についてだったり、FileI/O周りの整理…とかかなーと
その辺りを攻めていこうかなとは考えています

[Hiroshiba]

Issueで最初のゴールを明確にして進めれば

最初は音声合成まででも良かったかもですね･･･。今思えば、ですが。
こちらもゴールまで遠そうだったら提案できるよう心がけていきたいと思います。

あとミニマムゴールまでどういうタスクがあるのか

結構遠いゴールとしては「大体の機能のe2eテストが書けるようになる」とか「ブラウザ版デモページ」がありそうです。
その両方の最大公約数をタスクに掲げるのが良さそう？（まあ設定周りとFile IO周りになりそうですが）
この場合、先にゴール側に近い部分作っても良い気がします。
e2eテスト１つ書いてみるとか、実際開発版ページデプロイするとか！
（実際開発版をデプロイしておくの面白い気がしました。エンジンはローカルで立ち上げてもらいましょう。）

あるいは具体的なe2eテストを１つ設定するとタスクが明確になる気がします。例えば

1. 起動（アクセス）
2. テキスト入力
3. 音声合成
4. テキスト欄追加
5. キャラ変更
6. テキストファイルインポート
7. 全音声の書き出し（ダウンロード）
8. プロジェクトファイル保存（ダウンロード）
9. 全ファイルのチェック

の自動テストとか！！

今回のPRで感じたのですが、ブラウザアプリとかいう結構知識がないようなところを進む必要があるので、たまに調査タスクがあると進みやすいかもとか思いました。
File I/Oに関して実現難度やUXの障壁が高いと分かれば、現状の仕様やコードの方を変えちゃうというのもアリなはず。

---

まだゴール感ふわっとしちゃってますが、これゴールでいいかというのがあればそのタスクリストを作っちゃうのどうでしょう。
さすがにもうちょっとゴールが具体的な方がやりやすいということであれば、ここでもissueでもDiscordでもいいので話せれば！！

[Hiroshiba]

とりあえずマージしようと思います･･･！！
あ、netlifyとかでmainブランチをデプロイし続ける仕組みとかあるとちょっと面白いかもとか思いました！

新たなissueの作成どうしましょう？
時間なかったりしたら僕がなんか作っとくので言っていただければ！！