Mole のメニューバーの数字をなじませる
Mole はメニューバーの小さなモグラの横に数字を 2 つ表示でき、初期設定では CPU とメモリです。周りのアイコンと並べるとどうもなじまない、でもどこがおかしいのかは言えない、という声はずっと前からもらっていました。今回は自分のメニューバーのスクリーンショットを撮り、項目を 1 つずつ見比べました。問題は特定の数字ではありませんでした。文字サイズ、ウェイト、間隔はそれぞれ単独なら悪くないのに、組み合わさると Mole だけがメニューバーの中で浮いていたのです。
まずは隣の項目から
スクリーンショットでは、Mole の左隣がオープンソースのメニューバーモニター Stats でした。メニューバーを描画しているコードを読むと、小さなセルは 7pt の細いラベルの下に 12pt のレギュラーの値を置き、2 行表示のネットワーク速度は 9pt で、メニューバーのどこにも太字はありません。Mole は 8pt のセミボールドで 2 行でした。同じスクリーンショットで測ると Mole の文字は高さ 12 ピクセル、Stats は 13 から 16 ピクセルで、Mole は隣より 1 サイズ小さく、しかもバーで唯一の太字だったので、小さな灰色のにじみのように見えていました。
以前にも何度か調整していて、10pt から 9pt、8pt と小さくしてきましたが、毎回モグラ単体を見ていて、ほかのステータス項目と並べてはいませんでした。だから文字は小さくなる一方で、ウェイトは変わらないままでした。メニューバーはみんなで共有する場所で、1 つのアプリの項目だけを切り離して見る人はいません。そこで今回は、みんなが毎日見慣れているスタイルに合わせることにしました。ラベルは 7pt の細字、値は 12pt のレギュラー、2 行表示とネットワーク速度は 9pt のレギュラー、太字はなしで、階層はサイズだけで表します。
枠ではなく字面を測る
文字が決まると、今度は間隔の問題が見えてきました。モグラと最初の数字の間、2 つの指標の間、ラベルと値の間が、それぞれ別々の方法で計算されていたので、項目が 1 つのまとまりに見えませんでした。以前のコードは画像の端や文字のレイアウト枠から距離を測っていましたが、目に入るのは字面で、枠と字面の間の余白は字形ごとに違います。どちらも 3pt に設定した 2 つの隙間が、見た目では倍ほど違って見えることもありました。
これが一番はっきり出ていたのがモグラです。キャラクターごとのスプライトシートにはそれぞれ透明な余白があるので、画像の端から固定の距離を取ると、モグラの横には 6.5pt しか残らず、別のキャラクターではもっと広くなりました。今はすべてのアニメーションフレームで一番右にある不透明なピクセルを探し、そこから測るので、どのキャラクターを選んでも数字までの距離はおよそ 12pt になります。
2 つの指標の間にも似た落とし穴がありました。各セルは一番幅の広い表示のぶんだけ場所を確保していて、パーセントなら 100% のぶんです。こうしておけば値が 9% から 44% に変わってもメニューバーがずれず、2 桁の値ならセルの間にはおよそ 13pt が空きます。ところが両方のセルが 100% になると、確保していた余裕はなくなります。作業中のあるバージョンではセルの間が 3pt しかなく、フル負荷時の 2 行表示では 100%999 KB/s とつながって表示されてしまいました。今はセル同士を最低 6pt 離しているので、フル負荷でも分かれて見えます。ラベルと値の上下の間隔は 3.5pt で、Stats と同じです。
左揃えの 2 行でも、ずれて見えることがある
以前のセルではラベルが数字の上に中央揃えで置かれていて、上に浮いた説明文のように見えていました。今回はラベルと値をどちらも左揃えにして同じ x 座標から描いているので、揃うはずでした。ところが拡大すると、ラベルはいつも数字より少し左にありました。原因はフォントにあります。どの字形も左側に小さな余白を持っていて、12pt の等幅数字では 0.7 から 1.0pt、数字の 1 は 1.7pt あるのに、7pt のラベルの大文字は 0.3 から 0.6pt しかありません。描き始めの位置は同じでも、見える線は 1 から 3 ピクセルずれ、値が 1 で始まるときに一番目立ちます。
直し方は、ラベルを値の最初の線に合わせて動かし、値のほうは動かさないことです。値は毎秒変わるので、先頭の数字が変わるたびに位置がずれると、見ている数字が左右に揺れてしまいます。上の小さなラベルを動かせばそれは起きず、ラベルが動くのは値の十の位が変わるときだけで、その量も 1pt 未満です。
線をぴったり揃えても、値はまだ少し右に寄って見えました。小さな文字の下に大きな数字を置くとよく起きる錯覚で、12pt の丸い数字は 7pt の細いラベルよりずっと大きく、目は大きい字形の端を内側にあるように読み取ります。0、0.5、1pt の 3 通りを比べました。1pt ではもう数字がはみ出して見えたので、今は値を 0.3pt、つまり半ピクセルより少し多く左に出しています。これで 2 行が同じ端に立っているように見えるちょうどいい量です。
どの数字も幅を確保しておく
メニューバーの中で何かの幅が変わると、その右にあるアイコンがすべて一緒に動きます。だから表示の種類ごとに、一番幅の広い形のぶんだけ場所を確保しておく必要があります。見落としが 2 つありました。ファンの回転数は 1000 rpm 未満なら 850、それ以上なら 2.1k と表示していて、2 つの形で確保する幅が違ったため、ファンが 1000 rpm をまたぐとメニューバー全体が跳ねていました。スワップはシステムのバイト表記をそのまま使っていたので 10.52 GB になり、フランス語のシステムでは 1,2 Go になります。12pt のセルには長すぎるうえ、幅も値によって変わっていました。今はファンの 2 つの形が同じ幅を共有し、メニューバーのスワップは常に 512 MB、1.2 GB、12 GB のような最大 3 桁の短い形で表示します。正確な値はポップオーバーに残してあります。
ついでにネットワーク速度も 1 か所直しました。以前は 10 KB/s 未満で小数点以下 1 桁を表示していたので、アイドル時の 0.0 KB/s が 86 KB/s の上に並び、片方の行にだけ小数点があって、右揃えにしてもきれいに揃って見えませんでした。毎秒 0.1 KB 単位の違いにはほとんど意味がないので、KB/s は常に整数にしました。MB/s は 10 未満なら小数点以下 1 桁を残しています。1.5 MB/s と 1 MB/s の違いには意味があるからです。
設定のしかた
Mole の設定で「メニューバー」タブを開きます。「表示」の行には 3 つの選択肢があり、「ランナー」はモグラだけ、「メトリクス」は数字だけ、「両方」はモグラの横に数字を表示します。この記事の数字を見たいなら「メトリクス」か「両方」を選んでください。すると下にいくつか項目が増えます。「レイアウト」を「横並び」にするとラベルが上、値が下のセルになり、「縦並び」にすると 2 行の小さな文字になります。「指標1」と「指標2」で 2 つの指標を選び、初期設定は CPU とメモリですが、どちらも GPU、温度、電力、ファン、スワップ、Bluetooth デバイスのバッテリーに切り替えられます。「ネットワーク速度」をオンにすると、右側にアップロードとダウンロードが加わります。モグラ自体は「スタイル」で別のキャラクターに替えられ、その横のボタンでキャラクターの向きを反転できます。
モグラはなぜあんなに速く走っているのか、と聞かれることがあります。走るペースは CPU の読み値そのもので、Mac が忙しいほど速く走ります。見ているのは CPU 全体の使用率と 1 分間のロードアベレージのうち高いほうです。完全にアイドルのときは約 1.3 秒に 1 歩で、70% からはそれ以上速くならず、だいたい 1 秒に 4 歩です。負荷が低いところでは曲線が速く上がるので 10% と 30% がはっきり違って見え、ブラウザを開いて文章を書いているくらいでも、アイドル時の約 2 倍の速さで走ります。コードのコンパイルや動画の書き出しをすると、本格的に走り出します。このペースは意図して残しているシグナルなので、速度の設定は別に設けていません。ほかのキャラクターはそれぞれのペースで動きます。キャラクターごとにアニメーションのフレーム数が違うからです。モグラだけを表示しているときは、ポインタを重ねると「CPUが忙しいほど速く走ります」というヒントも表示されます。
試したけれど、そのままにしたこと
温度のセルが大きすぎると感じたことがありました。単位を 9pt にしたものと 10pt にしたものを作りましたが、どちらも小さくなった ° がベースライン寄りに下がり、58°C が打ち間違いの 58°c のように見え、パーセント記号もすぐ隣の Stats のものより目立って小さくなりました。測り直すと数字は CPU のセルとまったく同じ大きさで、大きく見えたのは 58°C に 44% より大文字が 1 つ多いからでした。なのでサイズは元のままにしました。
キャラクターの横には 2 行表示しか置けず、ラベルを値の上に載せたセルは置けない、という古いルールもありました。このルールが対象にしていたのは 12pt のセミボールドの版でした。太字がなくなった今、その理由はもう当てはまらないので、どちらのレイアウトもキャラクターの横に置けるようにし、初期設定はセルにしました。
振り返ると、どの変更も大きなものではありません。半ピクセル、小数点 1 つ、数 pt の間隔といったものばかりですが、それらが合わさって、アイコンがメニューバーになじむか、そこから飛び出して見えるかが決まります。メニューバーアプリを作っているなら、自分の項目とよく使われる隣の項目をいくつか 1 枚のスクリーンショットに収めて比べてみてください。枠ではなく字面を測り、どの表示にも一番広い幅を確保しておく。この 3 つをやれば、たぶん浮いて見えることはないと思います。
これらの値は今はすべてテストで守られていて、ウェイト、幅、ラベルの揃えにそれぞれ 1 つずつあるので、あとの変更で元に戻ってしまうことは起きにくくなりました。邪魔にならない Mole の設計と同じ考え方です。メニューバーに置くものは、毎日目にしていても意識にのぼらないくらいがちょうどいいのです。