feat: ソング：音素タイミングの表示エリアを追加 #2472

sigprogramming · 2025-01-04T09:00:36Z

内容

音素タイミングを表示するエリア（パラメーターパネル）を追加します。
（エリアの追加のみで、音素タイミングの表示は未実装）
ピアノロールの下に表示が良いかなと思っていて、ひとまずそれで実装しています。

パラメーターパネルを表示するかどうかの設定は開発時のみ機能にしています。

また、position: fixedで実装されているコンポーネント（CharacterPortraitとズームのスライダー）がシーケンサーにあったので、QSplitterを使ったときに正しく表示されるようにposition: absolute等にして調整を行いました。
具体的には以下を行いました。

CharacterPortraitがsequencerBodyの中にありposition: fixed以外にできなかったので、以下を行った
- SequencerGridをsequencerBodyの外に出して、スクロール位置をoffsetX, offsetYに渡す形に変更
- sequencerBodyの中にSequencerDummyGridを置いて正しいスクロール範囲になるようにした
- CharacterPortraitをsequencerBodyの外に出して、正しく表示できるように調整
  - メディアクエリを使用しない形に変更（flexプロパティとspacer要素を使用）
ズームのスライダーをposition: absoluteにした

ついでに以下も行いました。

sequencer-guidelineもsequencerBodyの外に出した

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

その他

voicevox-preview-pages · 2025-01-04T09:05:06Z

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

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

sigprogramming · 2025-01-05T02:04:14Z

src/components/Sing/SequencerRuler/index.stories.ts

