BPM・拍子の途中変更機能

[Hiroshiba]

内容

テンポや拍子を曲の途中で変更できると便利です。
すでに @sevenc-nanashi さんがPRを作ってくださっています。

• Add: BPM・拍子変更機能を追加 #2303

このissueでは機能をどう作るか、どういう見た目やUXにするかについてまとめられればと思います。
（PRの方は実装やコーディングの議論、issueの方はUXの議論ができればあとから見返しやすいのかな～と思い）

実現方法

• Add: BPM・拍子変更機能を追加 #2303

その他

[Hiroshiba]

参考に既存の歌唱ソフトのUXを見てみました。

---

Voisona（テンポ・拍子・調号・強弱記号の編集　のとこ）

BPMや拍子、あとキーなどがレーンで独立してる

レーンをダブルクリックで追加、追加してから編集、ドラッグ＆ドロップで移動

感想：
👍 独立しているのはわかりやすい
🤔 ダブルクリックで追加はちょっとだけわかりづらいかも（慣れてると気付ける）
🤔 縦幅の消費が大きい

---

SynthV

ルーラーを右クリックで拍子やテンポを追加。拍子が変更できるのは１拍目だけ

追加されてるマークをダブルクリックで編集できる。

👍 面積を使いすぎない
🤔 １拍目以外で拍子追加ができず、混乱するかもしれない（まあそこまででもない）
🤔 4/4などと表示されてる背景っぽいテキストをダブルクリックで編集可能なのは気づきづらいかも（ステータスバーに「ダブルクリックで拍子記号を編集」とは表示される
🤔 どうしてもごちゃつく

↓は２拍子開始から4/8拍子に変更＆120BPMに変更、そのあと0.5拍子あとから240BPMに変更

---

• パッと思いつく案
  • レーンは１つにする（編集や直感性は難しくなるけど、表示面積がどうしても増えてしまうので）
  • クリック可能っぽくする（カーソル変えるだけでも。可能ならボタンっぽくなってるとなお良さそう）
  • それぞれ編集できるようにする（わかりやすい気がする）
• 解決策が思いつかない課題
  • どこから開始位置なのかわからないのの解決が思いつかない、とりあえずそこまで問題にはならない気もする

[sevenc-nanashi]

現状こんな感じです：

• ルーラーの上半分にBPM/拍子の変化を表示
  • クリックすると編集もできる、ホバーしたら下線がひかれる
• BPM/拍子変化の追加はルーラー右クリックで行う
• ツールバーにあるBPM/拍子は現在のBPM/拍子を表示/編集する

[Hiroshiba]

@sevenc-nanashi ありがとうございます！！
ちょっとプルリク側と議論が混乱してしまうかもですが、issue側でUXを議論するっていうのを１回試させていただけると･･･！ 🙇

クリックすると編集もできる、ホバーしたら下線がひかれる

いったん良さそう！！　余裕があったらカーソルも変更してもいいかも！
あ、でもカーソルはグローバルに制御してたから実装が難しいかも。一旦実装優先でそのままでもいいかも！！

BPM/拍子変化の追加はルーラー右クリックで行う

これも良さそう。

ツールバーにあるBPM/拍子は現在のBPM/拍子を表示/編集する

こちらも良さそうに思います！

---

現状 UX で気になってるのはこの2点です。

1. テンポと拍子の変更1つのメニューで制御できる点

プルリクの実装では２つの編集項目が同時に表示されますが、「編集したい対象を右クリックし、それのみを編集するメニューを表示する」UXもありそうだなと。
同時に編集できた方が嬉しそうでしょうか 👀

なんでこれ気にしてるかというと、将来的にここのメニューは増えていくはずで、ややこしくなっていきそうだな～～と思ったためです。
キーとか、あとは声量調整パラメータとか･･･？

個人的には、拍子を変更しようとしてる人には拍子を変更するためだけのメニューだけ表示してあげるとややこしくない＆将来的にパラメータが増えても操作の変更がいらなそうなので、分離が良いのかな～とか思いました！

2. オンオフの切り替え

確かメニューを開いた後、チェックボックスで拍子・テンポを変更するかしないかを選べるようになっていたと思います。
なかなか珍しいUXかもと感じました。
「右クリックで削除ができる」にするとかどうでしょうか 👀

[sevenc-nanashi]

1. テンポと拍子の変更1つのメニューで制御できる点
   同時に編集できた方が嬉しそうでしょうか 👀

似た概念だったので同じメニューに入れました。特に強い理由はないですね。

