ソング: 正式なカラーとスタイルを定義する #2218

romot-co · 2024-08-13T20:26:47Z

内容

ソング機能において正式なカラーを定義し、スタイルを調整することでユーザーの使い勝手を向上させます。
一定程度のアクセシビリティ対応を含みます。
また、今後の拡張を容易にします。

色関連の修正

ソングのみ
OKLCHベースで色を定義
ほぼMaterialDesign3準拠

※ 動的なテーマ生成+テーマエディタ機能のサブセットとなります

表示上の調整

Toolbar

各要素のサイズを小さく・表示修正
拍表示のグループ化
シンガーの音域調整・音量調整であることをわかりやすくする

※ 今後Quasarが必須でなくなるのであればradix-vueに変更したい

ScoreSequencer/SequencerGrid/SequencerKeys/SequencerRuler:

不要なグリッド線を表示しない: 不要な重なりによるズレや滲みの除去
グリッド線をlineで表示: 目的に応じた塗り分け+(一応)拍子変更に対応できる形にする

SequencerNote

選択中・変更中の表示を明確にする
歌詞表示をズーム倍率に応じて適切なサイズにする
袋文字の色修正(ノートバーからはみだしても見えるように)
歌詞とバーを分割(ノートが狭い感覚で並んだ場合に次のノートの上に文字を表示・ピッチ表示のZ軸揃え)

LyricInput

表示調整
背景を微妙に半透明に: 短いノートが連続している場合に複数入力時に変更があることを一応見えるように

SequencerPitch

カラーの調整
基準ピッチを表示する(単にノート縦中央ライン)
pros: ガイド線となり無いよりは描きやすい・基準ピッチからのずれを把握しやすい
cons: ガイド線に引っ張られた描き方となる
ダーク/ライトテーマで切り替え

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

ノート編集

ピッチ編集

その他

スタイルにおいての変数の使用や書き方については、別途Issue化＋すりあわせができればと思います。

設計についての考え方

各ロールごとの彩度・色相を定義
UIパーツをロールごとに役割をわける
ダーク・ライトごとにロールから明度のみを修正した値を割り当てる

…com/romot-co/voicevox into feature/1810_sing_colors_and_styles

…ors_and_styles

src/components/Sing/ScoreSequencer.vue

Hiroshiba

実装周りの詳細な点を除きつつ、一旦全体的な点に関してコメントしました！

デザインすごくいいと思います！！！
ピアノロールの部分かなり違和感なくて驚きました！！

デザインに関して何点かだけちょっとだけ気になったとこがあったのでコメントさせていただきます！
（変えて欲しいというより、意図があればお聞きしたいみたいな感じです！）

スライダーの色が結構黒くて浮いてるかも･･･？

ノート端ホバー時の太くなり方がちょっと大げさかも？
（これはどっちかというとノート内だけに線が太くなってるから違和感があるだけかも。だとしたら実装的に変更が難しそうなので、今の感じでも･･･！）

今後Quasarが必須でなくなるのであればradix-vueに変更したい

必須ではなくなっていく予定です･･･！！

Hiroshiba · 2024-08-16T14:41:43Z

src/styles/v2/variables.scss

+  --font-regular: 400;
+  --font-medium: 500;
+  --font-bold: 700;
+
+  --input-m-size: calc(var(--size-basis) * 5);
+  --input-l-size: calc(var(--size-basis) * 7);
+
+  --label-l-size: calc(var(--size-basis) * 1.75);
+  --label-m-size: calc(var(--size-basis) * 1.5);
+  --label-s-size: calc(var(--size-basis) * 1.25);
+
+  --border-width-basis: 1px;
+
+  --opacity-medium: 0.87;
+  --opacity-low: 0.6;
+  --opacity-separator: 0.5;
+  --opacity-disabled: 0.38;


この辺りもしかして消し忘れでしょうか 👀

@Hiroshiba
こちら消し忘れです！

