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

複数選択&複数変更機能 #457

Closed
1 of 2 tasks
Hiroshiba opened this issue Nov 8, 2021 · 34 comments · Fixed by #1664
Closed
1 of 2 tasks

複数選択&複数変更機能 #457

Hiroshiba opened this issue Nov 8, 2021 · 34 comments · Fixed by #1664

Comments

@Hiroshiba
Copy link
Member

Hiroshiba commented Nov 8, 2021

内容

テキスト欄(AudioCell)を複数選択し、それらのパラメータを一気に変更する機能があると便利そうです。
調整していったあとで音量や話速を変更したくなったときに便利だと思います。

Pros 良くなる点

編集が結構楽になる

Cons 悪くなる点

ActiveなCellの他にSelectedなCellという概念が必要になる

実現方法

ActiveAudioKeyという、現在アクティブになっているテキスト欄を把握する仕組みがVuex内にあって、これを参考に選択中Cellみたいなのができるかも?

タスクリスト

  • macOSで動かないe2eテストがあるのを解消
  • 台本欄の空いてる箇所をクリックすると選択解除
@Hiroshiba
Copy link
Member Author

プリセットができたのと、テキスト欄のパラメータコピーができたこともって、ちょっと優先度下げても良いのかなと思いました。
ということで下げちゃいます・・・!

@k-chop
Copy link
Contributor

k-chop commented Jan 8, 2023

memo:
複数エンジン対応が行われたので、
選択したAudioItemの中に一部話速が調整できないエンジンが混ざる、ということが起こりそう

@Hiroshiba
Copy link
Member Author

基本的に対応していないAudioItemパラメータはエンジン側で無視されるので、話速とかは大丈夫だと思います!

ただモーフィングの場合は別で、そもそも叩くエンドポイントが別だったり、同じエンジン内のキャラしか選べないとかもあったりするので、大変かもしれません・・・。
(とりあえずモーフィング部分だけ避けるとかはありそう・・・?)

@sevenc-nanashi
Copy link
Member

sevenc-nanashi commented Aug 3, 2023

ちょっと考えてみました。

操作周り

// プライマリーな選択
declare let activeAudioKey: AudioKey
// 全ての選択されているAudioCell
declare let selectedAudioKeys: Set<AudioKey>
// プロジェクト内の全てのAudioCell
declare let allAudioCells: Array<AudioKey>

// 通常クリック
// selectedAudioKeysをクリックしたAudioCellだけにし、(=全削除→追加)
// activeAudioKeyを変更する。
function click(clickedItem: AudioKey) {
	selectedAudioKeys = [clickedItem];
	activeAudioKey = clickedItem;
}

// Ctrl+クリック
// selectedAudioKeysにクリックしたAudioCellを追加し、
// activeAudioKeyを変更する。
function ctrlClick(clickedItem: AudioKey) {
	selectedAudioKeys.push(clickedItem);
	activeAudioKey = clickedItem;
}

// Shift+クリック
// activeAudioKeyだったAudioCellからクリックしたAudioCellまでのAudioCellをselectedAudioKeysに追加し、
// activeAudioKeyを変更する。
function shiftClick(clickedItem: AudioKey) {
	selectedAudioKeys.push(
		allAudioCells[
			allAudioCells.index(activeAudioKey)..
			allAudioCells.index(clickedItem)
		]
	)

	activeAudioKey = clickedItem;
}

