Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

イントネーションと長さのパラメータを直接入力可能となるように修正 #1690

Open
wants to merge 24 commits into
base: main
Choose a base branch
from

Conversation

sheltie-fusafusa
Copy link
Contributor

内容

以下の改修を行いました。
・イントネーションのパラメータ値を直接入力可能に修正
・イントネーションの説明欄に直接入力可能な旨の説明を追加
・長さのパラメータ値を直接入力可能に修正
#1513 の問題について、今回改修範囲の該当部分を修正

関連 Issue

ref #486

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

イントネーションの直接入力
イントネーション

長さの直接入力
長さ

その他

かなり時間がかかってしまいましたが、対応を行ったためプルリクを提出します。
状況が変わって不要となった改修であればリジェクトでお願い致します。

# Conflicts:
#	src/components/AudioParameter.vue
# Conflicts:
#	src/components/AudioParameter.vue
# Conflicts:
#	src/components/AudioParameter.vue
# Conflicts:
#	src/components/AudioDetail.vue
#	src/components/AudioParameter.vue
@sheltie-fusafusa sheltie-fusafusa requested a review from a team as a code owner January 6, 2024 07:57
@sheltie-fusafusa sheltie-fusafusa requested review from Hiroshiba and removed request for a team January 6, 2024 07:57
Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

プルリクエストありがとうございます!!!
とても良い感じなのかなと思いました!!!

ちょっと込み入った話になってしまうのですがお聞きしたいことが1つ・・・!

「以前のUIで表示されていたマウスホバー時のバッジをクリックしたら、今のプルリクのように全パラメータが表示&編集可能になる」という実装は難しそうでしょうか?
バッジというのは、↓で出ている数値入りの緑四角です。

というのも、VOICEVOXは「ぱっと見で使える」ことを売りにしていて、全パラメータが最初から全部表示したときの威圧感を避けたい思いがあるためです。
もしバッジクリックで編集モードへ移行する形ができるなら嬉しいのですが、実装の難度がわからないなと・・・。

一旦実装の難度感を知りたい感じです。とても難しいとかであればちょっと再考したいなと・・・!

===の警告を修正
@sheltie-fusafusa
Copy link
Contributor Author

@Hiroshiba
ご意見頂きありがとうございます。
こちら、軽く修正見てみて難易度を確認してみます。
(バッジにクリックイベントを仕込んで、クリックされたら入力欄を表示する みたいな方向で確認します)

一旦、14日を目処に回答いたします。

@Hiroshiba
Copy link
Member

検討ありがとうございます!!ぜひぜひ!!!

@sheltie-fusafusa
Copy link
Contributor Author

@Hiroshiba
こちらざっと確認してみました。
お話頂いた「バッジをクリックで編集モードに移行する」は、正直少し難しそうでした。

・現状、スライダーからカーソルが外れると、バッジの表示も消えてしまうためバッジの表示の作りを変える必要あり
 →その為の方法は未調査
・各種イベントの作成
 →バッジクリックで編集欄を表示→これは実現できそうでした
 →編集終了で編集欄を非表示に→方法は未調査

あたりを調査、実装する必要がありそうです。

代替案として、スライダーにカーソルを合わせたときのみ編集欄を出すだけであれば簡単に実装できそうです。
動作は以下のようなイメージになります。
代替案

他機になる点がありましたら、追加で調査しますのでお知らせください。

@Hiroshiba
Copy link
Member

Hiroshiba commented Jan 16, 2024

おー!!代替案とても良さそうに見えます!!この手があったかという感じです。
(そういえばパラメータ欄はこんな感じだったなと)

ちなみに今のバッジっぽい見た目に寄せることは可能そうでしょうか?
どんな見た目が良いのか(枠線など)は試してみないとわからなそうですが、デザイン変えやすいかが気になってます!

あと今のmainブランチの実装はたしかAlt押しながらホバーすると周りのピッチ値も出てくるのですが、そこも再現できそうでしょうか?

この2ついけそうなら、そちらの形が良いと思います!!ぜひぜひ!!!

@sheltie-fusafusa
Copy link
Contributor Author

承知しました。
見た目とAltキー周りの動作について確認してみます。

@Hiroshiba
Copy link
Member

@sheltie-fusafusa
すみません、「Alt押しながらホバーすると周りのピッチ値も出てくる」機能すが、まだ入ってませんでした! 🙇

@sheltie-fusafusa
Copy link
Contributor Author

デザイン周りを試していますが、現状バッジの見た目に寄せるのはちょっとむずかしそうでした。
スクリーンショット 2024-02-18 13 44 54

現状の問題点は

・バッチのように角が丸くならない(border-radiusを指定してみましたが、期待した結果にならず)
・スライダーのhoverイベントを工夫しないとインプットエリアの高さを変えられない
 インプットエリアの高さを小さくし、スライダーと離れてしまうとhoverイベントから外れてしまい、
 インプットエリアの表示が消えてしまうため
 (現在はスライダーとインプットエリアが被っているので、
 hoverイベントを有効にしたままインプットエリアにカーソルを当てられる)

ALTキー押下時の挙動は試せていませんが、現状ではデザイン変更を変えにくい作りとなっています。

@Hiroshiba
Copy link
Member

なるほどです!!!!試していただきありがとうございます!!!
デザインは必要であればこちらで頑張るので、取り込む方針で進めさせていただければと思います!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants