特定のエンジンを選択した際にエンジンリストが消失する

[nmori]

不具合の内容

・特定のエンジンにおいて、エンジン詳細を参照したタイミングで、全エンジンの表示が消失する

現象・ログ

[01:45:22.037] [error] TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at fn (app://./js/webpack:/src/components/EngineManageDialog.vue:266:53)
    at e (app://./js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:852:19)
    at hSlot (app://./js/webpack:/node_modules/quasar/dist/quasar.esm.prod.js:6:26585)
    at Proxy.call (app://./js/webpack:/node_modules/quasar/dist/quasar.esm.prod.js:6:304545)
    at renderComponentRoot (app://./js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:898:44)
    at w.fn (app://./js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5702:34)
    at w.run (app://./js/webpack:/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:187:25)
    at fn (app://./js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5745:56)
    at lt (app://./js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:157:36)

再現手順

・フォルダ指定でSHAREVOX 0.1.7を追加
・再起動する
・エンジンの管理からSHAREVOXを選択

期待動作

・リストは消失せず、エンジンの詳細が表示される
・エンジン側の問題であれば、警告がでるか例外処理が行われる

VOICEVOXのバージョン

0.14.1

OSの種類/ディストリ/バージョン

v0.14.1

• Windows
• macOS
• Linux

Windows 10 Pro 64bit 22H2 (19045.2486)

その他

[sabonerune]

確かSHAREVOX 0.1.7が提供する/engine_manifestエンドポイントの仕様がVOICEVOX 0.14.0の仕様と異なるため発生するものだった記憶があります。

[y-chan]

@sabonerune さんのおっしゃる通りの問題だと思います。
マルチエンジン機能に対応したバージョンのエンジンを指定しなければならないです。
SHAREVOX 0.1.7はマルチエンジン機能に未対応ですので、このような問題が発生します。(もし、SHAREVOXにおいてマルチエンジン機能を利用したい場合は0.2.0-preview.6のvvppをご利用ください)

ただ、エンジンを追加する前に、engine_manifest.jsonのバリデーションなどで、そもそもこのような未対応エンジンを追加できてしまう問題に対応できる可能性があるのでIssueはクローズせず留めておこうかなと思います。

[Hiroshiba]

かなり古いエンジンを試した場合でもちゃんと稼働するのがまあベストで、であればengine_manifest.jsonは存在しないかもしれませんね･･･。

エラーが起きても落ちない形にできれば一番良いのかなと思いました！！

@nmori さん、もしよければ挑戦してみませんか･･････？
というのも、naoさん自身がアプリケーションを開発・リリースされていて、UX周りに明るそうな印象を持っています。
VOICEVOXはユーザー目線を大事にしているので、そこもできてプログラミングもできる方と一緒にプロダクトを開発して切磋琢磨したいなと思ったのでお声掛けしてみた次第です！

たた結構入り組んでいる先（Vuex storeという概念の中）なので、大変な箇所かもしれません。
もしわからない点あればdiscordで気軽に聞いて頂ければという感じです。
もしよければ･･･！！

[nmori]

@Hiroshiba さん、お声がけ頂きありがとうございます。
フロントエンドの構築は苦手な技術領域ではあるんですが、
習得していきたい領域でもあります。

流儀や作法をこれから身に着ける中での作業になるので
どこまでフィードバックできるかわかりませんが、
せっかく想いを寄せて頂いたので　チャレンジしたいとおもいます。
（まずは開発できる環境と周辺環境の読みほどきから始めます）

[Hiroshiba]

ありがとうございます！！
なにかあればこちらでもDiscordでも気軽に聞いて頂ければと思います！！

[nmori]

なんとなくの流れを理解しました。

エンジンの素性を　/engine_manifest　に問い合わせているが
未対応エンジンでは　json に　supported_features　の項目がないから undefined or null になって、
表示を作る際に例外が発生してテンプレート処理が中断する、という流れですね。

単純にエラーが出ないようにするなら、
EngineManageDialog.vueのSupportedFeaturesFromJSONTypedで
未定義の場合の処理（規定値）をきめれば対応できそうですが、
「そもそも定義がない時点でおかしい」とするなら、登録を拒否する方法もありますね。

設計方針としては、どちらがよいでしょう？
(現時点で登録されてしまっているケースがあるから、実は両方必要…！？）

それから、今後　SupportedFeatures　の定義が増減が想定される場合、
設定の一部が見当たらない場合の挙動も　考えておく必要はありそうですね

[Hiroshiba]

調査ありがとうございます！！

未対応エンジンでは　json に　supported_features　の項目がないから undefined or null になって、

あーーーなるほどです！！

設計方針としては、どちらがよいでしょう？

難しい判断ですね･･･。
「登録を拒否する」はやりたい、「既定値」もやっておきたい･･･という感じになるかなと思いました！
既定値は全部falseにしちゃって「未対応エンジンです」みたいな案内を出すと良さそう･････････？

SupportedFeaturesが変わった場合（特に増えた場合）は、互換性を考えて値をoptionalにして「値がない＝今までと変わらない」となるように設定パラメータの意味を調整したいと思います！

[nmori]

もう少しシンプルに考えました。

まず、supportedFeatures がないときは
<span v-else>（取得に失敗しました）</span> に飛ぶようにして
処理をしてしまう方が、不正確な情報を返すよりよさそうです。
（これで、Issueで報告した表面的な問題は解決します）

試した感じでは、 <ul v-if="engineManifests[selectedId].supportedFeatures">　と
書き換えることで実現できそうです（言語に自信はないけど、動作としてはこれでいけそう）

そのうえで、現在フォルダを指定して追加する場合に
ADD_ENGINE_DIR　で、未検証なままリストに追加しているようなので、
追加可能かを判断する工程を1つ挟むのがよさそうです。

（このとき、エンジンはまだ起動していないので、
　直接フォルダ内のjsonをパースして判断する感じなのかな？とイメージしています）

この場合、指定されたフォルダのどの情報を参照すると
対応しているエンジンと判断できるか、ヒントを頂けると嬉しいです

[Hiroshiba]

完璧だと思います！！

今確認したところ、ちょうどengine_manifest.jsonをvalidateしている場所がありました。

voicevox/src/background/engineManager.ts

Lines 455 to 461 in 7244b3d

	if (
	["name", "uuid", "port", "command", "icon"].some(
	(key) => !(key in manifestContent)
	)
	) {
	return "invalidManifest";
	}

ここでjsonにsupported_featuresもあるかをチェックするのがまさにそうなのかなと！！

[sevenc-nanashi]

ここ、minimumEngineManifestのzodで変えるべきだと思ってたので一緒に変えちゃってもいいかも

[nmori]

ん… CIチェックでひっかかりましたか
（言語仕様をもう少し理解したほうがいいのかもしれない、すみませぬ）
もうちょい見直してみます。

（ちなみに、プルリク提出前にCIをやる手段はあるでしょうか？）

[y-chan]

CI自体の実行はできませんが、CI時にテストしているものが以下なので、それぞれを実行して問題なく通れば(エラーを解消できれば)CIも通るはずです！

npm run typecheck
npm run lint
# lint でおかしかったものはfmtで修正できるので、lintがエラーを吐いたら実行する
npm run fmt
# ビルドテスト
npm run build:build_pnever
# typos(typos-cli)の導入が必要
typos

[sevenc-nanashi]

npm run lintでLinterが、npm run typecheckで型チェック走ります。自分はエディタにESLintのプラグインを入れて即時に出るようにしてます。

[sevenc-nanashi]

型チェック、Linterに怒られている例。（Neovim）

[nmori]

色々教えて頂き、ありがとうございます。

まずは、lint の実行および ESlint の導入で、
エラーを事前に認知できるようになりました。

[Hiroshiba]

VSCodeでしたら、拡張機能にpritter・ESLint・Volarを入れつつ、VSCodeの機能で「保存時にフォーマットする」をONにすれば大体うまくいくと思います･･･！

この辺りwebフロント初学者向け情報としてREADMEにあると良いかもと思いました。
もし他に詰まったところとかあれば参考にお伺いできると嬉しいかもです･･･！！

[nmori]

ページにある「開発の始め方」をみてVOICEVOXのテスト環境を
動かすところまでは出来たので、始める点は問題ないかと思います。

今回ひっかかった点は、「事前のコードチェック」ぐらいかとおもいます。

初学者向けに情報を頂けるのだとしたら、
・コード提出前の推奨手順
・Issue→PRまでの手順
・言語や技術に関する部分のヒント（どのLvの初学者と仮定するか次第ではありますが）
あたりの情報があると助かるなぁと思いました。

＃もしかしたら、ちょっと時間が取れたときに
＃貢献者向けドキュメントを書いてPRしてみる手もありですか？

[Hiroshiba]

OSSでたまに見かけるcontributing guide（貢献者ガイドライン）ですね！！
作って頂けるととても助かります！！！　docsディレクトリに良い感じに作ってみて頂けると！！！