影響を受けそうな操作

  • 一つだけ書き出し 複数選択:複数書き出しを追加 #1604
    • selectedAudioKeysを書き出しに変更する?
    • 既存をactiveAudioKeyを書き出すようにし、selectedAudioKeysを書き出しは別で用意する?
  • 全体のイントネーションをリセット
    • selectedAudioKeys全てに適用
  • 話者変更 複数選択:キャラクターを変更できるように #1546
    • selectedAudioKeys全てに適用
  • AudioCell削除:マウス(アイコン)
    • selectedAudioKeys全てを削除
  • AudioCell削除:ショートカットキー
    • selectedAudioKeys全てを削除
    • Ctrl+Delあたりに隔離して、既存はactiveAudioKeyとか?
  • ドラッグ&ドロップ:実装がしんどい(vue-draggableとの共存)
    • selectedAudioKeys全てを移動
    • selectedAudioKeysが離れている場合はまとめる(大文字がselectedAudioKeys内として、ABcDe|ABcDeにドロップしたらABDceになるように)
  • 詳細調整欄:表示/変更(変更なし)
    • activeAudioKeyのAudioCellを表示
  • パラメータ調整欄:変更 複数選択:AudioInfo対応 #1577
    • 理想としては:
      • クリックや数値入力で変更:=的な動作
      • マウスホイールで変更:+=的な動作
    • Quasarに乗っかってる内は多分出来ないので=で良さそう
  • パラメータ調整欄:表示 複数選択:AudioInfo対応 #1577
    • activeAudioKeyを表示
    • selectedAudioKeys全てが同じなら通常表示、少しでも違ったら「???」みたいな表示
  • 連続再生:需要がなさそう
    • selectedAudioKeysのを連続再生する?

@thiramisu
Copy link
Contributor

thiramisu commented Aug 3, 2023

一つだけ書き出し
selectedAudioKeysを書き出しに変更する?
既存をactiveAudioKeyを書き出すようにし、selectedAudioKeysを書き出しは別で用意する?

1つだけ書き出しよりは以下の3つの対象を変更すべきな気がします。

  • 音声書き出し
  • 音声を繋げて書き出し
  • テキストを繋げて書き出し

メニューバーに関しては、「選択範囲」という項目を作ってしまう手もあるかと。
ツールバーに関しては、個人的には複数選択時専用のボタン群に変えてしまうのが、複数選択中であることも伝えられて良いと思っているのですが、本来のモードのボタンを使いたい需要もあるかもしれず、正解は分かりません…
ここら辺に関しては、同じく「状態」を提示するものとしてUIを共用できるかと思ったので、下記issueで少し話題に出しました。

複数選択で思いついたのですが、複数選択のUIは多分ツールバーを乗っ取る形になると思うので、それに合わせてこの機能もツールバーを乗っ取って表示する手もある気がしてきました。

これはどうなんでしょう。「N個選択されています」みたいなのが表示されるということですよね。
僕が知るツールでそういう表示があるのは意外と珍しいかもです。google driveくらいかも。
ツールバーを乗っ取るのは結構たいへん&他のツールバーボタンが押せなくなるのでそこそこ反対気味ですが、例えばその下あたりに新たにステータスバーを作るとかはありかも・・・?

