ソング：トラック名のテキストボックスを常時表示しないようにする

[sigprogramming]

内容

トラック選択時にトラック名のところをクリックしてしまって、テキストボックスにフォーカスが当たってしまうということがよくあります。
テキストボックスを常時表示せず、トラック名をダブルクリックしたときにテキストボックスが出てくるようにすることで、トラックを選択しやすくなると思います。

Pros 良くなる点

• トラックの選択がしやすくなる

Cons 悪くなる点

• トラック名の編集が少しやりにくくなる

その他

[Hiroshiba]

こーーーーーーーーーーーーーれは厄介な課題ですね！！！！！！！

テキスト欄がむき出しになっていて、トラック選択がしたいだけなのにテキスト編集状態になるのは課題に思います。
スペースでの再生など、修飾キーを使用しないショートカットキー操作ができなくなってしまう。

ただ、解決策の「ダブルクリックで編集開始」ですが、これは実は一般的じゃない気がします。
あとVOICEVOXが全体的に「ダブルクリックで編集」する機会がないので、続けなかったら一生気づかないかも。。。

一旦他の解決策を列挙してみます。どれもこれも最高かと言われると、って感じですが。。。

• テキスト欄をクリック不可能にし、右クリックメニューに「トラック名を編集」を用意する
  • 気づきやすいが、いっぱい編集したい時にはちょっと面倒
• トラック名編集ボタンを用意する
  • 1つずつのトラック欄の大きさ的に、どうしても小さくなって押しづらそう
  • 大きくするとミスってクリックしちゃいそう（まあこれはそこまで問題じゃないかも）
• トラックアクティブにするとトラック名編集ボタンが出てくる
  • ボタンが小さくなりそう
  • これもいっぱい編集する時にちょっと面倒

将来的に、トラックアクティブにした時にトラック詳細が大きく表示されれば、そっちでトラック名を編集する経路を用意できるはず。
ここまで来れば、トラック名の付近ダブルクリックでトラック名編集の経路も用意してあげれば、分かりやすい＆急ぐ人にはちょっと気づきづらいけどもっとやりやすいやり方もある、とできそう。
だいぶ先になりそうだけど。。。

---

提案としては、誤クリックしてショートカットキー操作ができなくなるのが結構UX下げてそうであれば、右クリック→編集を用意するのがよさそうに思っています！
そこまで UX 下がらなさそうなら、一旦このままにする方針もなくはないのかも。

実際使ってみた時のUX 次第だと感じてます･･･！

[sigprogramming]

ただ、解決策の「ダブルクリックで編集開始」ですが、これは実は一般的じゃない気がします。

Cubase, StudioOne, SynthVのトラック、CLIP STUDIOのレイヤー、Blenderのアウトライナーはこの形でした。
（個人的にはそこそこある形の印象です）

あとVOICEVOXが全体的に「ダブルクリックで編集」する機会がないので、続けなかったら一生気づかないかも。。。

歌詞はダブルクリックで編集なので、トラック名も気づいてもらえる…かも…？

一旦他の解決策を列挙してみます。どれもこれも最高かと言われると、って感じですが。。。

右クリックメニューに「トラック名を編集」を用意するは分かりやすくて良さそうに思いました。
編集ボタンは

• スペースをとってしまう
• 統一感を出すために他のところも編集ボタンをつけないといけなくなる

かもです。（できれば編集ボタンなしのUIにしたい）

提案としては、誤クリックしてショートカットキー操作ができなくなるのが結構UX下げてそうであれば、右クリック→編集を用意するのがよさそうに思っています！
そこまで UX 下がらなさそうなら、一旦このままにする方針もなくはないのかも。

結構UX下げてそうに感じたので、

• テキストボックス常時表示はしない
  • 以下のいずれかの形にする
    • トラックが選択されているときにテキストボックスを表示（表示するときにフォーカスを当てない）
    • トラック選択中にトラック名をクリックでテキストボックスを表示（表示するときにフォーカスを当てる）
      • Windowsのエクスプローラーはこの形
    • ダブルクリックでテキストボックスを表示（表示するときにフォーカスを当てる）
  • ↑が難しい場合は編集ボタンを用意
• 右クリックメニューに「トラック名を編集」を用意する

が良いかなと思っています！

[romot-co]

参考までに:

こちらできんかな？でちょっと試してみました…！
もうちょいやりようありますが、
テキストをクリックのみで編集であれば:

たぶんクリックで起こることが予期できないせいかなあなので

• トラック選択可能域を明示(この場合、枠線がついた場所をクリックした場合にトラック選択)
• トラック名クリックで編集するが選択はしない
• 要素を整理する

2024-10-20.23.06.34.mp4

で一応それっぽくできなくはないかも…？

しかし、そんなにトラック名変えないし素直にダブルクリックでトラック名変更・選択もしてしまうでも問題なさそうです…！

[Hiroshiba]

@sigprogramming
ノートをダブルクリックで歌詞編集、確かにと思いました！！！
（同時に、なぜ歌詞編集にたどり着けない人が多いのかも理解しました。。。慣れると慣れてることに気づかなかったです。。。）

結構UX下げてそうに感じたので、

なるほどです！！
であればもうとりあえずテキストフィールドは常時表示せず、右クリックで編集開始にしちゃうのありだと思います！
でも今思ったけど、右クリックで編集開始は逆に実装が大変かもですね。。
（「編集開始メニューを選択　→　テキストフィールドに切り替え　→　フォーカス」という経路になり、DOMの待機が入るので大変そう？）

ということで

トラックが選択されているときにテキストボックスを表示（表示するときにフォーカスを当てない）

こちらがわかりやすく（トラック選択したときに、テキスト欄をクリックできるような見た目になる）、かつ実装もしやすそうに思いました！！

---

@romot-co

たぶんクリックで起こることが予期できないせいかなあなので

ここはちょっとわかんないかもと思いました！
割とノールックというか、エイムを合わせた瞬間にクリックする気がするので、誤ってトラック名クリックしちゃうことはあるかもなぁ～と。

枠表示とか、ホバーした時に枠が出るとかはめちゃくちゃいいなと思いました！！！

[sigprogramming]

@romot-co @Hiroshiba
ありがとうございます！

ひとまずトラックが選択されているときにテキストボックスを表示で実装したいと思います！
（ダブルクリックですが、よくよく考えるとトラック選択時にパン・ボリュームの分ずれるので、未選択のトラックはダブルクリックできないですね…）