2. オンオフの切り替え
   結構ややこしかった印象です。「右クリックで削除ができる」にするとかどうでしょうか 👀

確かにわかりにくいかも。BPM/拍子クリック時のメニューに削除ボタンを置くようにします。

ちなみに：どちらもReaperの挙動をベースにしました

[Hiroshiba]

@sevenc-nanashi なるほどです！！！

reaper見るに、「指定位置にマーカーを置き、そのマーカーの意味を編集する」という UX になってそうに感じました。

マーカーを編集する形ならこの形がいいかも。
「拍子」や「テンポ」を編集するのであれば個別の方がよさそう。

同時編集することも珍しそうですし、分けちゃうのはどうでしょうか･･･？
あとあと「だんだんと早くなる」みたいな特殊なことをしたいときとかに、一括メニューだとちょっと限界が来そう。

[sigprogramming]

私も「テンポ編集」と「拍子編集」で分けた方が良いかもと思いました！

---

私は以下の点が気になりました！

• テンポ・拍子の表示を右クリックしたときに「編集・挿入の位置」が「右クリックしたテンポ・拍子の位置」にならない
  • 左クリックと同じ挙動にするのが良さそう
• テンポ変化が連続で設定してある場合に、表示が重なってしまう
  
• 「テンポ・拍子の編集エリア」と「ループ範囲の設定エリア」が被りそう
  • テンポ・拍子の編集エリア
    
  • ループ範囲の設定エリア（ソング: ループ範囲を設定できるようにする #2281）
    

[romot-co]

@sevenc-nanashi @Hiroshiba @sigprogramming
BPM・拍子変更の実装ありがとうございます！！
グリッドもややこしそうなのにいい感じですごい…！

---

以下、UIで考えたことを書いておきます…！

---

拍子トラック・テンポトラックの分離

• すでに出ておりますが: 拍子とテンポは分離した方がよさそうかなと思います
• 特にテンポは拍子と同一のモーダルでの入力にはしないほうがいいかも

---

テンポトラック

• だんだん遅く速くみたいなのがよくあるのでオートメーションカーブが描けるようなUIがよさそう
• しかしややこしいので、まずは現状のものの拡張がよさそう？

マーカー設定してそれぞれテンポ変える方式では入力・表示ともにきつい状態があるかもです
以下はStudioOneでテンポ変化

遅くなるやつの例: リタルダント

Timeline.1.mp4

---

拍子トラックでの追加・削除・編集

以下のような操作にするとよさそう

パターン1

• 追加: 拍子トラッククリックまたは右クリックで拍子マーカーをカーソル位置に追加
• 編集A: 拍子マーカーの選択+右クリックで変更ポップオーバー
• 編集B: 拍子マーカーの値をクリック or ダブルクリックで直接値を変更可能
• 削除: 拍子マーカー選択+Deleteキーまたは右クリックメニューから削除

VOICEVOXにおいての操作では追加・編集・削除するときはこうするみたいな
ざっくりルールつくりたい

場所によってクリック・右クリック・ダブルクリックとかだとややこしそう

---

拍子・テンポトラックの追加と削除

• 非表示・表示を変更できる
• デフォルトは非表示でもいいかも(要議論)
• 最低限「表示」メニューから行える
• ルーラー左側に「+」ボタンを用意し、表示できるものを選べてもいいかも(オプショナル)

---

拍子・テンポトラックの表示場所

• ミニマップ(トラックリスト)ができたらそちらに持っていくのがよさそう

トラックではなくグローバルなものなため

---

ツールバー上の拍子・テンポ

• 再生ヘッド位置の拍子・テンポを表示するインジケータ的役割が強くなる
• ツールバー上から値を変更した場合
  • テンポ: 再生ヘッド位置のテンポ変更: マーカーが1つもない場合は曲全体のテンポ変更になる
  • 拍子: 再生ヘッド位置の拍子変更: マーカーが1つもない場合は曲全体の拍子変更

---

今のものでもすでに使えていてとてもすごい…！

[sevenc-nanashi]

テンポがゆっくり変わっていくやつ、Reaperみたいに「次のテンポまでゆっくり変わっていく」みたいなオプションである程度代用できたりしませんか？（変化の種類をイーズイン/イーズアウト/直線みたいな感じで指定できるみたいなのもつけていいかも）
流石にエンベロープの実装はコストがとんでもないことになりそう...

[Hiroshiba]

エンベロープとかゆっくり変わっていくとかの機能は、あとあと良い感じに実装が良さそうに思いました！
補間コンポーネントでもエンベロープが必要になってくるなら、そのときに実装とかでもありかも、とか。

