テーマや拍の表示などの切り替えを、「表示設定」1 か所にまとめた

Metronome.fm では、新しい機能ができるたびに、その機能の表示の切り替えをメニューに並べてきました。録音ができるようになったときの「録音ボタンを表示」や、拍を拍のメーターの代わりに振り子で示せるようにしたときの「振り子の表示に切り替え」がそうです。アクセントカラーを選べるようにしたときは、メニューのいちばん下にある言語とテーマの欄に、色の見本を並べました。

ひとつずつのうちは困りませんでしたが、気づくと表示の設定がメニューの 3 か所に散らばっていました。

操作の項目（AI に BPM を尋ねる、トラックを追加など）のあいだに見た目の切り替えが混ざり、メニューも縦に長くなっていました。そこで、表示に関わる設定を「表示設定」1 か所にまとめました。この記事では、何を表示設定にまとめ、何をメニューに残したかと、表示設定の画面のつくりを書きます。

メニューには「表示設定」を 1 つだけ置く

メニューから「録音ボタンを表示」と「振り子の表示に切り替え」の 2 つの項目と、いちばん下の言語・テーマ・アクセントカラーの欄をなくし、代わりに「表示設定」の項目を 1 つ置きました。押すと表示設定のモーダルが開きます。

表示に関わる項目のうち、全画面表示（拍の表示を画面の中央に大きく出すモード）だけは、表示設定に入れずにメニューに残しました。理由はあとの節で書きます。

表示設定のモーダル

表示設定では、言語・テーマ・アクセントカラー・拍の表示（拍のメーターか振り子か）・フッターのボタンを変えられます。選ぶとすぐに画面に反映され、保存のボタンはありません。

設定が 1 か所に集まったので、リセットのボタンも付けました。「表示設定をリセット」を押すと、テーマ・アクセントカラー・拍の表示・フッターのボタンが、何も変えていないときの状態に戻ります。どれを変えたか覚えていなくても、1 回で戻せます。言語はブラウザの設定から決めていることもあるので、リセットしても戻しません。

表示設定は、ドキュメントやブログのページのメニューからも開けます。そこで開いたときは、メトロノームの画面の設定（拍の表示・フッターのボタン）を出さず、言語・テーマ・アクセントカラーだけを出します。

広い画面では左にプレビューを出す

幅が 768px 以上の画面では、表示設定の左にプレビューを出します（それより狭い画面では出しません）。拍の表示とアクセントカラーは、文字で選ぶより、実際の見た目で確かめたいからです。

プレビューの拍は、マニュアルのデモと同じく、アプリのメトロノームの再生とは別に動かしていて、表示設定を開いているあいだだけ、音を出さずに 96 BPM で拍を刻みます。アクセントカラーとテーマはページ全体の色を切り替えるので、プレビューも同じ色になります。

フッターのボタンを選んで並べ替える

画面の下の帯（フッター）には、経過時間・SOUND・TAP・TIMER・START が並び、録音ボタンを出すと REC が増えます。このうち SOUND・TAP・TIMER・REC は、出すかどうかを選んだり、並べ替えたりできるようにしました。

右の設定の欄には、この 4 つのボタンを小さな四角（タイル）にして並べています。押すと出し入れが切り替わり、隠したボタンは薄くなって名前に取り消し線が付きます。ドラッグすると並べ替えられ、スマホでは長押ししてから動かす形です。並べ替えは、マルチトラックの画面と同じく dnd-kit というライブラリで作りました。

経過時間と START は位置が決まっていて動かせないので、タイルには入れていません。できあがるフッターの見た目は、左のプレビューで確かめられます。作っている途中では、タイルの並びの両端に経過時間と START の見本を置いていました。ただ、このあと統計や BPM の解析のボタンも選べるようにする予定です。ボタンが増えることを見込んで、見本はやめ、ボタンだけを 4 つごとに折り返して並べる形にしました。

ボタンを増やしても、隣と重ならないようにする

フッターのボタン 1 つぶんの枠（セル）は、ボタンを増やすほど狭くなります。セルに最小の幅を付けていたため、狭い画面では隣のセルに重なり、文字が切れていました。そこで、セル自身の幅に合わせて見た目を変える CSS のコンテナクエリを使い、セルの幅に合わせてアイコンを縮め、セルの幅が 44px を切ったらアイコンの下の名前を隠すようにしました。

@utility mfm-transport-cell {
  container: mfm-transport-cell / inline-size;
  min-width: 0;
  overflow: hidden;

  & [data-transport-icon] svg {
    width: clamp(1rem, 55cqi, 1.375rem);
    height: clamp(1rem, 55cqi, 1.375rem);
  }

  @container mfm-transport-cell (width < 2.75rem) {
    & [data-transport-caption] {
      display: none;
    }
  }
}

アイコンはセルの幅の 55% の大きさにし、16px より小さく、22px より大きくはしません。スマホでボタンを 4 つ出すと、名前が隠れてアイコンだけが並びます。

全画面表示はメニューに残した

全画面表示は、拍の表示を画面の中央に大きく出すモードです。表示に関わる機能なので、最初は表示設定に入れることも考えました。

ただ、ほかの設定と違って、全画面表示は一度選んだらそのままにしておくものではありません。譜面台に端末を置いて弾き始める直前に入り、終わったら出ます。表示設定の中に置くと、メニューを開き、表示設定を開き、全画面表示を押し、モーダルを閉じる、と手順が増えます。すぐに切り替えたい操作なので、これまでどおりメニューの 1 つの項目に残し、キーボードの F キーでも入れるままにしました。

なお、アプリの全画面表示に入るときは、項目を押したりキーを打ったりした、その操作の処理の中で、ブラウザそのものの全画面（Fullscreen API）も呼んでいます。ブラウザは、ユーザーの操作から始まった処理の外で全画面を求められると拒むためです。

export const openFullscreen = () => {
  useFullscreenStore.setState({ isOpen: true });
  // 画面全体（html）を全画面にする
  document.documentElement.requestFullscreen().catch(() => {
    // 拒否されたときは、アプリの中の切り替えだけで続ける
  });
};

ドキュメントのヘッダーでも切り替える

トップページのヘッダーには、もともとアクセントカラー・テーマ・言語（JA / EN）の切り替えがありました。ドキュメントは読むためのページです。メニューを開いて表示設定を探すより、ヘッダーで 1 回押して変えられるほうが手軽なので、ドキュメントのヘッダーにも同じ切り替えを置きました。

トップページとドキュメントでは同じ部品を使っているので、見た目も使い方も同じです。言語を切り替えると、同じページの英語版（または日本語版）に移ります。スマホの幅ではロゴとメニューの場所が足りないので、言語の切り替えはヘッダーに出さず、メニューの表示設定から変えます。

ヘッダーに切り替えを置いても、ドキュメントのメニューの「表示設定」はそのまま使えます。アプリでもドキュメントでも、メニューの「表示設定」を開けば、表示の設定を変えられます。