ハコヅミを作る #56：テスタが来る前に、使い方のページと「あとから足す」欄を作る
前回（#55）に続いて、テスタを待つあいだの直しです。テスタからの声は、まだ届いていません。届く前に、操作のしかたに関わるものを、先に入れておくことにしました。
- 持ち物チェックに、あとから足す
- バッチで読むと、名前が消える
- 使い方のページを作る
- 使い方に、絵を入れる
- PR を、まとめて出す
持ち物チェックに、あとから足す
持ち物チェックの項目は、キャンプを登録した時点の、プランの中身と料理の食材で決まります。決めたあとは変わりません。前回のキャンプのチェックを消す手間がない、ハコヅミの売りの1つです。
ただ、積み込みの途中で「今回はヘッドライトも持っていこう」と思いついたときに、足す手段がありませんでした。プランを直しても、もう作ったキャンプには入りません。プランそのものを変えると、持ち物チェックを作り直すので、それまでのチェックが全部外れます。
料理の食材の欄と、同じ形にする
最初に浮かんだのは、前回作った、料理の食材の欄の形でした。ふだんは畳んでおいて、開けば、ほかのものからも選べる形です。
ふだんは畳んである
開くと、まだ持ち物チェックにないものが出る
Claude Code に相談すると、決めることが4つ出てきました。
| 決めること | 決めた形 |
|---|---|
| 足したら、プランにも入れるか | 入れない。このキャンプの持ち物チェックにだけ足す |
| プランを変えたら | 足したものも消える（今までの「最初から作り直す」に合わせる） |
| 料理を選び直したら | 消さない |
| 間違えて足したら | 「今回不要」にする（外す手段は作らない） |
テーブルを変えずに済ませる
3つ目の「料理を選び直しても消さない」には、仕掛けが要りました。
持ち物チェックの消耗品には、「プランから来た項目か」という印があります。料理を外したときに、その料理の食材だけで入った項目を外すための印です。プランから来た項目は、料理を外しても残ります。
あとから足した消耗品にも、この印を付けることにしました。印の意味を「プランから来た」から「料理の食材だけで入ったのではない」に、少し広げた形です。こうすれば、テーブルに列を足さずに済みます。
「間違えて足したものを外せない」のも、同じ理由です。外せるようにするには、「あとから足した」ことを見分ける印が、別に要ります。「今回不要」で足りるなら、テーブルを変えるほどではないと判断しました。
受入で、畳むことにする
最初は、足したあとも欄を開いたままにしていました。続けて足せて便利だと考えたからです。
開発環境で触ってみると、足したものは上の持ち物チェックに入るので、確かめるには、スクロールして戻ることになります。開いたままの欄が、その邪魔になりました。足したら畳む形に変えました。
バッチで読むと、名前が消える
作っている途中で、足せるものの一覧を出したら、画面がエラーになりました。ログを見ると、消耗品の名前が空（null）で、並べ替えのところで落ちていました。
足せるものは、自分の「所有」のギアと消耗品を、コンテナの名前と一緒に読んでいます。ギアと消耗品の2つの問い合わせを、D1 に1回で送る「バッチ」にしていました。
原因は、列の名前でした。消耗品の名前も、コンテナの名前も、テーブルの中では同じ name という列です。D1 のバッチは、結果の行を「列の名前 → 値」の形で返します。同じ名前の列が2つあると、片方で上書きされます。コンテナに入っていない消耗品は、コンテナの名前が空なので、消耗品の名前まで空になっていました。
バッチをやめて、2つの問い合わせを別々に送る形に直しました。別々に送れば、行は列の並び順で返るので、ぶつかりません。
同じ形の問い合わせは、ほかにもあります。これまで、たまたまバッチにしていなかったので、起きていませんでした。次に同じことをしないよう、プロジェクトの決まりのファイルに書き足しました。
使い方のページを作る
ハコヅミには、初めての人への案内（トップページの「はじめに」）があります。ただ、「コンテナのチェックを押すと、どうなるか」「今回不要とは」のような、操作の決まりをまとめて読める場所はありませんでした。テスタが問い合わせる前に、自分で調べられる場所を作ります。
使い方のページ
決めたことです。
- ログインしていなくても開けて、検索にも載せる（何ができるサービスかの説明にもなるので）
- 文は、ページの中に直接書く（利用規約と同じ。直すときは PR で）
- 画面の動きを変えたら、使い方の文も直す。本番リリースの前に、お知らせと一緒に確かめる
リンクを、どこに置くか
リンクは、フッター・アカウントの画面・トップページ・紹介のページの4か所に置きました。置き場所は、画面のイメージを撮ってもらって決めました。
フッターは、前に「お知らせ」のリンクを置かなかった場所です。4つ並べると、スマホの幅で2行になるのが理由でした。測ってみると、幅 375px なら1行、320px（小さいスマホ）だけ2行です。今回は、2行でもよいことにしました。
フッター（幅 375px）
「Presented by」を、どこに置くか
作っている途中で、「使い方のページに、じるラボへのリンク（Presented by のような）を付けるのは変？」と、Claude Code に聞いてみました。
返ってきた答えは、「変ではないが、置き場所はほかが合う」でした。使い方のページは、操作を調べに来る場所です。それより、どの画面にも出ているフッターの「© 2026 Jiru-Labo」をリンクにするほうが、行も増えずに済みます。使い方のページには、一番下に「運営：じるラボ」の一文だけを置きました。
いつか、直すことになる文
よくある質問に、「登録した内容は、ほかの人に見えますか」→「見えません」と書きました。今は正しい答えです。ただ、次の段階（ステップ6）では、ギアやキャンプを人に見せる「共有」を作ります。そのときに、この答えは変わります。
忘れないように、Notion の共有の段階の「一緒に要るもの」に、「使い方のよくある質問を直す」を書き足しておきました。
使い方に、絵を入れる
文だけでは、ボタンの場所や持ち物チェックの見え方が伝わりにくいので、見出しごとに画面の絵を入れました。全部で9枚です。
使い方に入れた絵の1枚（持ち物チェック）
撮り直す手順を、残す
紹介のページの絵は、そのつど手で撮っていました。3枚だけなので、それで済んでいました。
使い方の絵は9枚で、画面を変えるたびに撮り直しが要ります。手で撮る形のままだと、撮り直すのが面倒になり、絵と画面がずれていくのが目に見えています。そこで、絵を撮り直すスクリプトを、リポジトリに残してもらいました。
- 架空のデータを入れた、決まった id のユーザーを作り直してから撮る（何度流しても、同じ絵になる）
- E2E テストと同じ仕組み（Playwright）で、アプリを起動して撮る。CI では流さない
- コマンド1つで、9枚とも撮り直せる
パッケージを、足さずに WebP にする
画面の絵は、ページを軽くするために WebP にしています。ところが、Playwright の画面の写しは PNG か JPEG だけで、WebP は出せません。WebP にするパッケージを足す手もありますが、ハコヅミは「依存パッケージは増やさない」方針です。
Claude Code の案は、ブラウザに変換させるものでした。撮った PNG を、そのページの中で画像として読み込み、canvas に描いて、WebP として書き出します。ブラウザには、もともと WebP を書き出す仕組みがあります。
1枚 11〜47KB に収まりました。
フォントが違う
最初に撮った絵を見ると、文字が、ふだんの丸い字（M PLUS Rounded 1c）ではありませんでした。
E2E テストでは、Google Fonts に届かないようにしてあります。テストが、外のサービスの調子に左右されないようにするためです。撮るスクリプトは E2E と同じ設定を使っていたので、Web フォントが読み込めていませんでした。
撮るときだけ、Google Fonts を止める設定を外し、フォントが効くまで待ってから撮るようにしました。
撮り直したら、大きさも直す
絵には、読み込み中に画面がずれないよう、幅と高さを書いています。撮り直して絵の大きさが変わったのに、書いた数を直し忘れると、絵がゆがみます。
そこで、E2E テストで、書いた幅と高さが、絵の本当の大きさと同じかを確かめるようにしました。直し忘れたら、テストが落ちます。
写真のもとが、ない
1つだけ、Issue に書いた形から変えました。ギアの絵は、写真の入ったカード表示にするつもりでした。ところが、紹介のページで使ったギアの写真（無料の写真素材）は、もとの写真をリポジトリに入れていませんでした。これでは、スクリプトで撮り直せません。
ギアの絵は、写真のいらないリスト表示にしました。撮り直せることを優先しました。
PR を、まとめて出す
前回（#55）で、GitHub Actions の無料の枠を使い切りました。今は、使った分だけ払う形で続いています。develop 向けの PR は、1回の CI で 13 分ほど使います。
今回は、出し方を考えました。
- 「足したら畳む」の直しは、それだけで PR にせず、次の使い方のページの PR に入れた
- 本番リリースの前に足すお知らせも、1本の PR にまとめた
ただ、1回だけ、CI を余計に流しました。持ち物チェックに足す欄を入れた PR で、ほかのテストが落ちたためです。キャンプの画面にある「開閉の欄（details）」の行を、全部数えるテストがありました。今回、足す欄も details で作ったので、その中の行まで数えていました。
このテストは、変えたところに関係しないと思って、手元では流していませんでした。開閉の欄は、画面のあちこちで使っています。開閉の欄を足すときは、それを数えているテストがないか、先に探すことにします。
おわりに
- 「あとから足す」は、今ある形（料理の食材の欄）に合わせると、決めることが少なくなる
- 印の意味を少し広げると、テーブルを変えずに済むことがある
- D1 のバッチは、行を列の名前で返す。同じ名前の列があると、ぶつかる
- 使い方の文は、画面を変えたら直す。直すきっかけを、手順に組み込む
- 撮り直す前提の絵は、撮り直す手順ごと残す
- ブラウザにできることは、ブラウザに任せると、パッケージを足さずに済む
- 同じ部品（
details）を足すときは、それを数えているテストを先に探す
次回こそ、テスタからの最初の声を聞く予定です。