feat: ソング:ループの機能追加

[romot-co]

内容

以下の内容を行います

• ループ範囲をドラッグおよびメニューで追加・削除できるようにする
• ループをON/OFFできるようにする
• ループ設定をプロジェクトに保存し復帰できるようにする
• ミニマップ(トラックリスト)からもループすることを見越す
• storybookにLoopLaneを追加

関連 Issue

ref #2224
close #2224

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

2025-01-26.20.46.43.mp4

その他

• マージの解決がややこしかったため、別ブランチ・Issueとして作成いたします
• Grid/ValueChanges/Loopなどレーンごとにコンポーネントとして分割(...逆に複雑になった気もしますが、コンテキストメニュー制御などがややこしかったため
• Containerにロジック/Presentationはなるべくステートレスかつ表示のみの責務を目指したつもり

[voicevox-preview-pages]

🚀 プレビュー用ページを作成しました 🚀

• 📝 エディタ
• 📖 Storybook

更新時点でのコミットハッシュ：0ff954a

[Hiroshiba]

コンフリクトの解決とか、不明な点とかあれば何でも聞いてください！！！！

[romot-co]

@Hiroshiba
おつかれさまです！(おてすきで)
テストにつきまして、engineMockのあたりがわかっておらず…どのようにすればよさそうでしょうか…！
https://github.com/VOICEVOX/voicevox/actions/runs/12991557907/job/36229342596?pr=2506

[Hiroshiba]

テストにつきまして、engineMockのあたりがわかっておらず…どのようにすればよさそうでしょうか…！

ちょっと試した感じ、変更前に戻せばよさそうでした！！
勝手ながらコミット追加させていただきます！ 🙏

聞いてくださってありがとうございます！！！　また何でも聞いてください！！！

[romot-co]

storybookに問題出ているのでそちら修正予定

[romot-co]

そのままやるとSequencerRulerのContainer責務重すぎ＆実装グダグダになったので子にそれぞれミニContainer持たせてロジックわける形にしたものの
親Container+各ロジックはcomposableに切り出す+各子コンポーネントはPresentation相当のみ…もありだったかも

[Hiroshiba]

@sevenc-nanashi 再レビューお願いできると･･･！！

個人的には、雰囲気ちょっと行数がとんでもないことになっているので、コードに大きな問題がなさそうかチェックして、あとは実行して動けば、えいやでマージするのが良い･･･というよりそうするしかないかなと思っています！

[sevenc-nanashi]

一通り触って問題なさそうでした。
考えたことメモ：

• 使い方欄にループ機能の触り方を増やしたほうがよさそう。
• 数字がちょっと背景から出てるのが見た目的にちょっと微妙かも。

[Hiroshiba]

@sevenc-nanashi approveって感じですかね？
であればマージ押して頂けると！！（確認の意図だけ）

[sevenc-nanashi]

ん〜気持ちとしてはまだRequest for Changesの気持ちですね（baselineが揃ってないとかなり不格好に感じてしまうので…）

とは言っても自分の好みだけな気がします。直すのが難しそうなら一旦Approveして別のPRで作業しようかなと

[romot-co]

@sevenc-nanashi @Hiroshiba
見た目や触り心地など正直ちょっと微妙なので、見た目だけ変える範囲で調整できればと思います！

※ 別Issue化することも考えましたが、ループについてはやってしまったほうがよさそう...

[romot-co]

@sevenc-nanashi @Hiroshiba
こちら以下のような形になるよう修正しました。

• ループレーンを背景色を変えて、他とは別かつ(わずかに)操作可能エリアに見せる
• 拍数字と被らないようにする
• 操作有効エリアを縦1/3ぐらいにする / ハンドル部はもっと広く...プレイヘッド位置移動との兼ね合い

---

ほかにやっておいた方が良さそうなことだけど別Issue想定:

• 被発見性の向上: ループ操作できそうなエリアかわかるように...まあ、なくてもよさそう
• ドラッグ時のカーソルの固定: ループだけではないので、ドラッグ時に全画面でオーバーライドするフックがあればよさそう？
• オートスクロール: これもループに限らず
• キーボードショートカット
• シーケンサ側選択範囲などからのループエリア設定: 余裕・必要あれば

[Hiroshiba]

@romot-co

あ！
１点だけ気づいたのですが、ダブルクリックが削除になってるのがちょっと気になりました！
どうすべきかわからないのですが、ダブルクリックは現状編集寄り（といってもノートダブルクリックくらいかも）なので、どうすべきなんだろうってくらいの気持ちです！
ちなみにピッチをもとに戻す＝削除するのはctrl+ドラッグ、テンポマーカーとかの削除は右クリック→メニュー→削除。

あとループ範囲外のループレーンをクリックすると、おそらく範囲０のループを作ろうとして、前のループ範囲を消す挙動になってるのって意図的でしょうか？（確認したい意図です）
シーケンサーを選択優先モードのときに範囲選択したあと選択を解除するのはシングルクリックなので、統一が取れている･･･････？
いやでもループ範囲削除と選択解除は違いそうなので、UX的に理想何を理想状態とするか次第かも。

このPRで全部完璧にするのは時間的に難しいと思うので、今のとこゴールをどこにするのかだけふんわり決まっていれば良いのかなと！

[romot-co]

@Hiroshiba
確認しました！

１点だけ気づいたのですが、ダブルクリックが削除になってるのがちょっと気になりました！

確かに！ダブルクリックでの削除はなくせればと思います！

作業の補助線みたいなものなので、気軽に追加・削除できていいと思うのですが、謎挙動ではあるので...

---

あとループ範囲外のループレーンをクリックすると、おそらく範囲０のループを作ろうとして、前のループ範囲を消す挙動になってるのって意図的

これは意図的ではないです。

別のループレーン作る場合は前のを消すという挙動にしたかったのですが、
範囲0でもそうなってしまうため、クリックで消えてしまうように見えてしまっているかと思います...
すごくややこしくなければ

• 新しいループ範囲が閾値を越えたら or 新しいループ範囲が作成されたら前のを消す

という形にできればと思います。

[Hiroshiba]

新しいループ範囲が閾値を越えたら or 新しいループ範囲が作成されたら前のを消す

なるほどです！　今は理想的じゃないって感じですかね！
とりあえず理想はこう、というのがわかれば良いと思うので、このPRは今の挙動にしておいて、理想をissue作るのもありだと思います。どちらでも！！

[romot-co]

こちら

• ダブルクリックでループ範囲消去機能を削除
• LoopLaneクリックで既存ループ範囲が消去に見えないようにする(移動範囲が閾値をこえるまではループ作成を開始しない)

という形で修正しました

[sevenc-nanashi]

触った限りだと問題なさそう。

To: @romot-co
マージして大丈夫ですかね？

[romot-co]

@sevenc-nanashi
レビューありがとうございます、
はい、問題ありません

[sevenc-nanashi]

マージします！

Twitterで新機能ツイートするレベルの変更っぽそうなのでcc: @Hiroshiba

[Hiroshiba]

たしかにポストしたいですね！！
こんな感じで明日のAM11:00にポスト予約しておこうと思います！

#VOICEVOX開発状況 
ソングにループ機能が実装されました🎉（今後のアップデートで実装されます。）
【開発者:@romotco】
https://github.com/VOICEVOX/voicevox/pull/2506