スマホの複数選択みたいなイメージでしたが、確かにPCだと珍しいかもしれませんね…ウーム難しい
スマホの感じを想像していたので、他のツールバーが押せなくなるというよりは「その実行中の動作に合ったツールバーに置き換わる」みたいなイメージでした。テキストのみ編集中なら、「[キャンセル] テキストのみ編集中… [適用]」、複数選択中なら「[キャンセル] 〇行選択中… [再生] [停止] [書き出し] [行を削除」みたいな。その動作中はツールバーボタンを使えなくても良いと思うですが、どういう場合に問題になりそうでしょうか?

ステータスバーに関しては、一時的な表示にすると1行目を選択した場合の挙動が怪しそうですし、常に表示するのは狭くなるので避けたい気がします。

例えば複数選択中にツールバーにある「1つだけ書き出し」を押すと選択しているものを書き出せそうですが、複数選択中表示によりボタンが隠れてしまう可能性がありそうです。
まあツールバーは任意の機能が実装される可能性があるので、何かを表示する場所として使う場合は機能的に問題がないもの同士かを意識する必要がありそうだなぁと。

ステータスバーに関して

そうなんですよねー・・・・・。


マウスホイールで変更:+=的な動作
Quasarに乗っかってる内は多分出来ないので=で良さそう

パラメータ調整欄のホイールイベントはそこだけ別で設定できるので+=が技術的には割と簡単に可能そうな気はします。

他に気付いたこととしては以下があります。

  • 行番号順が自然だと思うので、push後には行番号順にsortが必要そう
  • 選択範囲の変更は「元に戻す」ができるように(=COMMANDに)しないと整合性チェックが面倒そう

ctrl操作は無しにしてshiftの動作のほうだけを採用するなら以下あたりを考えなくても良いかとは思いました。

ドラッグ&ドロップ
selectedAudioKeysが離れている場合はまとめる

  • 行番号順が自然だと思うので、push後には行番号順にsortが必要そう

@sevenc-nanashi
Copy link
Member

Ctrl操作、例えば話者AのAudioCellを選択していくみたいな需要があるのでかなり大事かなぁと思ってます。

@Segu-g
Copy link
Member

Segu-g commented Aug 3, 2023

Ctrl操作、例えば話者AのAudioCellを選択していくみたいな需要があるのでかなり大事かなぁと思ってます。

これはプリセットの適応について実装していた時に議論していた機能なんですが、フィルタ機能や全選択機能が別にあっても良いかもしれません.
とはいってもこれはまた別の機能についての話なので、追加するならCtrlが先なのかなと思いました.

@sevenc-nanashi
Copy link
Member

sevenc-nanashi commented Aug 3, 2023

フィルタ機能や全選択機能が別にあっても良いかもしれません.

これ、需要ありそうですね。

  • プリセット
  • 話者
  • 話者(スタイル込み)

あたりで絞り込めると嬉しそうな気がします。
また、「現在より前/後のAudioCell」(Shift+Home/End)「全てのAudioCell」(Ctrl+A)あたりも需要がありそうです。

@thiramisu
Copy link
Contributor

thiramisu commented Aug 3, 2023

フィルタ機能、範囲選択だけに対してではなくて表示全体に対しての機能(範囲選択も連動して変わるだけ)の方が便利かも?と思いました、ちょっとissue作ってみます→作りました

@Hiroshiba
Copy link
Member Author

Hiroshiba commented Aug 3, 2023

@sevenc-nanashi 洗い出しありがとうございます!!!
個人的な感想ですが、複数選択に依存してしまう機能が思っていたのの半分ぐらいしかなかったのでかなり驚きました。
これだったら割と実装まで近い・・・・かも・・・?


@thiramisu

1つだけ書き出しよりは以下の3つの対象を変更すべきな気がします。

  • 音声書き出し
  • 音声を繋げて書き出し
  • テキストを繋げて書き出し

1つ書き出しを複数選択の機能にするか、全部書き出しを複数選択の機能にするかという観点だと、前者の方が良いのかなと思いました!

長くなるので詳細こちら

というのも、複数選択の機能になった方は、複数選択中に使えなくなっちゃうんですよね。

例えば全部書き出しを複数選択の機能にしちゃった場合、複数選択中に全部書き出しができなくなります。これは全部書き出しを動画制作フローによく使っている場合はわざわざ複数選択を解いてから保存する必要があるので。ちょっと不便になる気がします。
逆に1つ書き出しを複数選択の機能にした場合は、1つ書き出しができなくなっちゃうんですが、そもそも1つ書きだししたい場合は複数選択しないので、潰すならこっちかなと思いました。

まあさらに発展として、1つだけ書き出し・複数選択だけ書き出し・全部書き出しの3機能を全提供すればそれはそれで解決なのですが、まあ前者2つはまとめちゃって良いかなと!

あと音声を繋げて書き出しテキストを繋げて書き出しに関しては、ちょっと自信がないのですがそもそも複数選択されているものだけこの処理をしたいという需要がもしかしたらほとんどない気がします。
音声を繋げて書き出しはあってもいいかも・・・?

ちょっとこの辺りは議論の余地があるかもと感じました。
とはいえ名称をどうするかという話だと思うので、とりあえず実装しちゃって後で変えちゃうのも全然ありかなと!

ツールバー

この方針は複数選択モード用のUIが表示されるメリットと、既存のツールバーUIが消えるというデメリットがあってトレードオフの関係になっていると思います。
なのでツールバーを利用しない他の方法で行けるのであれば、デメリットを回避しながらメリットだけを享受できるはずです。
なので他の方法でしっかり案内できる方法考えて、そのような方法はないという結論にだったらツールバーの利用を検討するのはどうでしょう?


Shift+クリック
Ctrl操作
フィルタ機能
全選択機能

操作に関してですが、色々最初から盛り込むとレビューがめちゃくちゃ大変になっちゃうので、最初は必要最低限の1機能だけで実装していただけるとめちゃくちゃ助かります!!
(10~20行くらいの追加だったら追加操作もまあ・・・!)

@sevenc-nanashi
Copy link
Member

とりあえず操作だけで一回PRします。

@Hiroshiba
Copy link
Member Author

複数選択機能を @sevenc-nanashi さんが実装してくださりました、ありがとうございます!!!

複数変更機能ですが、仕様や実装をどうすべきか結構煮詰める点があるのかなと感じてます。
ざっとこの3点・・・?

  • 複数選択時の変更の実装をどうするか
    • SET系のコマンドを総入れ替え・・・?
    • 表示周りを気にする必要がないキャラクター変更で実装してみるのが良さそう
  • パラメータ欄の表示をどうするか
    • 違ってたら「???」と表示?
    • 参考:Illustrator
    • 参考:Google Slides(パラメータが違っていた時はデフォルトを表示)
  • 詳細設定欄の表示をどうするか
    • activeAudioKeyのものを表示?

@sevenc-nanashi
Copy link
Member

パラメータ欄の表示をどうするか

  • パラメータが違っていた時はデフォルトを表示

これ、かなり難しそうですね(エンジン毎にデフォルトが異なる可能性を考慮すると)

ので、異なる場合は

  • スライダーは平均、
  • テキスト欄は空欄
    で行こうと思ってます

@Hiroshiba
Copy link
Member Author

Hiroshiba commented Sep 20, 2023

@sevenc-nanashi
デフォルトが異なる可能性、なるほどです!
まーーーー流石にVOICEVOXが想定しているデフォルト値で問題ないだろうな〜とは思います。拘り始めるとエンジンごとの値域とかも考えなくちゃいけなくなるし。

ちなみに平均にするのって理由とかあったりされますか?
こういうのはユーザーに慣れてもらわないといけないから処理を揃えたいけど、平均できないUIで困りそうだな〜と思った次第です。モーフィングのキャラ選択のとこととか、あと将来トグルが出たときとか。

パラメータ欄の表示、一番良いのは値が異なっていることがわかるUIかもと思いましたが、実現難しそうですかね。。
例えばsliderはundefined、テキスト欄は???等のプレースホルダー+空欄、みたいな・・・。

次がデフォルト値表示が良さそうに感じました。パラメータが違うっぽいことを推察できるので。
これも無理そうならとりあえずactiveなの表示とかが将来の変更にも強くて丸い気がしました。

@sevenc-nanashi
Copy link
Member

sevenc-nanashi commented Sep 20, 2023

ちなみに平均にするのって理由とかあったりされますか?

複数ある中で一つしか値を出せない場合は平均かなぁって感じですね。処理も共通化できますし(全て同じ値なら平均も同じ)
また、選択していって違うのが選択されるとスライダーが動くので異物が紛れ込んだ感を出せるかなぁって感じです(語彙力)

これも無理そうならとりあえずactiveなの表示とかが将来の変更にも強くて丸い気がしました。

これでも良さそうですね。表記はactiveのだけど変更は全てに適用、みたいな

@Segu-g
Copy link
Member

Segu-g commented Sep 20, 2023

おそらく平均派とundefined派で想定している操作時の挙動が違うように感じました。

想像ですが、undefinedは選択中のアイテム全てに同じパラメーターを設定する事を想定していて、平均値は現在のパラメータに対して相対的に値を変化させる事を考えているのではないでしょうか。

パラメータ調整欄:変更
クリックや数値入力で変更:=的な動作
マウスホイールで変更:+=的な動作

クリックで一括代入的な挙動をするときは、平均値の表示をしてしまうと、全体が同じ値なのかばらついているのか判別がつかないので混乱の元になりそうです。
一方 マウスホイールで変更 のように相対的に変更する際には値を表示しないと調整量が分からないので平均値などの代表値を表示する必要があります。

選択したアイテムで値が異なるときにはundefinedにしてスライダーを無効化するのが最も直感的ですが、
値が異なる状態をグレーアウトなどの色覚的な変化で差別化すれば平均値でも問題ないのではないかと思います。

@Hiroshiba
Copy link
Member Author

Hiroshiba commented Sep 20, 2023

@Segu-g なるほどです!!!
相対的に変更できるようにするとかはちょっと一旦置いといて、

色覚的な変化で差別化すれば平均値でも問題ないのではないかと思います。

これはすごくなるほどと思いました。いろんなUIで適用可能な差別化方法があれば良さそう。ただまあ、disableと勘違いしないようにするのが難しそう。


個人的には一旦どうを実装するかはさておいて、activeなのを表示しておき、全部できてからどうするか考えるとかもありかもと思いました。
(なんか他にも問題が出てきそうな気がしないでもないので、ちょっと寝かせておきたいという気持ちもあります)

@Hiroshiba
Copy link
Member Author

テキストエディタはshift+クリックでテキストを範囲選択できるのですが、それが複数選択の操作に上書きされることに気づきました。
アクティブなAudioCellの複数選択用divはshift+クリックの操作をキャッチしないようにできれば良さそうだけど、方法ありそうでしょうか・・・?

@sevenc-nanashi
Copy link
Member

普通にv-ifの条件に加えればいいと思います。あとでuiLocked中に選択できる問題と加えてPR出します

@Hiroshiba
Copy link
Member Author

もうすぐ完成ですかね! と言いに来たのですが、まだちょくちょく機能がありそうですね!
リストアップとても助かります。

連続再生
selectedAudioKeysのを連続再生する?

こちらですが、選択中のものだけを連続再生したいときが少ないなと感じました。
おそらくアクティブなところから連続再生のが需要は大きいだろうなと。

選択中のものだけを連続再生するためのツールバーアイテムやメニューアイテムを増やすとかどうでしょう。

@sevenc-nanashi
Copy link
Member

個人的に:
全体のイントネーションをリセットを実装しちゃえばとりあえず完成でいいかなぁ、という感じがします。

@Hiroshiba
Copy link
Member Author

なるほどです!!
あ、ここのリストを見た感じだと、あと削除は結構需要あるかもとか思いました。

@Hiroshiba
Copy link
Member Author

こちらのプルリクエストを見てて気づいたのですが、アクティブ状態と選択状態は異なりそうだなと思いました。

例えばWindowsのファイラーですが、選択状態でデリートキーを押したらそのファイルは消えますがアクティブ状態ではそのファイルは消えないと思います。

↓アクティブの時(ファイルを選んだ後、空いてる空間をクリック)
image

↓選択状態の時
image

多分範囲外の部分をクリックした時は、選択されているものを1つにするのではなく、選択が0個、アクティブが一つになるのが良いのかもと思いました。
もしこうした場合どこか挙動が変になるところとかありそうでしょうか・・・?

重要度的には、リリースに支障はあまりないと思っていて、実験的機能を外す場合はこの辺りも気をつけないといけないかな、くらいの気持ちです。
同じ温度感であればとりあえずissueを作ろうかなと!

@sevenc-nanashi
Copy link
Member

sevenc-nanashi commented Dec 4, 2023

もしこうした場合どこか挙動が変になるところとかありそうでしょうか・・・?

色々な面倒を無くすため、selectedには常にactiveが入るようになっています。
ので色々とバグが生まれるかも、みたいな考えです。

@Hiroshiba
Copy link
Member Author

Hiroshiba commented Dec 4, 2023

色々な面倒を無くすため、selectedには常にactiveが入るようになっています。 ので色々とバグが生まれるかも、みたいな考えです。

確かに・・・。
あ。「selectedの数が1つ以上の時は必ずactiveが入る」という仕様だと考えると、そこに「selectedが0のときもある」仕様を足すだけなので意外となんとかなる・・・・・・?


今までは選択状態というものがなかったのですが、複数選択をオンにしているとどれか1つ必ず選択色背景(薄い青色)になっているのが結構気になっています。
「必ずどれか1つ選択されている」というUIはなじみがなさそうなので、できれば解消してあげたい気持ちがあります。
(人によっては気にならなかったりする・・・?)

@sevenc-nanashi
Copy link
Member

個人的には気にならないですね。

まぁn=2で話し合っても多分進歩はしないと思うので、0.15のプレビュー版が出てから反応見るとかでもいいと思います。

@Hiroshiba
Copy link
Member Author

Hiroshiba commented Dec 5, 2023

あーーーなるほどです。
そもそも現状だと選択状態の背景色が薄すぎると感じていて、もう少し目立たせる必要があるだろうなと思っています。
その目立たせた上でだとまあ気になるかなと思った次第でした。
(確かに今の薄さならそこまで気にならないかもしれない)

ちょっと比較対象としてWindowsのファイルの選択色と比較してみました。ホバー状態の色と近そうでした。

ちなみにアクセント句の選択状態の色の濃さはこんな感じです。これくらいは目立たせた方が良さそう。

個人的にはプレビュー版の反応を待たずとも、少なくとも選択状態の色はもうちょっと目立たせないといけないなと感じてました。
背景色を変える以外の方法もあって、例えば枠線を引くとかでもいいかも?

@sevenc-nanashi
Copy link
Member

#1470 (comment)

薄めないと少し色が気持ち悪かったんですよね…

@Hiroshiba
Copy link
Member Author

Hiroshiba commented Dec 10, 2023

薄めないと少し色が気持ち悪かったんですよね…

まあそうだろうなという気持ちです!
今UIとして若干バグってる(視認性がよくない)状態なのでさてどうしようかなって感じですねぇ。。。。

@takusea
Copy link
Contributor

takusea commented Dec 10, 2023

背景色を用いる場合、CharacterButtonとInputに白背景色を入れれば濃い色を用いても見た目良くなかったり視認性悪くなったりしないで済みそうです。
image
あと、個人的に選択の色にもPrimaryColorの半透明色を用いたほうが下記のようなListItemとのスタイルの整合性が取れて良いのかなと思ってます。
image
image

余談として、Microsoftの最新のUIコンポーネントやマテリアルデザインなどではグレーの背景色にチェックボックス付ける方法を取ってますが、スペース取りそうなので今回は採用できなさそうですね。ただ、色以外で選択/未選択の区別を付かせたい気はします。
image

@Hiroshiba
Copy link
Member Author

@takusea ありがとうございます!!! とても参考になります!!!!
文字付近以外選択背景、すごく良さそうに思います。プライマリーカラーにするのもあってそうかも!!
(これはアクセント句の選択色が青なので今は青でもいいかも、揃えるなら後々一気に揃えるとか?)

チェックボックスは場所的に難しいですが、例えばactiveなセルの左端についている三角矢印みたいなのを表示するとかもありなのかもと思いました。

@takusea
Copy link
Contributor

takusea commented Dec 10, 2023

@Hiroshiba 選択状態を示すインジケーターを用いるのはとても良いと思うのですが、activeを示す用の三角矢印が既にあるので追加すると複数個状態を示すインジケーターがあることになって複雑になりそうだなと思いました。
やるとしたら既にある三角矢印の見た目を変えるアプローチで、activeのときは塗りつぶしでselectedなときは白抜きみたいな感じとかですかね?

@Hiroshiba
Copy link
Member Author

@takusea おおなるほどです、白抜き良さそうに思いました!!

@Hiroshiba
Copy link
Member Author

@sevenc-nanashi さんの尽力により、複数選択機能が一通り実装できました!! 🎉 🎉 🎉  ありがとうございました!!!
久々にXで機能宣伝ポストさせていただきました。 https://twitter.com/voicevox_pj/status/1737282952311238896
(いつもプルリクマージのタイミングで、機能実装してくださった方のアイコンが見えるように直リンクを貼っています。リリース時に機能紹介動画を貼る予定です。)

まだいくつか可能なら実装したい点が残っていると感じます。例えば↓などかなと!

  • 複数選択されているパラメータ情報が違っていた場合に、パラメータが1つに定まってないことがわかるような表示にする
  • ドラッグアンドドロップでのテキスト欄並べ替え
  • 選択中デザインを調整

これらは個別にissueを作ろうと思います。

@sevenc-nanashi さん、改めてありがとうございました!!!

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

Successfully merging a pull request may close this issue.

6 participants