まずは @sevenc-nanashi さんのPRにある機能（テンポ変更・拍子変更）をマージできると嬉しそうみ。
そこからデザインやUXを更に考えていく感じが良さそうかなと･･･！
PR側はいったん機能は更に追加せず（すでに変更量が多いので）、コメント内で気に入ったUXや表示形式があれば試してみるとかはぜひぜひという気持ち！

[Hiroshiba]

コメントまで･･･！

@sigprogramming

テンポ変化が連続で設定してある場合に、表示が重なってしまう

僕も気になったのですが、そもそもこれが問題になることがあまりないかも･････？（とはいえ違和感はあります）
まあ後ろのラベルの背景色をつければ解決っぽくはなるけど、実装としてはより良い形もありそう。

@romot-co

VOICEVOXにおいての操作では追加・編集・削除するときはこうするみたいな
ざっくりルールつくりたい

た〜〜しかに！！
なんとなく違ってるってのは避けたほうが良さそう。

まあでもわりと理由があれば、勇気を持ってところによって変えても良いのかもとも思いました！
ルーラー部分はクリックされやすいので、この表示形式ならクリックを区切り追加にするのはまずそう。
テンポ欄が別であるならクリックで追加でもよいのかも。みたいな･･･。まだちゃんと考えれてない中での意見まで 🙏

拍子・テンポトラック

（とても細かいのですが）トラックと言うと、普通のトラックと同じ感じなのを想像するかも。
おそらくソングの場合必ず一番上に表示される気がするので･･･なんだろう、レーン的な･･･？
まあ問題が超あるわけではないのですが、認識ずれが今後起こり得るかもと思い、こちらの認識を書いてみました･･･！！！

拍子・テンポトラックの表示場所
ミニマップ(トラックリスト)ができたらそちらに持っていくのがよさそう
トラックではなくグローバルなものなため

ルーラーもグローバルなものなので、一応このあたりにあっても意味的には大丈夫かもとか感じました！
（ルーラー近くにあったほうが良いかどうかはおいといて。）

[romot-co]

@Hiroshiba @sevenc-nanashi
ありがとうございます！

コメントの意図が漏れておりました、
考える必要がある・影響がある部分はこのあたりかな…？ぐらいになります！

実装はおっしゃるとおり切り出して別途がよさそうです！

---

テンポ遅くなるやつ:

問題になるとしたら、表示含め入力よりもインポート時かもと思っています

• 入力は最初はイージングカーブ含めできなくてもいいかも
• インポートで大量に表示が詰まるだろう点は間をオミットするぐらい？そのまま表示でもよさそう

（とても細かいのですが）トラックと言うと、普通のトラックと同じ感じなのを想像するかも。

今後レーンと呼べたら…！

[sigprogramming]

@Hiroshiba

僕も気になったのですが、そもそもこれが問題になることがあまりないかも･････？（とはいえ違和感はあります）
まあ後ろのラベルの背景色をつければ解決っぽくはなるけど、実装としてはより良い形もありそう。

リタルダンドやアッチェレランドのときにテンポ変化を連続で設定しますが（DAWで直線・曲線で設定していてもMIDIエクスポートのときに階段状になります）、縮小したときに結構見づらくなるので、考慮しておいた方が良いと思います…！

Cubaseで打ち込んだものをインポートして縮小したとき（4小節目から6小節目まで、120→150で変化）

120…150のように、間のBPMを省略するのも良いかもですが、ひとまず後ろのラベルの背景色をつけるのが良さそうに思いました。

---

@romot-co

だんだん遅く速くみたいなのがよくあるのでオートメーションカーブが描けるようなUIがよさそう

tickから秒に変換する際に積分が必要になるので、曲線は実装が難しいかも＆重くなるかもです…！
（直線は台形の面積を計算すればよいので簡単に実装できる＆重くならないと思います）

[romot-co]

参考用:

実装どうこうという話ではなくて、実データでどうなるかな？で試してみた！ぐらいです

元Studio One

MIDIデータで出力し有効なテンポチェンジイベントをプロットしてみたもの:

PPQN単位

VOICEVOXにインポートしてみたもの:

ピッチ側:

---

もしかして: ピッチ描画のテンポチェンジにあわせた調整がいる可能性？
(個人的には実験的機能としてリリースして、こちらは後でもよさそうな気

[Hiroshiba]

あ〜なるほどです、import時！！

[sevenc-nanashi]

midi_export.zip

Reaper製のBPM変化MIDIだととんでもないことになりますね...

[sevenc-nanashi]

こんな感じにしてみました。