写真などの好きな画像を、メトロノームの画面の背景にできるようにしました。メニューの「表示設定」の「背景の画像」で画像を選ぶか、欄の左の小さな見本（サムネイル）の枠に、画像のファイルをドロップします。サインインしていれば画像はアカウントに保存され、ほかの端末でも同じ背景になります。画像は自分にしか見えません。
- サムネイル。画像のファイルをここにドロップしても選べます
- 背景の見え方（濃さとぼかし）を変えるボタン
画像を背景にするだけなら、画像を画面の奥に置いて、画面の背景色を透明にすれば済みます。ただ、それだけでは、ボタンが画像になじまずに浮いて見えました。この記事では、画像の上でもボタンやテンポの数字が読みやすく、画像になじむようにした工夫を書きます。
背景色を透明にしただけでは、ボタンが板のまま残る
最初に作った形は、次の順に重ねるものです。
- いちばん奥に、選んだ画像を置く
- その上に、画面の背景色（ダークモードなら黒、ライトモードなら白に近い色）を薄くかぶせる
- メトロノームの画面の背景色は透明にして、画像が見えるようにする
ところが、テンポや拍子のボタンは、ボタンごとに背景色で塗られています。透明にしたのは画面全体の背景色だけなので、ボタンは塗られたまま、画像の上に残りました。ダークモードでは、黒い板が画像の上に浮いたように見えます。白い小さな文字（「テンポ」の見出しなど）は、明るい画像に埋もれて読めなくなりました。
- 拍のメーター（画面の上の、拍ごとのマス）。マスも塗られたまま残っています
- テンポのボタン。黒い板のまま残り、上の「テンポ」の見出しは背景に埋もれています
中央の範囲に色を重ね、ボタンを半透明にする
メトロノームの画面は、ボタンや数字が画面の中央の縦長の範囲に並んでいます。次の 2 つで直しました。
まず、中央の範囲の後ろにだけ、背景色を半分の濃さでもう 1 枚かぶせます。画像がはっきり見えるのは左右の余白で、ボタンが並ぶ範囲では画像がうっすら透ける程度になります。
次に、中央の範囲のボタンの塗りを半透明にします。ボタンを 1 つずつ直すのではなく、色の変数（CSS のカスタムプロパティ）を差し替えました。このアプリのボタンは、背景色を --mfm-bg などの変数で塗っています。背景に画像があるあいだだけ、中央の範囲でこの変数を半透明の色に置き換えると、その中のボタンがまとめて半透明になります。
/* data-app-background: 背景に画像がある（<html> に付ける）
data-app-surface: 中央の範囲 */
[data-app-background] [data-app-surface] {
--mfm-bg: var(--mfm-bg-on-image);
--mfm-bg-hover: var(--mfm-bg-hover-on-image);
--mfm-bg-pressed: var(--mfm-bg-pressed-on-image);
}ボタンの塗りを抜いて、1px の線だけで形を描く案も考えました。ただ、明るい画像や細かい柄の画像だと、線と文字が画像に埋もれるので採りませんでした。
明るい画像では、線も浮いて見えた
ライトモードで明るい画像を試したときには、拍のメーターのマスを囲む細い線が、画像の上に浮いて見えました。塗りが半透明になると、線で囲まなくてもマスの形はわかります。そこで、背景に画像があるあいだは、マスを囲む線と、中央の範囲の左右を区切る線を消しました。
- 拍のメーター。マスを囲む線を消しました
- テンポのボタン。塗りが半透明になり、見出しも読めます
濃さとぼかしは、背景を見ながら変える
画像全体にかぶせる背景色は、濃いほど文字が読みやすくなる代わりに、画像は見えにくくなります。画像そのものをぼかすこともでき、ぼかすと細かい模様が消えて、文字とぶつかりにくくなります。ちょうどよい値は画像によって違うので、背景を見ながら決められるようにしました。
はじめは、表示設定の中のスライダーで変える形でした。ただ、表示設定は画面にかぶさるので、スライダーを動かしても背景の変わり方が見えません。そこで、「濃さとぼかしを調整」を押すと表示設定が閉じ、メトロノームの画面を隠して、背景の上にスライダーだけを出すようにしました。
- 濃さとぼかしのスライダーと、「キャンセル」「完了」のボタン
「完了」で値を決め、「キャンセル」なら調整を始める前の値に戻して、どちらも表示設定に戻ります。新しく画像を選んだときも、そのまま調整に移ります。