いちおうtakuseaさんのv2とあわせようと思って修正しようとしたのですが
(追加したものというよりは、すでにあるgapやpaddingやradiusを使っていたもののそちらは削除済み

たぶんどう使うか・変更するか擦り合わせてからのがいいかなーと思っております！

おお、なるほどです！
たしかに合わせていけると良さそう。

Hiroshiba · 2024-08-16T15:04:26Z

src/styles/v2/sing-colors.scss

+/*
+フォールバック
+*/
+
+@supports not (color: oklch(0% 0 0)) {
+  :root[is-dark-theme="false"] {
+    --scheme-color-primary: #29683a;


ここのフォールバックなるほどです！！

こちらに関して、メンテナンス面考えるとどういう風に扱っていくのがいいでしょう？ 👀
上に値を足したり値を変更したら、こっちも更新する感じとか？
（結構大変そう＆忘れそうだな～～～～と。。）

候補考えてみました！

なるべく書くということにして、忘れてもまあ別にいいことにする

書き忘れていないかチェックするテストを書く

自動更新するスクリプトを用意する

scssを頑張って自動でoklabとrgbどちらも出力するようにする

思い切って無しにする

個人的には2+3か、あるいは5も結構ありなのかなと思ってます！
5にしておいて、将来未サポートなブラウザもサポートする際にフォールバックと2+3を用意するとか･･･！
（変換スクリプトをすでにお持ちでしたら、そのスクリプトを掲載する・あるいはbuildディレクトリに放り込むとかも現実的かも？）

といっても意外とoklchは全ブラウザの最新版ではれサポートされてそう？
oklabの相対色指定は現状safariでサポートされてないものもありそう。
https://developer.mozilla.org/ja/docs/Web/CSS/color_value/oklch#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7

@Hiroshiba
こちら元々がOKLCHおよびフォールバックの両方をスクリプトで出力しているものなため、
3.がいいのかな…？と思っております。

↓なんか以下のあたり
https://github.com/VOICEVOX/voicevox/pull/2181/files#diff-53a6db5ba78e04948402cbc02136756f43540c63b5b2966278324180cd09c7be

4.ができるかもあわせて検討試行してみます！

SASSでOKLCH→その他の形式に変換はむずかしそう

今後、動的テーマ・カスタムテーマに対応するなら同時にHEX出力すれば大丈夫だが
それまでは3.をがんばるか5.にするか

たしかに動的テーマに対応する場合、必ずjs入るからjsで解決できますね！！

こちら元々がOKLCHおよびフォールバックの両方をスクリプトで出力しているものなため、
3.がいいのかな…？と思っております。

おお、なるほどです！！
そちらがあるならたしかに3も近そうですね！

ただ、あとあと動的テーマのときに解決されるのであればパスしても（＝5でも）良いかも･･････？

判断むずいですね！！
個人的には特に他の理由がなければ5寄りの意見です！
（変更用コードはNodeJSで動くようにしないとで結構大変な気がしたので）

@Hiroshiba
ありがとうございます！
簡単な手段も見当たらないため、こちらいったん5にします…！

src/styles/v2/sing-colors.scss

src/styles/fonts.scss

src/styles/_index.scss

romot-co · 2024-08-16T15:58:44Z

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

デザインに関して何点かだけちょっとだけ気になったとこがあったのでコメントさせていただきます！（変えて欲しいというより、意図があればお聞きしたいみたいな感じです！）

スライダーの色が結構黒くて浮いてるかも･･･？

こちらすごく要素増えそう…というのがあり、
プライマリは本当に主要機能部分のみ・それ以外の操作できる部分は目立たないセカンダリがいいかな…？
といった意図です。

黒っぽいのはやめておいたほうがいいかもなので、検討します…！

ノート端ホバー時の太くなり方がちょっと大げさかも？（これはどっちかというとノート内だけに線が太くなってるから違和感があるだけかも。だとしたら実装的に変更が難しそうなので、今の感じでも･･･！）

こちら、ホバー領域が細くてつかみづらいというのがあったため
幅広げた+リサイズハンドルの領域明示化した影響かと思います…！

対応策としては、見かけは細いままで、実質の幅を広げるなど…？

Hiroshiba

マルチトラック時、他のトラックのノートが置かれてる目印に関して、ライトモードの方の視認性が若干足りてないかも･･･？

ライトモード

ダークモード

…com/romot-co/voicevox into feature/1810_sing_colors_and_styles

romot-co · 2024-09-18T16:16:19Z

@Hiroshiba
(おてすきで)
こちら各所修正済みです

ちょっと色々だいぶ細かいコメントをさせていただきました！！
（今コメントでお伝えすれば、きっと今後ずっとお互いやりやすくなるだろうと思い･･･！）

こちらありがとうございます…！
大きくしすぎた＆長くなりすぎたのもあり、だいぶお手数おかけし失礼いたしました…
今後は細かく改善していければと思います

色定義のSCSSファイルで詳細なドキュメントを書いてくださってありがとうございます！！
どうにかしてオープンソースとしてメンテナンスしやすい色定義の形を模索したいですね･･･！！！

メンテしづらい部分があるので
こちらも順次改善していければと思います…！
(動的テーマが入ればむしろ楽になるかも)

またScoreSequencerおよびSequencerNoteの方
以下の形で修正いたしました

プレビューモードの一部をcomposableで管理: usePreviewMode(分割や変更を行いやすく)
ScoreSequencer: プレビュー状態のスタイルを持たせる(各状態時に両方で制御したいため…)
SequencerNote: z-indexの問題で同一コンポーネントにするのが難しそうなため、2つの要素を維持
SequencerNote: スタイルの状態を以前よりは明確にする

今よりは修正しやすくしたつもりではあるのですが
もしレビューの手間かかるなど戻す必要があればおしらせください…！

src/components/Sing/ScoreSequencer.vue

src/components/Sing/SequencerNote.vue

src/composables/usePreviewMode.ts

Hiroshiba

ちょっと最後に変更があった点に関して少しだけコメントさせていただきました 🙇

もうほぼLGTMです！！！！！！！
長くありがとうございました！！！！！

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

sevenc-nanashi

大きくは問題ないと思います。

トラック一覧とツールバーの境目が消えてるのが少し微妙かも？

sevenc-nanashi · 2024-09-19T21:18:21Z

src/components/Sing/ScoreSequencer.vue

+  left: -0.5px;
+  width: 1px;
+  background: var(--scheme-color-inverse-primary);


ぼやき：Windowsだとピクセル単位のズレのせいで線に乗らないの若干気持ち悪いですね...（かといってどうしようもなさそうな予感が）

のちのちですが: Windows環境で調査

romot-co · 2024-09-20T18:04:54Z

@sevenc-nanashi

トラック一覧とツールバーの境目が消えてるのが少し微妙かも？

こちらマージ後、別の形で修正できればと思います！
(サイドバーの調整も合わせ

Hiroshiba

カーソルの管理方法を変えてみた感じですかね！
結構やり取りが長くなっているので、もしかしたらプルリクエストを分けてもいいかも･･･？

src/components/Sing/SequencerNote.vue

src/type/preload.ts

src/components/Sing/ScoreSequencer.vue

src/components/Sing/SequencerNote.vue

src/components/Sing/ScoreSequencer.vue

Hiroshiba

LGTM！！！！！！！！

ソングの見た目がすごくシュッとして良くなったと思います、ありがとうございます！！！
ディスカッションにも丁寧に付き合って頂き本当にありがとうございました 🙇 🙇 🙇
おかげでみんなが納得できる感じに近づけたと思います！！！

せっかくなのでアプデを入れようかなと思うのですが、もうちょっと調整したい部分とかってあったりされますか？ 👀
それを聞いて、もし時間がかかりそうで重要度の高い調整があれば、こちらのプルリクを含まずにアプデするのも手かもと考えています！

sassやOKLABなどの色周りの試行錯誤もとても勉強になりました！！
良い解決策を見つけていきたいですね！！

あ、あとせっかくなのでXでポストしたいのですが、その際に @romot-co さんのXアカウントを開発者として紹介させていただいても構わないでしょうか 👀
こんな感じの内容を予定しています！

#VOICEVOX開発状況 
ソングエディタが見やすくなりました🎉（今後のアップデートで実装されます。）
【開発者:@romotco】
https://github.com/VOICEVOX/voicevox/pull/2218

（見た目のスクショを入れてみても良いかも･･･？）

romot-co · 2024-09-25T23:36:11Z

@Hiroshiba
ありがとうございます！本当にお時間いただいてありがとうございました！

せっかくなのでアプデを入れようかなと思うのですが、もうちょっと調整したい部分とかってあったりされますか？ 👀

こちら今は特にないです

マルチトラックのUI
ツールバーなど共通UIのアップデート(Quasarから変更含む
開発で使いやすい色指定の考慮と実装

…など今後の部分はいろいろありますが、フィードバックも見つつ細かくアップデートしていければ…！

sassやOKLABなどの色周りの試行錯誤もとても勉強になりました！！

こちらOKLABでの色指定などだいぶ回り道して＆お時間いただいてありがとうございました！
現状ベースとしてはそこそこ強固かつ応用も効かせやすい形ではあるかな…と勝手に思っているので
このあと使いやすくしていく方向でやっていければと思います！

あ、あとせっかくなのでXでポストしたいのですが、その際に @romot-co さんのXアカウントを開発者として紹介させていただいても構わないでしょうか 👀

こちら大丈夫です！
スクショ撮っておきます

romot-co · 2024-09-26T00:27:52Z

(スクショです)

src/components/Sing/ScoreSequencer.vue

Hiroshiba · 2024-09-27T17:05:26Z

@romot-co スクショありがとうございます！！明日のAM11時にツイート予約しました 🙏

@sigprogramming さんとのコメントもアーキテクチャ設計の勉強になりました！！！
とりあえずマージさせていただいて大丈夫そうだと思うので、マージさせていただきます！！

romot-co added 3 commits August 14, 2024 04:37

シング側のカラーを定義する+それにあわせたスタイル調整

779f00c

async/awaitのlintエラー修正

cdf244f

調整

5d0a11e

romot-co requested a review from a team as a code owner August 13, 2024 20:26

romot-co requested review from Hiroshiba and removed request for a team August 13, 2024 20:26

romot-co and others added 7 commits August 14, 2024 17:47

調整 [update snapshots]

a1316d5

調整 [update snapshots]

50060af

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

e39f017

調整+テスト落ちるのを修正

107e9bd

Merge branch 'feature/1810_sing_colors_and_styles' of https://github.…

ccba6e4

…com/romot-co/voicevox into feature/1810_sing_colors_and_styles

Merge remote-tracking branch 'origin/main' into feature/1810_sing_col…

d2060c6

…ors_and_styles

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

9628f16

sigprogramming reviewed Aug 15, 2024

View reviewed changes

src/components/Sing/ScoreSequencer.vue Outdated Show resolved Hide resolved

romot-co added 2 commits August 16, 2024 15:11

不要なasync/awaitを付与していたのを修正

75140af

不要なasync/awaitを付与していたのを修正

20358ff

Hiroshiba reviewed Aug 16, 2024

View reviewed changes

src/styles/_index.scss Outdated Show resolved Hide resolved

Hiroshiba reviewed Aug 16, 2024

View reviewed changes

romot-co added 4 commits August 17, 2024 10:05

指摘点調整

9117056

指摘事項修正 [update snapshots]

08732d9

指摘事項修正

8ba3ded

指摘事項修正 [update snapshots]

0af8e2f

romot-co force-pushed the feature/1810_sing_colors_and_styles branch from d76bff1 to 0af8e2f Compare August 17, 2024 02:13

romot-co added 5 commits August 17, 2024 23:58

最低サイズやノートが連続している場合でも歌詞の可読性を上げる

3b35fb4

lyricTextの位置調整

3023a1f

テスト修正

d4572f2

テストを修正

7e9466c

Merge branch 'feature/1810_sing_colors_and_styles' of https://github.…

0aa3c43

…com/romot-co/voicevox into feature/1810_sing_colors_and_styles

romot-co added 5 commits September 17, 2024 22:54

EditTargetSwitcherのHandleKeyDownを削除

3fd7c2b

EventTargetSwitcherのHandleKeyDownを削除

a8507c4

z-index問題があるためNoteの実装を戻す

66036a2

状態を整理・プレビュー状態を一部composableに

8dcd099

コメント修正

d9f709c

romot-co requested a review from Hiroshiba September 18, 2024 16:16

romot-co added 2 commits September 19, 2024 03:19

ピッチ編集時の.note-edgeのhoverを抑制

7110576

ピッチ削除のカーソルをdefaultに修正

8e04c7d

Hiroshiba reviewed Sep 19, 2024

View reviewed changes

src/components/Sing/ScoreSequencer.vue Outdated Show resolved Hide resolved

Hiroshiba reviewed Sep 19, 2024

View reviewed changes

src/components/Sing/SequencerNote.vue Outdated Show resolved Hide resolved

Hiroshiba reviewed Sep 19, 2024

View reviewed changes

src/composables/usePreviewMode.ts Outdated Show resolved Hide resolved

Hiroshiba reviewed Sep 19, 2024

View reviewed changes

Update src/components/Sing/SequencerNote.vue

ef38fa1

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

sevenc-nanashi reviewed Sep 19, 2024

View reviewed changes

romot-co added 3 commits September 20, 2024 09:10

usePreviewModeを削除

4f3b818

useCursorStateおよびカーソル状態の修正

46f6ab7

ノートのcursorを適切にセットする

1cff932

romot-co requested a review from Hiroshiba September 20, 2024 18:06

Hiroshiba reviewed Sep 25, 2024

View reviewed changes

指摘事項修正

0ae4294

Hiroshiba approved these changes Sep 25, 2024

View reviewed changes

sigprogramming reviewed Sep 26, 2024

View reviewed changes

src/components/Sing/ScoreSequencer.vue Show resolved Hide resolved

Hiroshiba merged commit 1ac88a7 into VOICEVOX:main Sep 27, 2024
8 checks passed

sigprogramming mentioned this pull request Sep 28, 2024

ソング：useCursorStateのcursorClassを使用するように変更 #2274

Merged

terapotan mentioned this pull request Dec 3, 2024

Fix:同じ歌詞が連続した場合に、Tabキーによる歌詞ハイライトが動作しない問題を修正（#2345） #2386

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ソング: 正式なカラーとスタイルを定義する #2218

ソング: 正式なカラーとスタイルを定義する #2218

romot-co commented Aug 13, 2024 •

edited

Loading

Hiroshiba left a comment •

edited

Loading

Hiroshiba Aug 16, 2024

romot-co Aug 16, 2024 •

edited

Loading

Hiroshiba Aug 18, 2024

Hiroshiba Aug 16, 2024

romot-co Aug 16, 2024

romot-co Aug 17, 2024

Hiroshiba Aug 18, 2024

romot-co Aug 18, 2024

romot-co commented Aug 16, 2024

Hiroshiba left a comment

romot-co commented Sep 18, 2024

Hiroshiba left a comment

sevenc-nanashi left a comment

sevenc-nanashi Sep 19, 2024

romot-co Sep 20, 2024

romot-co commented Sep 20, 2024

Hiroshiba left a comment

Hiroshiba left a comment •

edited

Loading

romot-co commented Sep 25, 2024

romot-co commented Sep 26, 2024

Hiroshiba commented Sep 27, 2024

ソング: 正式なカラーとスタイルを定義する #2218

ソング: 正式なカラーとスタイルを定義する #2218

Conversation

romot-co commented Aug 13, 2024 • edited Loading

内容

色関連の修正

表示上の調整

Toolbar

ScoreSequencer/SequencerGrid/SequencerKeys/SequencerRuler:

SequencerNote

LyricInput

SequencerPitch

関連 Issue

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

ノート編集

ピッチ編集

その他

設計についての考え方

Hiroshiba left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romot-co Aug 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romot-co commented Aug 16, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

romot-co commented Sep 18, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

sevenc-nanashi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romot-co commented Sep 20, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment • edited Loading

Choose a reason for hiding this comment

romot-co commented Sep 25, 2024

romot-co commented Sep 26, 2024

Hiroshiba commented Sep 27, 2024

romot-co commented Aug 13, 2024 •

edited

Loading

Hiroshiba left a comment •

edited

Loading

romot-co Aug 16, 2024 •

edited

Loading

Hiroshiba left a comment •

edited

Loading