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

[romot-co]

内容

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

色関連の修正

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

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

表示上の調整

Toolbar

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

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

ScoreSequencer/SequencerGrid/SequencerKeys/SequencerRuler:

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

SequencerNote

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

LyricInput

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

SequencerPitch

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

関連 Issue

ref #1810
close #1810

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

ノート編集

ピッチ編集

その他

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

---

設計についての考え方

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

[Hiroshiba]

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

---

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

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

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

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

---

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

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

[Hiroshiba]

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

[romot-co]

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

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

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

[Hiroshiba]

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

[Hiroshiba]

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

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

候補考えてみました！

1. なるべく書くということにして、忘れてもまあ別にいいことにする
2. 書き忘れていないかチェックするテストを書く
3. 自動更新するスクリプトを用意する
4. scssを頑張って自動でoklabとrgbどちらも出力するようにする
5. 思い切って無しにする

個人的には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

[romot-co]

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

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

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

[romot-co]

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

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

[Hiroshiba]

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

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

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

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

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

[romot-co]

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

[romot-co]

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

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

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

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

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

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

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

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

[Hiroshiba]

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

ライトモード

ダークモード

[romot-co]

前々から出てたのかちょっとわからないのですが、npm run electronしたときにコンソールにSCSS周りでワーニングが出てるようでした！

Warning: 3 repetitive deprecation warnings omitted.

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
23  │ ┌   &:last-child {
24  │ │     margin-bottom: 0.6rem;
25  │ │   }
    │ └─── nested rule
... │
27  │     gap: 0px 1rem;
    │     ^^^^^^^^^^^^^ declaration
    ╵
    src\components\Talk\AudioCell.vue 27:3  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($character-item-size, 2) or calc($character-item-size / 2)


   ╷
60 │           $icon-size: $character-item-size / 2;
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    src\components\Dialog\DefaultStyleListDialog.vue 60:23  root stylesheet

[@vue/compiler-sfc] :deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of :deep <inner-selector>.     

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(vars.$character-item-size, 2) or calc(vars.$character-item-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
27 │       $icon-size: vars.$character-item-size / 2;
   │                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    src\components\Dialog\CharacterTryListenCard.vue 27:19  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($style-item-size, 2) or calc($style-item-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
67 │             $icon-size: $style-item-size / 2;
   │                         ^^^^^^^^^^^^^^^^^^^^
   ╵
    src\components\Dialog\DefaultStyleSelectDialog.vue 67:25  root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ╷
54 │ ┌   &:not(.is-in-selected-track) {
55 │ │     border: 1px solid tint(rgba(colors.$primary-rgb, 0.7));
56 │ │     background-image: linear-gradient(
57 │ │       -45deg,
58 │ │       tint(colors.$primary),
59 │ │       tint(colors.$primary) 25%,
60 │ │       tint(rgba(colors.$primary-rgb, 0.36)) 25%,
61 │ │       tint(rgba(colors.$primary-rgb, 0.36)) 50%,
62 │ │       tint(colors.$primary) 50%,
63 │ │       tint(colors.$primary) 75%,
64 │ │       tint(rgba(colors.$primary-rgb, 0.36)) 75%,
65 │ │       tint(rgba(colors.$primary-rgb, 0.36)) 100%
66 │ │     );
67 │ │   }
   │ └─── nested rule
68 │     animation: stripes-animation 0.7s linear infinite;
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
    src\components\Sing\SequencerPhraseIndicator.vue 68:3  root stylesheet

もし直せそうなら･････！ 🙇 （大変そうなら一旦そのままでも！）

こちらSASSで関数利用するための
SASSバージョンのアップデートのためかと思います

修正いたしました！

(Quasarもdeprecatedが出ているのですが両方バージョンアップは影響範囲広そうなのいったんこのままで…

[romot-co]

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

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

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

---

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

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

---

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

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

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

[Hiroshiba]

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

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

[sevenc-nanashi]

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

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

[sevenc-nanashi]

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

[romot-co]

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

[romot-co]

@sevenc-nanashi

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

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

[Hiroshiba]

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

[Hiroshiba]

LGTM！！！！！！！！

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

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

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

---

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

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

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

[romot-co]

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

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

こちら今は特にないです

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

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

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

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

---

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

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

[romot-co]

(スクショです)

[Hiroshiba]

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

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