ハコヅミを作る #63：キャンプと料理も共有できるようにする（2つ目を足す前にまとめる、本番に出してから気づいたタブ）
前回（#62）で、ギアを共有できるようにしました。その日のうちに、キャンプと料理も、同じ仕組みで共有できるようにしました。
- 2つ目を足す前に、まとめる
- 行き終わったキャンプだけを、見せる
- 料理の食材は、名前だけを読む
- 「ほかの人のギア」のままだった
- 同じ日に、規約を2回改定する
- 本番に出してから、タブの見た目に気づく
- 止める確かめが、止めすぎた
2つ目を足す前に、まとめる
前回、共有のしかたを、1本の決まりにそろえました。
見えるもの＝「全体がオン」かつ「その1件で外していない」
種類ごとの全体のスイッチと、1件ごとのスイッチ。ギアで作ったこの形を、キャンプと料理にも当てはめます。
ギアだけを作った時点では、コードの中に「ギア」と直接書いてあるところが、あちこちにありました。確認の文、スイッチの名前、アカウントの画面の説明、「共有が見える人か」の条件。1種類しかないうちは、それで困りません。
ここに、キャンプを同じ調子で足すと、どうなるか。「ギアなら、この文。キャンプなら、この文」という分かれ道が、あちこちにできます。料理を足すときに、その全部を探して、もう1つずつ分かれ道を足すことになります。どこか1か所を足し忘れても、動いてしまいます。
そこで、キャンプを足す前に、まとめ直してもらいました。
- 種類の一覧（ギア・キャンプ）を、1か所に持つ
- 種類ごとの文（名前、スイッチの名前、確認の文、説明）を、1つの表にする
- 「共有が見える人か」の条件を、「見える人か」（表示名がある・凍結されていない・止められていない）と、「その種類をオンにしているか」に分ける
- アカウントの画面の「共有」を、種類ごとに同じ部品を並べる形にする
1つ目を作るときに、ここまでやるのは、早すぎます。まだ、何が共通で、何が種類ごとに違うのかが、分かっていないからです。2つ目を足すときが、ちょうどよい時期でした。
3つ目は、足すだけだった
効き目は、すぐに分かりました。料理（3つ目）を足したときのことです。
種類の一覧に「料理」を足すと、型のチェックが、足りないところを全部教えてくれました。「料理の文が、表にない」「料理の数が、ここにない」。言われたところを埋めていくと、アカウントの画面にスイッチが出て、共有のページにタブが出ます。
残ったのは、料理にしかない部分だけです。何を見せて、何を見せないか。スイッチを、編集の画面のどこに置くか。
「種類を足すときに、直すところ」の一覧は、プロジェクトのメモ（CLAUDE.md）にも書いておきました。いつか4つ目を足すとき、わたしは、今日のことを覚えていないはずです。
行き終わったキャンプだけを、見せる
キャンプの共有で、いちばん先に決めたのは、「どのキャンプを見せるか」です。
ハコヅミのキャンプには、予定の期間と、実績の期間があります。行く前に予定を入れて、帰ってきたら実績を入れます。
見せるのは、実績の期間が入ったキャンプだけにしました。これから行く予定は、共有をオンにしていても、出しません。
理由は、1つです。「11月の連休に、家族でキャンプに行く」と人に見せることは、「その日、家にいない」と知らせることでもあるからです。見られるのはログインしている人だけですが、それでも、出す必要のないものは、出さないほうへ倒します。
実績の期間を消せば、そのキャンプは、すぐに見えなくなります。
ほかの人から見た、キャンプのタブ（架空のデータ）。これから行くキャンプ（4件目）は、出ていない
見せるもの、見せないもの
| 見せる | 見せない |
|---|---|
| キャンプ場の名前・住所・URL・地図 | キャンプ場の電話番号 |
| 実績の期間 | 予定の期間 |
| おすすめ度、感想 | メモ（行く前の覚え書き） |
| 画像 | 選んだプラン、作る料理、持ち物チェック |
メモは、「薪は現地で買う」「〇〇さんに連絡する」のような、自分向けの覚え書きです。感想とは別の欄にしておいて、よかったと思いました。前に、感想の欄を分けたときは、共有のことまでは考えていませんでした。「行く前に書くもの」と「行った後に書くもの」を分けておいたことが、そのまま、「見せないもの」と「見せるもの」の線になりました。
キャンプの詳細（画像は、絵で代用）
写真には、人が写る
ギアの写真と、キャンプの写真は、違います。キャンプの写真には、家族が写っていることがあります。車のナンバーが写っていることもあります。
共有をオンにするときの確認に、その注意を入れました。
キャンプをオンにするときの確認
1件ごとのスイッチは、キャンプ情報の編集の「行った後に入れるもの」の中に置きました。実績の期間・おすすめ度・感想の、すぐ下です。見せるものを書く場所で、見せるかどうかも決められます。
1件ごとのスイッチ
料理の食材は、名前だけを読む
料理で見せるのは、名前・カテゴリ・画像・おすすめ度・おすすめ理由・レシピ・参考の URL、そして、食材です。
食材には、少し気をつかいました。ハコヅミの料理の食材は、消耗品とのつながりで持っています。「カレー」の食材は、消耗品の「じゃがいも」「カレールー」を指しているだけです。
つまり、食材を見せるには、ほかの人の消耗品を、読みにいくことになります。消耗品には、名前のほかに、残りがあるか、いくつ持っていくか、どのコンテナに入れているか、が入っています。料理とは関係のない消耗品（ガス缶、薪、着替え）もあります。
読むのは、ここまでと決めました。
- その料理が、共有されていると確かめてから、読む
- その料理に付けた消耗品だけを、読む
- 読むのは、名前だけ
前回書いた、「見せないのではなく、読まない」の続きです。画面に名前だけを出すなら、データベースからも、名前だけを取ります。
料理の詳細（画像は、絵で代用）
レシピは、人の文のことがある
料理には、ギアやキャンプにない心配があります。レシピの文です。
本や、料理のサイトのレシピを、そのまま写して登録している人が、いるかもしれません。自分だけで見るぶんには、手で書き写したメモと同じです。それを共有にすると、人の文を、自分の名前で人に見せることになります。
スイッチを、レシピの欄のすぐ下に置きました。そして、こう添えました。
レシピの欄のすぐ下に置いたスイッチ
ギアのスイッチは、編集の画面の一番下に置きました。料理も、同じ場所にそろえる手はありました。でも、「このレシピは、どこから持ってきたものだったか」を思い出してほしいのは、レシピを書いている、そのときです。注意は、気にしてほしいものの、すぐそばに置きます。
「ほかの人のギア」のままだった
キャンプの共有を、開発環境で受入したときに、指摘がありました。わたしからの指摘です。
トップページの「みんなの共有（ほかの人のギア）」というのは、キャンプ（や次に料理）を共有した段階で適さない文言だと思う。
ギアの共有を作ったときに置いたリンクです。そのときは、合っていました。キャンプを足したときに、Claude Code は、共有のページ、一覧のページ、アカウントの画面、管理画面を直しました。トップページのリンクは、直す一覧に入っていませんでした。
機能を足すときは、「足す場所」に目が行きます。「前に書いた文が、もう合わなくなっていないか」は、別の目で探さないと、見つかりません。
料理の共有と一緒に、直しました。
直したあとのリンク
みんなの共有の一覧も、どれか1つでも共有していれば出る形にして、件数を種類ごとに出しています。
みんなの共有の一覧
同じ日に、規約を2回改定する
共有にできるものが増えたので、利用規約とプライバシーポリシーも、直します。
朝のリリースで、規約には、こう書いたばかりでした。
共有にできるのは、いまは、ギアです。
夕方には、これが正しくなくなります。「ギア、行き終わったキャンプ、料理です」に直し、種類ごとに、見える項目を1行ずつ書きました。プライバシーポリシーには、キャンプと料理の「見えないもの」も足しています。これから行く予定、メモ、電話番号、食材の名前のほかのこと。
してはいけないことにも、2つ足しました。
- 本やサイトのレシピを、そのまま写したものを、共有にすること
- ほかの人が写っている画像を、その人の了解なしに、共有にすること
日付が、変わらない
規約には、「最後に改定した日」が出ます。朝の改定で、2026年10月13日になりました。夕方の改定も、同じ日です。表示は、変わりません。
「改定した」ことが、日付からは分からない。これは、少し気持ちが悪いです。
代わりに、お知らせで伝えました。改定のお知らせは、一覧のいちばん上に固定されます。朝の改定のお知らせの固定を外して、夕方の改定のお知らせを固定しました。固定が2つ並ぶと、どちらが新しいのかが、分かりにくいからです。
正直なところ、同じ日に2回改定するくらいなら、朝の時点で、3種類分をまとめて書いておけばよかった、とも思います。ただ、朝の時点では、キャンプと料理を「その日のうちに」出すとは、決めていませんでした。まだないものを、規約に先に書くわけにもいきません。
テスタが、まだ少ない時期で、よかったです。
本番に出してから、タブの見た目に気づく
夕方のリリースを本番に出して、確認も済ませました。そのあと、あらためて画面を見ていて、気づきました。
共有のタブが変になっている。非選択のタブの枠が表示されていない。右側に変なバーが出ている。
ハコヅミには、もう1つ、タブがあります。ギアの一覧の「所有・欲しい・廃棄済」です。選んでいるタブは、下の白いカードとつながって見えて、選んでいないタブは、少し暗い色で、奥にあるように見えます。
共有のページのタブは、それとは違う見た目になっていました。選んでいないタブは、文字が並んでいるだけ。そして、PC で見ると、タブの段の右端に、小さなスクロールバーが出ていました。
なぜ、違ってしまったか
コードには、こう書いてありました。
共有している種類のタブ。ギアの一覧の「所有・欲しい・廃棄済」と同じ形
「同じ形」と書いてあります。でも、同じでは、ありませんでした。ギアの一覧のタブの作りを見て、似たものを、もう一度書いていたからです。似せて書いたものは、少しずつ、ずれます。枠の色が透明になり、地の色が抜けていました。
スクロールバーのほうは、別の経緯です。料理を足して、タブが3つになったとき、幅 320px のスマホで、4px だけはみ出しました。自動テストが、それを見つけました。Claude Code は、「件数の桁が増えても、ページがはみ出さないように」と、タブの段だけを横に動かせる形にしました。
スマホでは、それで問題ありません。スクロールバーは、ふだん見えないからです。PC のブラウザは、横に動かせるものに、バーを出します。
なぜ、気づかなかったか
受入のときにも、この画面は開いています。それでも、通してしまいました。動くかどうかを見ていて、「ギアの一覧のタブと同じか」という目では、見ていなかったからです。
Claude Code が見せてくれた画面の絵も、スマホの幅でした。ハコヅミは、スマホで使うものなので、確認用の絵は、いつも幅 375px で撮っています。
自動テストは、「はみ出さないこと」を見ていました。「ギアの一覧のタブと、同じに見えること」は、見ていませんでした。
直し方
ギアの一覧のタブと、同じ書き方に、そろえました。横に動かす形は、やめました。スマホの幅では、ギアの一覧と同じく、文字と余白を少し小さくして、1行に収めます。
直したあと（PC の幅）。選んでいないタブにも、枠と地の色がある
そして、テストを足しました。
- ギアの一覧のタブを開いて、枠・色・地の色・角の丸み・文字の大きさと太さを、読み取る
- 共有のページのタブを開いて、同じものを読み取る
- 2つが、同じであることを確かめる
- スマホの幅と、PC の幅の、両方で
「同じ形」と、コメントに書くだけでは、同じになりません。同じであることを、比べて確かめる。そうしておけば、いつかギアの一覧のタブを直したときに、「共有のページのタブが、違ってしまった」と、テストが教えてくれます。
本当は、タブを1つの部品にして、両方から使うのが、いちばんです。今回は、そこまではしていません。使っている場所が、まだ2つだからです。3つ目のタブを作るときに、部品にします。「2つ目を足す前に、まとめる」と書いた日に、こちらは、まとめ損ねました。
この直しは、小さなリリースを、もう1回出して、本番に入れました。
止める確かめが、止めすぎた
小さな話を、もう1つ。
前回、GitHub の Issue の本文を、空で上書きしてしまった話を書きました。そのあと、「書き戻す前に、中身が空でないこと、あるはずの見出しがあることを確かめる」ようにしました。
今回、タブの直しの Issue に、受入の印を付けようとしたとき、その確かめが、働きました。
本文が、短すぎる。
空ではありません。不具合の報告の Issue なので、もとから本文が短かっただけです。確かめの中に、「800 文字より長いこと」という条件があって、それに引っかかりました。
Claude Code は、止まったことを報告して、本文の中身を見てから、印を付け直しました。何も、壊れていません。
確かめを足すと、最初は、こうなります。きつすぎて、止めなくてよいものを止める。それでよいと思います。ゆるすぎて、止めるべきものを通すより、ずっとましです。止まったら、人が見て、条件を直せばよい。空の上書きのときは、止まらなかったので、気づくのが遅れました。
おわりに
- 同じ形のものを足すなら、2つ目を足す前に、まとめる。1つ目のときは、早すぎる
- まとめておくと、3つ目は、型のチェックが、足りないところを教えてくれる
- これから行く予定は、見せない。出す必要のないものは、出さないほうへ倒す
- 「行く前に書くもの」と「行った後に書くもの」を分けておくと、「見せないもの」と「見せるもの」の線にもなる
- ほかの人のデータは、画面に出す分だけを、読む。名前だけを出すなら、名前だけを取る
- 注意は、気にしてほしいものの、すぐそばに置く
- 機能を足したら、前に書いた文が、もう合わなくなっていないかを、別の目で探す
- 「同じ形」と書くだけでは、同じにならない。比べるテストを書く
- スマホで使うものでも、PC の幅で、一度は見る
- 足したばかりの確かめは、きつすぎるくらいで、ちょうどよい
共有できるものは、これで、ギア・キャンプ・料理の3つがそろいました。次は、ほかの人のギアを見て、「これ、欲しい」と思ったときに、自分の「欲しい」に入れられるようにする予定です。