ソング：ルーラー部UIの挙動と全体への統合

[romot-co]

内容

ルーラーについてある程度一貫性のあるUIとしてまとめることを目的とします

• ルーラー各部のUIおよび挙動
  • 小節グリッド
  • ループ
  • 再生ヘッド
  • レーンの表示の仕方
  • BPMレーン
  • 拍子レーン
  • キー(調)レーン
  • その他追加レーンが必要になった場合のざっくり目安
• アプリ全体としてのラベル？類およびその操作の一般挙動目安
• ルーラーのアプリ全体での位置付け

Pros 良くなる点

• ルーラーのまとまりがよくなる
• 今後追加しやすくなる

Cons 悪くなる点

ないはず

実現方法

Storybookでパターンを作成

VOICEVOXのバージョン

0.2.x

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

• Windows
• macOS
• Linux

その他

あくまで目安(縛りではない)

[Hiroshiba]

まとめわかりやすいです、ありがとうございます！
こう見ると相変わらず求められる機能数が多いUIパーツですね･･･ 😇
レーンが大量にある点をどう調理するかが腕の見せ所な気がしました！

ルーラーのアプリ全体での位置付け

この一文を見て思いついたのですが、そういえばトラックリストに作るであろうルーラーより、このピアノロールのルーラーのがよくアクセスしますね。
ルーラーは全体操作だから、意味だけ考えるとどっちかというとトラックリストのルーラーがメインのが正しそうですが･･･。

ルーラーに持たせる機能を全体に持たせるかピアノロールに持たせるかは、その機能の解像度次第かもと思いました！！
例えば適当にピアノロールは大体５〜６小節、トラックリストは１２小節〜表示されてると考えて、その持たせたい機能がどっちに必要かで割り振っていくと良さそうかも。
たとえばAメロBメロみたいな自由記述ラベルはトラックリスト側のが良さそう。（ラベル次第ですが。。）

そう考えるとキーや拍子もそんな５〜６小節でぽんぽん変えないし、トラックリスト側のが合ってそうですが。。。。。
トラックリスト側に持たせると、編集箇所より遠いしで使いにくく感じそうな気がしますね。。。。
うーん。やっぱピアノロール側のルーラーは仕事が多そうですね･･･ 😇

[romot-co]

進捗:

なんか動作イメージ(実装問題でややこしいところありそう)

2024-12-09.4.29.15.mp4

• 「テンポ」「拍子」「キースケール」各要素に分離
• 右クリックメニューでその位置に「テンポ」「拍子」「キースケール」の対象を選んで挿入
• 要素(直前の値と同様)と編集ポップオーバーが表示される
• ポップオーバーはクリックで開く
• ポップオーバー内で値変更または削除
• 値変更で実際に各要素が変わる
• ラベル右クリックで対象要素の「削除」があってもよさそう

ルーラーに持たせる機能を全体に持たせるかピアノロールに持たせるかは、その機能の解像度次第かもと思いました！！
例えば適当にピアノロールは大体５〜６小節、トラックリストは１２小節〜表示されてると考えて、その持たせたい機能がどっちに必要かで割り振っていくと良さそうかも。
たとえばAメロBメロみたいな自由記述ラベルはトラックリスト側のが良さそう。（ラベル次第ですが。。）

ありがとうございます！こちらラベルはたしかにそのほうがいいかもです…！
けっきょくどっちにも表示するみたいな感じになる気がしており、考えるポイントかなー…と

もうちょっといくつかデモできたらみなさんにご確認いただけるとうれしいです…！

[Hiroshiba]

ポップオーバー内で削除、なるほどです！！
編集メニューの内容を全部表示するの、思いつきませんでした。

ラベル右クリックで対象要素の「削除」があってもよさそう

ほかは右クリックが一段階ある（コンテキストメニュー開くだけ）ので挙動が違うのと、あとポップアップに収まりきらなくなる操作が現れるのを見越して、右クリックは「削除」が現れるだけのコンテキストメニューを開くだけにしておく、みたいな考え方もあるかもと思いました！

---

あとこれは挑戦なのですが、可能なら各ラベルがどの時刻と対応しているかユーザーにわかるようなUIを目指せるかもと思いました。
同時刻に別種のラベルが複数存在してると、２つ目以降のラベルの表示位置が実際の変更地点とずれるのをどうにかするイメージです。

例えば、実際の変更地点に黒の縦線を書いて、アクティブになってるラベルと対応する位置の縦線を色付けする･･･とか･･･？

[romot-co]

@Hiroshiba
ありがとうございます！
のちほど試してみます！

---

あとは元々の案に戻るのですが素直にレーンあたり1要素にしてしまうのが素直かなあと
ラベルが増えたりしたらどうやっても破綻しそうではあるので…

その場合は以下のようにしてもよさそうです

• 1レーンにつき1要素
• レーン右クリックメニュー「挿入」から追加(ダブルクリックがショートカット)
• イベントは右クリックメニュー「編集」から編集 / ダブルクリックで編集モード(ノートみたいな感じ)
• イベントは複数選択可能
• イベントは移動可能
• イベントは右クリックメニュー「削除」または選択後にDELキーで削除可能

あとは：

• レーンの表示増減は可能
• レーンを1つにまとめたい場合イベント位置になんらかの表示(ミニマップ的な要素が存在ことはわかりホバークリックで確認できるなにかとか、分割されているように見えるアイテムをグループにするとか…

[Hiroshiba]

複数レーンにもできる・畳むこともできる、が手っ取り早い気もしますね！
レーンひとつだけ展開するのではなく、全部展開するか全部まとめるかの2状態だけでも良い説もありそうかも。（レーンの種類数増えてくると微妙かもですが…。）

[romot-co]

進捗:

とりあえず縦レーンにしたらどうなるかの様子をざっくり試す…
やはりスペースがでかみがある

test-pr-3.mp4

たたむ・一括も別途試す

[romot-co]

test-pr-6.mp4

進捗:

試行

• 一括表示
• 同一位置要素のグルーピング
• グループにドラッグした場合は統合(合体するのがわかるように)
• ルーラー右クリックから追加
• ラベルクリックで編集
• ラベルドラッグで移動
• ラベル右クリックから削除

グルーピングの部分は以下の対応

可能なら各ラベルがどの時刻と対応しているかユーザーにわかるようなUIを目指せるかもと思いました。
同時刻に別種のラベルが複数存在してると、２つ目以降のラベルの表示位置が実際の変更地点とずれるのをどうにかするイメージ

[romot-co]

進捗:

ループエリアを合成(まだマージのみなのでスタイルはおわっている)

こうやって考慮の必要がある依存部分をつなげていくと見るのが辛いクソデカプルリクになるので
ある程度試作して当たりをつけてから見れる単位で分解していく形がよさそう

3つ以上出てきた段階で粒度のきっちりしたコンポーネント化みたいな手法が役に立つのかどうか…

[Hiroshiba]

くっつくUI、見た感じめちゃめちゃいいですね！！！
密になってるときの表示をどうしようかなくらいですが、まあそんなにごろごろ変わる曲も少ないだろうしほとんど問題にならなさそう！

実装をどう進めていけば嬉しいかは若干見えないですね････････。
とりあえずある程度できた時に、プルリクじゃなくていいのでブランチを見せてもらえば何か思いつくかも･･･？
例えば機能単位で分ける以外にも、Vuexだけ実装するとかいろいろありそうな気がしないでもないので･･･！
もちろん行けそうだったら最初からプルリクでも大丈夫です！