@@ -27,6 +27,7 @@ const meta: Meta<typeof Presentation> = {
    offset: 0,
    numMeasures: 32,
    sequencerSnapType: 16,
+    uiLocked: false,


storybookで警告が出ていたので修正しました。

sigprogramming · 2025-01-05T02:15:38Z

設定（開発時のみ機能）を追加したことでマイグレーションのテストが通らなくなりましたが、マイグレーションをどう実装したら良いか分かりません…

sigprogramming · 2025-01-05T02:22:39Z

src/components/Sing/CharacterPortrait.vue

 // 画面右下に固定表示
-// 幅固定、高さ可変、画像のアスペクト比を保持、wrapのwidthに合わせてheightを調整
-// bottom位置はスクロールバーの上に表示
+// 幅固定、高さ可変、画像のアスペクト比を保持、heightを調整
 .character-portrait-wrap {
-  opacity: 0.55;
-  overflow: visible;
-  contain: layout;
+  position: relative;
+  height: max(100%, $portrait-min-height);
+  margin-right: $right-margin;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
  pointer-events: none;
-  position: fixed;
-  display: grid;
-  place-items: end;
-  bottom: 0;
-  right: $right-margin;
+}
+
+.spacer {
+  flex: 0 1 $spacer-height;
+  width: 1px;
 }

 .character-portrait {
-  width: auto;
-  height: $portrait-max-height;
-  min-height: $portrait-min-height;
+  flex: 1 0;
+  min-width: $portrait-min-width;
  max-width: $portrait-max-width;
-  overflow: visible;
+  min-height: $portrait-min-height;
+  max-height: $portrait-max-height;
+  opacity: 0.55;
  backface-visibility: hidden;
-  object-fit: cover;
-  object-position: top center;
-}
-
-// ポートレートサイズが画面サイズを超えた場合、ヘッダーを考慮してポートレートを上部基準で表示させる
-// ヘッダー高さ120px+ポートレート高さ500pxだとする
-@media (max-height: #{calc(#{$portrait-min-height} + #{$header-margin})}) {
-  .character-portrait-wrap {
-    top: $header-margin; // ヘッダーの高さより下に位置させる
-    bottom: auto;
-    height: calc(100vh - #{$header-margin});
-    place-items: start end;
-  }
+  object-fit: contain;
+  object-position: bottom center;
 }


@romot-co
できるだけ以前と同じ挙動になるようにしましたが、正しく実装できているか自信が無いので、スタイル周り、ご確認いただけると助かります…！
（contain: layout;など、効いていなさそうなプロパティを消しましたが、必要なものも消しているかもしれません…）

@sigprogramming
こちら確認いたします！

メモ書きです…！

contain: layoutはfixed以外で実装しようとした時の名残なので消しても大丈夫そうです(スクロール時のパフォーマンス上がることがあるので残しておいても問題ないはず)

コンテナ要素に対してposition: sticky+子にmax-width指定が一番楽そう

.portrait-wrap { position: sticky; bottom: 0; right: 0; width: 320px; /* 横長・縦長対応がきつそう... */ } .portrait-image { width: 100%; height: auto; max-height: 300px /* 仮 */ object-fit: contain; position: absolute; /* wrapに対し固定 */ bottom: auto; bottom: 0; } // あとはContainer Queryなど？

ほか気になっているやつ:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning

@sigprogramming
こちら以下で修正いたしました…！挙動他問題や影響ありましたらおしらせください！

sigprogramming@6c942e9

@romot-co
ありがとうございます！！とても助かります…！

挙動を確認してみたのですが、今のmainブランチではシーケンサーのheightがある程度大きくなると立ち絵も拡大されるようになっていて、 6c942e9 では拡大されなくなっているかもです。ここの挙動、どうしましょう…

また、position: stickyありとposition: stickyなしの挙動の差があまり分かりませんでした…
調べてみたところ、position: stickyになっている要素がスティッキーアイテムで、その親がスティッキーコンテナになるようです。
https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html
なので、 6c942e9 の実装だとcharacter-portrait-wrapがスティッキーアイテム、score-sequencerがスティッキーコンテナになりますが、character-portrait-wrapはグリッドアイテムでもあるので、もしかしたら上手く機能していないかも…？

ちょっと自分も試してみたんですが、原理は全く分かりませんがなんかこれでうまいことできた気がします！！
PRも作ってみました！ sigprogramming#4

<style scoped lang="scss"> @use "@/styles/variables" as vars; @use "@/styles/colors" as colors; // 表示変数 $portrait-min-height: 500px; // 画面右下に固定表示 // 幅固定、高さ可変、画像のアスペクト比を保持、heightを調整 .character-portrait-wrap { height: 100%; display: flex; flex-direction: column; margin-left: auto; overflow: hidden; } // 通常は下部基準だが、親要素が最小高さより小さい場合は上部基準とし頭を残して足から隠れさせる .character-portrait { display: block; margin-top: auto; min-height: max(75%, $portrait-min-height); opacity: 0.55; backface-visibility: hidden; object-fit: contain; } </style>

ちなみにChatGPTに聞きました。o1君、結構CSSの強い味方かもしれない。
https://chatgpt.com/share/678d25ad-68f0-8008-b197-0c1b7da2b59b

@Hiroshiba
こちら確認しました！
簡潔な手法でだいぶベストに思えます…！

o1すごい…！

$portrait-min-height: 500px; // 最小高さ $portrait-max-height: 60%; // 最大高さ 75%だと画面によってはでっかすぎるので60%ぐらいがよさそう // 以下変更なし・動作のコメントだけ付与 // 画面右下に固定表示 // 幅固定、高さ可変、画像のアスペクト比を保持、heightを調整 .character-portrait-wrap { display: flex; flex-direction: column; // コンテナ要素に対し高さを100%にし、固定右寄せ height: 100%; margin-left: auto; // 内部スクロールを行わせない overflow: hidden; } // 通常は最下部に表示し、親要素が最小高さより小さい場合は上部基準とし頭を残して足から隠れさせる .character-portrait { display: block; // wrapに対し下寄せ margin-top: auto; // 最小高さと最大高さのうち大きい方を適用 min-height: max($portrait-min-height, $portrait-max-height); // アスペクト比を保持 object-fit: contain; // 透明度 opacity: 0.55; // 以下なくてもいいけどあるとGPU効きがち backface-visibility: hidden; transform: translateZ(0); }

＋たぶん
ポートレート幅 > 親のQSplitter幅の場合に
にスクロールバーが二重に出るかもなので

<QSplitter ... style="overflow: hidden" // スクロールさせない >

みたいにすれば完了に思えます！
あとで修正PR送ります…！

Hiroshiba · 2025-01-05T02:32:15Z

マイグレーションのテストが通らなく

これはunitテストのsnapshotを更新すれば良さそうです！
ローカル環境でnpm run test:unit -- --update # スナップショットの更新を実行していただければ！！

どういうタイミングで何のスナップショットを更新すれば良いのかわかりづらい･･･というよりわからないですね･･････。
どうすれば良いのか考えてみます 🙇

sigprogramming · 2025-01-05T03:27:45Z

@Hiroshiba
ありがとうございます！スナップショットを更新しました！

Hiroshiba

レビューしました！
spliterを導入して、各ペインでdivが一枚ずつ挟まってる構造、良さそう！

かなりいろいろ試行錯誤があってこのCSSにたどり着いたんだと思います、ありがとうございます！！！
DummyGridを用意してスクロールイベントを同期させるの、複雑性が上がっているのでなんとかできないか調べてたのですが、親にcontain: layoutを指定すればfixedの固定位置がその親依存になるっぽいです！！！！！
https://developer.mozilla.org/ja/docs/Web/CSS/contain#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E6%8B%98%E6%9D%9F

実際.score-sequencerの中にcontain: layout;入れたら、元のコードでも大部分動きそうでした！！
たぶんDummyGridをなくせて、fixedに戻せて、立ち絵・グリッド・ガイドラインももとに戻せる気がします。
（こっちのほうが構造的に正しいので可能ならこうしておくと機能継ぎ足しが簡単そう）

立ち絵のメディアクエリだけはどうしてもこのPRのように別解を探す必要がありそうな気がしました！

src/components/Dialog/SettingDialog/SettingDialog.vue

Hiroshiba · 2025-01-16T09:13:48Z

tests/e2e/browser/スクリーンショット.spec.ts-snapshots/ソング画面-browser-win32.png

（メモ）
間違い探しレベルですが、右下の縮小スライダーの位置が微妙に変わってますね！
問題なさそう感！

src/components/Sing/SequencerParameterPanel.vue

src/components/Sing/SequencerDummyGrid.vue

src/components/Sing/ScoreSequencer.vue

sigprogramming · 2025-01-16T14:00:01Z

@Hiroshiba
レビューありがとうございます！

親にcontain: layoutを指定すればfixedの固定位置がその親依存になるっぽいです！！！！！

知りませんでした…！ありがとうございます！

こっちのほうが構造的に正しいので可能ならこうしておくと機能継ぎ足しが簡単そう

構造的に正しいというのはDummyGridをなくせるからでしょうか？
確かに元の形に戻すとDummyGridをなくせますが、今後CanvasやWebGLにしたりスクロールの自作などを行うのであれば、今のPRの形が良いかなと思います。
（DummyGridが必要なくなるのと、立ち絵・グリッド・ガイドラインを今の形に変更することになるので）

Hiroshiba · 2025-01-16T16:47:21Z

@sigprogramming

構造的に正しいというのはDummyGridをなくせるからでしょうか？

ですです！
でもだいぶ違うと思ってたのですが、改めて考えたらほんとにDummyGridがあるかないかぐらいでした。

整理すると、今のPRのコードはこうなっていて、

root
┗ 左上の角
┗ ルーラー
┗ 鍵盤
┗ グリッド
┗ キャラクター全身
┗ ノート入力のための補助線
┗ シーケンサ
　┗ ダミーグリッド
　┗ シャドーノート
　┗ ノート
　┗ 歌詞
┗ ピッチ
┗ 拡大率スライダー

元のコードはこんな感じかなと。

root
┗ 左上の角
┗ ルーラー
┗ 鍵盤
┗ シーケンサ
　┗ グリッド
　┗ ノート入力のための補助線
　┗ キャラクター全身
　┗ シャドーノート
　┗ ノート
　┗ 歌詞
┗ ピッチ
┗ 拡大率スライダー

グリッドから拡大率スライダーは全部同じパネルに乗っかってるので、シーケンサdiv以下にあるのが良いかなと思ってて、だとしたら一塊に近かった以前の構造が合ってそうだな～と思った次第です！
DOM的にも、シーケンサがスクロールを持って、パーツは全部そこに乗っかってる形が作りやすそうだなーとも。(contain: layout使えば･･･！)

まあcanvasとかに置き換えるなら今はどちらでも良いかもなのですが、こっちの方はDummyがないのもあって全体が把握しやすいかもです！
あとcontain: layoutならfixedを使えるので、absoluteよりも実装が楽かも。（これはあまり変わらないかも）

ただdisplay: gridで同じ場所に重ね起きするこのPRの実装だと、２つのエリアに貫通するUIとかを作りやすいので、お互い一長一短かもなのですが 😇

Hiroshiba · 2025-01-18T07:11:14Z

ダミーグリッドを使うかどうかもう少し考えてみました！
ちょっとどっちが楽か予測しきれないのと、一長一短なのとで、別にダミーグリッドを使う形でも良いのかな〜と思い始めました！
（戻すの大変とかもあると思うので 🙇 ）

コードがコピペになってしまうのはちょっと避けたいので、provide/inject形式にだけはしておきたいかもです！
provide/injectはなんかだいぶややこしいので、不明な点があったら何でも聞いちゃっていただければ！！

Co-authored-by: Hiroshiba <[email protected]>

VOICEVOX#2472 の変更提案プルリクエスト

...クリーンショット.spec.mts-snapshots/components-sing-sequencergrid--default-light-storybook-win32.png

Co-authored-by: Hiroshiba <[email protected]>

VOICEVOX#2472 の変更提案プルリクエスト

sigprogramming · 2025-01-22T13:35:30Z

ちょっと調整を行います！

Hiroshiba · 2025-01-22T22:10:32Z

あ、スクショがコンフリクトしていそうです！
たぶんmainブランチをマージして[update snapshots]というコミットメッセージを含めるか空コミットすれば良い感じに更新できるのかなと！

（コンフリクト解消すると、プレビュー用のページやStorybookの確認がpreview-pages通してブラウザで可能になるので便利です）

Hiroshiba

ほぼLGTMです！！！あと少し！！

src/components/Sing/CharacterPortrait.vue

src/components/Sing/ScoreSequencer.vue

...クリーンショット.spec.mts-snapshots/components-sing-sequencergrid--default-light-storybook-win32.png

Co-authored-by: Hiroshiba <[email protected]>

Hiroshiba

たぶんLGTM･･･なのですが、mainブランチのマージコミットがsquashされて（？）差分がわからないようになっちゃって変更箇所が不明になってるかもです！

ちょっとこっちでmainブランチマージして、まだスクショがコンフリクトしているのでそれも直しちゃおうと思います！

Hiroshiba

LGTM！！！

さらにスクショの更新するのは不要でした･･･！ 🙏

立ち絵に関しても実際にいろんなサイズにして確認してみました。多分大丈夫なはず！！

@romot-co さんすみません、たぶん大丈夫だと思うのでマージさせていただきます！ 🙏

パラメーターパネルのエリアを追加、リファクタリング

f15e54c

sigprogramming and others added 6 commits January 5, 2025 06:35

キャラクターポートレートのクリッピングコンテナを追加、スタイルを調整

7470bd8

パラメーターパネルを一旦非表示に

2e5b636

storybookを変更

7a18ff6

GuideLineをsequencerBodyの外に出した

c219876

パラメーターパネルを表示するかどうかの設定を開発時のみ機能として追加 [update snapshots]

4bdab0e

（スナップショットを更新）

4f668e3

sigprogramming commented Jan 5, 2025

View reviewed changes

score-sequencerのoverflowを削除

914bcfb

sigprogramming marked this pull request as ready for review January 5, 2025 02:15

sigprogramming requested a review from a team as a code owner January 5, 2025 02:15

sigprogramming requested review from Hiroshiba and removed request for a team January 5, 2025 02:15

sigprogramming commented Jan 5, 2025

View reviewed changes

sigprogramming added 2 commits January 5, 2025 12:15

修正

4756f9b

unitテストのsnapshotを更新

4f1c341

Hiroshiba reviewed Jan 16, 2025

View reviewed changes

ポートレートの表示基準を少し単純にする

6c942e9

sigprogramming and others added 5 commits January 18, 2025 21:24

provide/injectを使用して共通化

9f2977f

SettingDialog.vueのトグルセルのタイトルと説明を更新

382b8e7

emitImmediatelyを削除

9a10b1b

Update src/components/Sing/ScoreSequencer.vue

6d1fe84

Co-authored-by: Hiroshiba <[email protected]>

Update src/components/Sing/SequencerParameterPanel.vue

07172e5

Co-authored-by: Hiroshiba <[email protected]>

github-actions bot and others added 2 commits January 19, 2025 16:27

（スナップショットを更新）

247f059

Merge pull request #4 from Hiroshiba/hiho-counter-pr-ab02d289

584791d

VOICEVOX#2472 の変更提案プルリクエスト

Hiroshiba reviewed Jan 21, 2025

View reviewed changes

...クリーンショット.spec.mts-snapshots/components-sing-sequencergrid--default-light-storybook-win32.png Outdated Show resolved Hide resolved

Hiroshiba mentioned this pull request Jan 21, 2025

#2472 の変更提案プルリクエスト sigprogramming/voicevox#5

Merged

Hiroshiba and others added 6 commits January 22, 2025 02:03

chore: injectを移動

1436c64

Update src/components/Sing/SequencerDummyGrid.vue

672fc6e

Co-authored-by: Hiroshiba <[email protected]>

Update src/components/Sing/SequencerGrid/Presentation.vue

adad0e2

Co-authored-by: Hiroshiba <[email protected]>

Update src/components/Sing/SequencerDummyGrid.vue

7662a2f

Co-authored-by: Hiroshiba <[email protected]>

Merge branch 'add_parameter_panel_area' into hiho-counter-pr-372811ca

8e05527

Merge pull request #5 from Hiroshiba/hiho-counter-pr-372811ca

2342a8b

VOICEVOX#2472 の変更提案プルリクエスト

sigprogramming added 2 commits January 22, 2025 22:50

CharacterPortrait.vueにクリッピングコンテナを追加し、画像のはみ出しを防止、pointer-events:noneを追加

519d9b1

gridCellWidthとgridCellHeightの依存関係を削除し、ScoreSequencer.vueでの計算を直接行うように変更

b64096b

sigprogramming requested a review from Hiroshiba January 22, 2025 14:20

Hiroshiba reviewed Jan 22, 2025

View reviewed changes

sigprogramming and others added 3 commits January 23, 2025 23:31

Update src/components/Sing/CharacterPortrait.vue

fce1c16

Co-authored-by: Hiroshiba <[email protected]>

DummyGridからGridSpacerに変更

39400f8

mainをマージ [update snapshots]

0e896dd

sigprogramming requested a review from Hiroshiba January 23, 2025 14:50

（スナップショットを更新）

8495413

Hiroshiba reviewed Jan 23, 2025

View reviewed changes

Merge remote-tracking branch 'upstream/main' into pr/sigprogramming/2472

b58632d

Hiroshiba approved these changes Jan 23, 2025

View reviewed changes

Hiroshiba changed the title ~~ソング：音素タイミングの表示エリアを追加~~ feat: ソング：音素タイミングの表示エリアを追加 Jan 23, 2025

Hiroshiba enabled auto-merge January 23, 2025 17:31

Hiroshiba added this pull request to the merge queue Jan 23, 2025

Merged via the queue into VOICEVOX:main with commit 8c4f742 Jan 23, 2025
11 checks passed

sigprogramming deleted the add_parameter_panel_area branch January 25, 2025 14:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ソング：音素タイミングの表示エリアを追加 #2472

feat: ソング：音素タイミングの表示エリアを追加 #2472

sigprogramming commented Jan 4, 2025 •

edited

Loading

voicevox-preview-pages bot commented Jan 4, 2025 •

edited

Loading

sigprogramming Jan 5, 2025

sigprogramming commented Jan 5, 2025

sigprogramming Jan 5, 2025 •

edited

Loading

romot-co Jan 5, 2025

romot-co Jan 17, 2025 •

edited

Loading

romot-co Jan 17, 2025

sigprogramming Jan 18, 2025 •

edited

Loading

Hiroshiba Jan 19, 2025

romot-co Jan 20, 2025

Hiroshiba commented Jan 5, 2025

sigprogramming commented Jan 5, 2025

Hiroshiba left a comment

Hiroshiba Jan 16, 2025

sigprogramming commented Jan 16, 2025

Hiroshiba commented Jan 16, 2025

Hiroshiba commented Jan 18, 2025 •

edited

Loading

sigprogramming commented Jan 22, 2025

Hiroshiba commented Jan 22, 2025 •

edited

Loading

Hiroshiba left a comment

Hiroshiba left a comment

Hiroshiba left a comment

feat: ソング：音素タイミングの表示エリアを追加 #2472

feat: ソング：音素タイミングの表示エリアを追加 #2472

Conversation

sigprogramming commented Jan 4, 2025 • edited Loading

内容

関連 Issue

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

その他

voicevox-preview-pages bot commented Jan 4, 2025 • edited Loading

sigprogramming Jan 5, 2025

Choose a reason for hiding this comment

sigprogramming commented Jan 5, 2025

sigprogramming Jan 5, 2025 • edited Loading

Choose a reason for hiding this comment

romot-co Jan 5, 2025

Choose a reason for hiding this comment

romot-co Jan 17, 2025 • edited Loading

Choose a reason for hiding this comment

romot-co Jan 17, 2025

Choose a reason for hiding this comment

sigprogramming Jan 18, 2025 • edited Loading

Choose a reason for hiding this comment

Hiroshiba Jan 19, 2025

Choose a reason for hiding this comment

romot-co Jan 20, 2025

Choose a reason for hiding this comment

Hiroshiba commented Jan 5, 2025

sigprogramming commented Jan 5, 2025

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba Jan 16, 2025

Choose a reason for hiding this comment

sigprogramming commented Jan 16, 2025

Hiroshiba commented Jan 16, 2025

Hiroshiba commented Jan 18, 2025 • edited Loading

sigprogramming commented Jan 22, 2025

Hiroshiba commented Jan 22, 2025 • edited Loading

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment

Choose a reason for hiding this comment

sigprogramming commented Jan 4, 2025 •

edited

Loading

voicevox-preview-pages bot commented Jan 4, 2025 •

edited

Loading

sigprogramming Jan 5, 2025 •

edited

Loading

romot-co Jan 17, 2025 •

edited

Loading

sigprogramming Jan 18, 2025 •

edited

Loading

Hiroshiba commented Jan 18, 2025 •

edited

Loading

Hiroshiba commented Jan 22, 2025 •

edited

Loading