ワダチを作る #11：チェックボックス・一覧の見た目を直して、習慣を並べ替えられるようにし、本番に出した

前回（#10）で、積み上がりの表示を作りました。今回は、使ってみて見つかった、見た目の直しと、習慣の並べ替え、そして本番へのリリースです。

• PC のチェックボックスの角を、丸くした
• スマホの一覧と、「やった内容」の表示を、見やすくした
• 習慣を、つまんで並べ替えられるようにした
• ここまでを、本番に出した（マイグレーションなし）
• 紹介画像を作った

チェックボックスの角

PC で見ると、記録のチェックボックスの角が尖って見える。スマホやタブレットでは、丸いのに。ブラウザ標準の見た目が、OS やブラウザで違うためです。

最初の案は、枠を茶色の太い線にしたものでした。見てもらうと、「未チェックのときに、枠を太くはしないで、角の丸みだけを大きくしてほしい」と言われました。そこで、実装は、次のようにしました。

• 未チェックの枠は、今までと同じ 1px。角の丸みだけ、辺の 25%（24px で 6px）
• チェックしたときは、基本色の塗りつぶしと、白い印
• キーボードで操作するときの、フォーカスの輪は残す

ブラウザ標準をやめて自前にしたので、全画面のチェックボックスに効きます（登録・編集・内容の選択肢も）。全部の画面に効く変更なので、E2E を全件流しました。

「やった内容」と、一覧

朝活のような習慣は、「やった」を付けると、内容（個人開発・勉強など）のチェックが出ます。そこに、「やった内容」という文言と、字下げがありました。文言は要らない（チェックが並んでいれば、内容を選ぶ欄だと分かる）ので、文言をなくして、内容を枠の左端に寄せました。読み上げ用の名前は、画面に見えない形で残しています。積み上がりの行と、左端がそろいます。

習慣の一覧も、スマホで見にくくなっていました。頻度・タイマー・いつからの1行（「毎日・タイマー 10分・2026-09-22 から」）が、名前の列の中で、2〜3行に折り返していたのです。

枠を2段にしました。 1段目は、札・アイコン・名前と、右端の「積み上がり」のボタン（記録の画面の「▶ 10分」と同じ作り）。2段目に、頻度などを、枠の幅いっぱいで、1行に。作り直す途中で、もう1つ、見つけました。以前の文は、テンプレートの改行のせいで、「10分 ・2026-…」と、「・」の前に空白が入っていました。文を作る部分を、「・」でつなぐ関数に変えて、直りました。

習慣を、つまんで並べ替える

実際の朝の流れ（早起き → 瞑想 → ドローイン → 朝活 → ウォーキング → 掃除 → 読書）と、画面の並びが違うと、チェックを付けづらい。作った順に固定されていたので、並べ替えを作りました。

操作は、ハコヅミのレシピの手順の並べ替えと、同じにしました。

• 各枠の左端のつまみの札（⋮⋮）をつまんで動かす（マウス・指・ペン）
• つまんでいる行は、場所が点線の枠になり、中身だけが浮いて動く。ほかの行は、よける
• 画面の端の近くでは、自動でスクロール。Esc や操作の中断で、もとに戻る
• 札にフォーカスを当てて、上下の矢印キーでも動かせる
• パッケージは足さず、自作（ポインターの動きを追う）

決めたことは、次のとおりです。

• 動かせるのは、同じ時間帯（朝・夜）の中だけ。時間帯を変えたいときは、編集で変える
• 動かしたら、その場で保存する。失敗したら、最後に保存できた並びに戻して、案内を出す
• 保存は、その時間帯の習慣が持っている並び順の値を、小さい順に、新しい順へ割り当て直す。朝の習慣を動かしても、夜の習慣の値は変わらない（値が 1・3・5 の間に、夜の 2・4 があっても、そのまま）
• サーバーは、ほかの人の習慣・別の時間帯の習慣・過不足や重複のある並びを、断る

並べ替えの計算（動かす・落とす位置・値の割り当て直し）は、これも純関数にして、ユニットテストで固めました。画面の操作は、E2E で、マウスのドラッグ・矢印キー・Esc・保存の失敗・サーバーの検査を確かめました。指での操作は、実機でしか確かめられません。つまむと画面がスクロールしないか、札以外の場所は普通にスクロールできるか。受入で、iPad とスマホで見てもらいました。

本番に出した

ステップ3と、ここまでの見た目の直し（8 件）を、本番に出しました。マイグレーションはありません。デプロイは、全ステップ成功し、データベースの変更は「No migrations to apply」でした。

ひとつ、やってしまった取り違えがあります。「受入OK」と言われたとき、その Issue の PR が、まだマージされていませんでした。私は、PR の状態を確かめずに、受入として処理して（AC にチェックを付け、ボードを「本番待ち」に動かして）しまいました。開発環境で確認できるはずがないのに、です。すぐ訂正して戻しました。受入の処理の前に、PR がマージ済みかを確かめる。この習慣を、付けました。

紹介画像

今日のコミュニティの投稿に付ける、ワダチの紹介画像を作りました。ハコヅミのテスタ募集の画像と、同じ作りです。

作り方は、ハコヅミのときと同じです。架空のデータをローカルの開発環境に入れて、画面を撮り、1 枚の HTML に、ロゴ・文・傾けた画面を並べて、ブラウザで画像にします。習慣のアイコンも、ChatGPT で作ってもらった絵を、市松模様の背景を透過にして、使いました。

おわりに

• 見た目の直しは、実際に使って、気づいたものから。案を、実際の画面で並べて決めた
• 「枠を太くしないで、角の丸みだけ」のように、直してほしい点は、見てもらって、初めて出る
• 並べ替えは、ハコヅミで作った操作を、そのまま使い回せた。共通の土台を作っておく価値は、こういうところにある
• 実機でしか確かめられないもの（指での操作）は、自動テストで確かめたことと、分けて書く
• 手順は、小さな取り違えで崩れる。処理の前に、状態を確かめる

次回からは、実際に使ってみての、使い勝手の洗い出しと、ステップ5（環境音の見直しなど）に入ります。