ハコヅミを作る #55：スマホで使って気づいた、小さな見た目の直し（引っぱると見える色、畳む欄、札を隠す）
前回（#54）に続いて、テスタを待つあいだの直しです。今回は、自分の iPhone で使って気になった、見た目の小さなところばかりです。
- 引っぱると、フッターの下に別の色が見える
- 料理の食材を選ぶ欄で、食材を先に出す
- スマホでは、札を出さない
- 改行した「今回不要」を、右にそろえる
- 無料の枠を、使い切る
引っぱると、フッターの下に別の色が見える
iPhone の Chrome で、ページの一番下までスクロールして、さらに上へ引っぱると、緑のフッターの下に、ベージュの帯が見えました。まだ下に何かがあって、スクロールが止まっていないように見えます。
Claude Code に調べてもらうと、フッターの下には、何もありませんでした。Chrome と Safari のエンジン（WebKit）の両方で、ページの高さを測って確かめています。
見えていたのは、ページの「外側」の地の色でした。iPhone では、端で引っぱると、ページ全体がゴムのように伸びます。伸びてできたすき間には、いちばん外側の要素（html）の背景の色が出ます。ハコヅミでは、ここがベージュのままでした。
直し方は、色の置き場所を入れ替えるだけです。
| 要素 | 直す前 | 直したあと |
|---|---|---|
html（いちばん外側） |
ベージュ | 緑（ヘッダー・フッターと同じ） |
body（中身） |
なし | ベージュ |
上で引っぱっても下で引っぱっても、見えるのはヘッダー・フッターと同じ緑になり、つながって見えます。
気をつけたのは、中身が短い画面です。ログインの画面のように中身が短いと、body が画面の下まで届かず、フッターの上に緑の帯が見えてしまいます。もともと、ページ全体を画面の高さいっぱいにしてあったので、そうはなりませんでした。E2E テストで、body が画面を覆っていることも確かめています。
引っぱる動きそのものは、止めていません。止めると、Android の Chrome で、一番上で引っぱって読み込み直す動きも効かなくなるためです。
「何もないはずの場所に、何かが見える」ときは、ページの外側の地の色を疑います。
料理の食材を選ぶ欄で、食材を先に出す
料理の登録では、食材を、消耗品の中からチェックで選びます。ここに、自分の消耗品が全部並びます。ガス缶、薪、ゴミ袋も並ぶので、卵や牛乳を探しにくくなっていました。
最初に思いついたのは、「食材」のカテゴリの消耗品だけを出す形です。Claude Code に相談すると、困ることが1つ出てきました。
消耗品のカテゴリは、自由に書ける文字です。「調味料」「食料」などに分けている人は、「食材」だけに絞ると、塩や醤油が選べなくなります。
そこで、絞るのはやめて、並べ方を変えました。
- カテゴリ「食材」を、一番上に開いて出す
- ほかのカテゴリは、「ほかの消耗品から選ぶ」の中に畳んでおく
- 畳んだ中で選んでいるものがあっても、開かない。見出しに「（2 件 選択中）」と数を出す
食材が上、ほかは畳んである
開くと、ほかのカテゴリから選べる
畳むのは、ブラウザに標準で付いている開閉の部品（<details>）です。JavaScript が動かないときも、開いて選べます。
テストの順番で、畳まれたり、畳まれなかったりする
作っている途中で、前からある料理の E2E テストが、まとめて落ちました。
E2E テストは、どれも同じテスト用のユーザーで動きます。料理のテストの1つは、「新しい食材」を書いて保存し、カテゴリ「食材」の消耗品を作ります。このテストが先に走ると、そのあとのテストでは、ほかのカテゴリが畳まれます。畳まれた中のチェックボックスは、見えないので押せません。
CI では、E2E を3つに分けて流すので、どのテストが先に走るかは決まっていません。前回（#54）と同じく、ほかのテストのデータに左右される形です。
「畳まれていたら開く」という手順を1つ作り、ほかのカテゴリを選ぶテストでは、先にそれを呼ぶようにしました。新しく書いた「畳む」のテストは、テストごとに別のユーザーを作って、データを自分で用意しています。
スマホでは、札を出さない
プランの登録では、持っていくギアをチェックで選びます。1行に、製品名・メーカーの札・コンテナの札が並びます。PC や iPad mini では気になりませんが、スマホの幅では、名前も札も細く押し込まれて、2〜3行に折れていました。
直す前（幅 375px）
ここで要るのは、「どれを持っていくか」だけです。メーカーやコンテナは、ギアの画面で見られます。そこで、画面の幅が 640px より狭いときだけ、札を出さないようにしました。iPad mini は縦にしても 744px あるので、今までどおり札が出ます。
直したあと
札の部品に「スマホの幅では出さない」という指定を1つ足して、出したくないところで付ける形にしました。隠した札は、読み上げからも外れます。
受入で、広げる
最初に直したのは、プランの選ぶ欄と、料理の食材の欄の2か所でした。開発環境で受入の確認をしてみると、ほかの画面の札も気になってきました。
- コンテナの編集の「中に入っているギア」のメーカー
- 消耗品の一覧のコンテナ
- キャンプの持ち物チェックのメーカー
どれも、スマホでは出さないことにしました。最後まで残したのは、ギアの一覧だけです。ギアの一覧は、ギアを眺めるための画面なので、メーカーとコンテナが見えたほうがよいと考えました。
Issue を書いた時点では、「ほかの画面の札は、スマホでも出す」を受入条件にしていました。1か所を直して、実物で見比べてみて、はじめて「ほかもこのほうがよい」と分かりました。
ギアの一覧のタブ
ついでに、前から残っていたものも1つ直しました。ギアの一覧の「所有・欲しい・廃棄済」のタブは、件数が4桁になると、幅 375px ではみ出します。
直す前（3つとも 1234 件）
案は2つありました。
| 案 | 中身 | 幅 375px | 幅 320px |
|---|---|---|---|
| A | 小さい文字と詰めた余白を、スマホの幅全部で使う | 収まる | 8px はみ出す |
| B | 括弧を外して「所有 1234」にし、数を一回り小さく | 収まる | 収まる |
Claude Code は、320px でも収まる案B をすすめてきました。わたしは、案A にしました。件数の見せ方（「所有（12）」）は、ほかの画面とも合わせて決めたものなので、変えたくなかったからです。320px で3つとも4桁になるのは、上限のない管理者だけです。
直したあと（案A）
改行した「今回不要」を、右にそろえる
持ち物チェックでは、各行の右端に「今回不要」のチェックボックスがあります。名前が長い行だけ、「今回不要」が次の行に回り、左端に出ていました。チェックボックスが縦に2つ並んで、どちらが何か、ぱっと見て分かりにくくなります。
直す前
次の行に回ったときだけ、右端に寄せました。直したのは、ml-auto（左の余白を自動で広げる）という指定を1つ足すだけです。1行に収まる行は、もともと右端にあるので変わりません。
直したあと
無料の枠を、使い切る
この日の夕方、GitHub から「Actions の無料の枠を 100% 使いました」というメールが届きました。#53で 90% のメールが来て、使う分を減らす直しをしたばかりでした。
止まりはしませんでした。#53 のときに、Actions の予算を 0 ドルから上げておいたので、ここからは、使った分だけ払う形で続きます。0 ドルのままだったら、ここで CI もデプロイも止まり、マージしても開発環境に出なくなるところでした。
この記事の直しだけで、PR を6本出していました。直しのたびに PR を出し、受入で広げた分も、別の PR にしていたためです。develop 向けの PR は、1回の CI で 13 分ほど使います。
残りの日は、出し方を変えました。
- 小さな直しは、1つの PR にまとめる
- 本番リリースの前に足すお知らせも、直しと同じ PR に入れる
お知らせは、前回（#54）の学びのとおり、リリースの前に develop に入れておきました。今回は、順番を間違えずに出せました。
おわりに
- 「何もないはずの場所に、何かが見える」ときは、ページの外側（
html）の地の色を疑う - 自由に書ける文字で絞ると、分け方の違う人が困る。絞らずに、並べ方で助ける
- 同じユーザーでテストを流すと、ほかのテストのデータで、画面の形が変わることがある
- 1か所を直して実物で見ると、ほかも気になる。受入の確認は、広げどき
- 案を選ぶときは、今ある見せ方とのそろい具合も、理由になる
- 無料の枠は、止まる前提で予算を決めておく。止まらないなら、まとめて出す
次回こそ、テスタからの最初の声を聞く予定です。