背景
うたかたの曲が100を超えた。機能も増えて、画面の上には移調・カポ・文字サイズ・段組・小節線・印刷と、性格の違うボタンがずらっと並ぶようになった。機能の違うものが一緒くたに見える。ここを仕切り直した。
Word風のリボンに整理
コントロールはタブ4つのリボンにまとめた。WordやExcelの上部にある、あの帯と同じ形式だ。楽譜の内容を変える操作（移調・カポ・コード図）、見た目の調整（文字・段組・小節線）、印刷、管理、で分けている。
譲れなかったのは「画面が勝手に動かない」こと。タブを切り替えても楽譜が1ピクセルも動かないようにバーの高さを固定し、開くたびに楽譜全体を押し下げていたカポ提案のパネルも、上にかぶせる方式に変えた。
ボタンの記号は自作せず、Lucideというオープンソースのアイコン集を借りて統一した。テキストの記号そのままだと、どうしても手作り感が出る。
段組は1〜4段、文字サイズは自動で
「1画面で全体を見渡したい」と「文字を大きくしたい」は引っ張り合う。そこで段組を1〜4段で切り替えられるようにして、フィットボタンを押すと、いまの段数のまま一画面に収まる最大の文字サイズが自動で選ばれるようにした。
全108曲で測ってみると、3段組なら94曲が紙1枚に収まる。2段では73曲だったので、3段が思った以上に有効だった。印刷の用紙の向きも段数から自動で決まる（1・2段は縦、3・4段は横）。
ステージ用の最大化ボタンも付けた。リボンを消してブラウザごと全画面にし、広くなったぶん文字サイズを取り直す。
押さえ方は、登録せずに計算で出す
今回いちばんの設計転換。うたかたはコードの押さえ方の図を出せるが、図のデータはコード名ごとに1つずつ登録してあった。この方式は移調に弱い。キーを変えると登録のないコード名が生まれて、図が「?」だらけになる。移調のたびに登録して回るのか？
やめて、計算で導くことにした。ギターは同じ形のまま半音ぶんフレットをずらせば別のコードになる楽器だ。この平行移動の性質をそのまま実装して、登録済みの形から未登録コードの押さえ方を導く。つまり、Fの形を2フレットずらしてGを作る、をプログラムがやる。
移調計算が生む理論上の音名（FbはEと同じ音）まで面倒を見て、どのキーへ動かしても「?」が出なくなった。導いた形がどうにも押さえにくいコードだけ、個別に登録すれば上書きできる。
弾いて確かめる工程へ
画面を整えたら、次は中身の検証。全曲に「未検証」のタグを付けて、実際に弾いて確かめては外していく工程を始めた。さっそく、昔自分がWordで編集したコード表が元になっていた曲で、ほぼ全行のコードが歌詞より1文字ぶん後ろにずれているのが見つかった。
曲が増えたぶん、一覧ページも詰め直した。1行を薄くして画面の幅に応じて最大3段に流し込み、108曲をひと目で見渡せる形にしている。
あわせてコードの一覧ページも作った。全部の押さえ方をルート音別に眺められて、覚えた形にはチェックが付けられる。「マイナーは3度の音を1フレット下げる」といった押さえ方の導き方のメモも載せて、自分用の辞典と単語帳を兼ねるページになった。
感想
いろいろやった。最初は実際に弾きながらの調整で、自分がWordで編集した譜面が元の曲を直すのにだいぶ苦労した。曲一覧の見た目は改めて見ても満足のいく仕上がりで、ぱっと一覧で見れるのは個人的に好きなんだな。コードのメモ書きも結構苦労したが、自分用の辞典と単語表みたいなものができた感じで満足感がある。メニュー周りの見た目もだいぶ良くなった印象。