ハコヅミを作る
キャンプの忘れ物をなくすチェックリストアプリ「ハコヅミ」の開発記録です。自分のWebサービスの1つ目として、コンテナを積めば中のギアもまとめてチェックされるアプリを作っていきます。
技術スタック：SvelteKit / Cloudflare Workers + D1 / Drizzle ORM / GitHub Actions / Claude Code
何を作るか
開発の土台
最初の機能と開発の流れ
コンテナ
実際のデータとチェックリスト
- ハコヅミを作る #7：Notion から実際のギアとコンテナを取り込む
- ハコヅミを作る #8：プランとチェックリスト、D1の「1文に値は100個まで」
- ハコヅミを作る #9：一番の売り、コンテナの一括チェック
MVPの振り返り
UIの見直し
ギアの画像とおすすめ度
一覧の見せ方
キャンプと消耗品
開発の流れの見直し
見た目と使い勝手の仕上げ
- ハコヅミを作る #18：まだ積んでいない項目を目立たせる／ブログの画像で見つけた不具合
- ハコヅミを作る #19：タイトルバナーとロゴで、トップページを「ハコヅミらしく」する
- ハコヅミを作る #20：ギアとキャンプの一覧を、カード表示に切り替えられるようにする
フォントと見た目の手直し
- ハコヅミを作る #21：画面のフォントを、丸ゴシックの Web フォントにする
- ハコヅミを作る #22：見出しと一覧の見た目を、サンプル画像を見てから直す
- ハコヅミを作る #23：カード表示を正方形にそろえ、キャンプを年ごとに区切る
ステップ1 の締めくくり
- ハコヅミを作る #24：ヘッダーにアイコンを付け、全部の画面にフッターを出す
- ハコヅミを作る #25：行ったキャンプは実績の日付で出し、おすすめ度と感想を残す
- ハコヅミを作る #26：過去のキャンプからキャンプ場を引用し、独自ドメインで開く（ステップ1 完了）
ステップ2：公開の準備
- ハコヅミを作る #27：ステップ2 の方針を決め、Google アカウントでログインできるようにする
- ハコヅミを作る #28：10分かかっていた E2E を1分半にし、実装をバックグラウンドに任せる
- ハコヅミを作る #29：管理者の権限と「凍結」、登録数の上限を作る
- ハコヅミを作る #30：アカウントの画面と、データのエクスポート、退会を作る
- ハコヅミを作る #31：気づいた点を1つの Issue にためて、まとめて直す
- ハコヅミを作る #32：キャンプの期間を、カレンダーで開始日と終了日をまとめて選ぶ
- ハコヅミを作る #33：削除の確認を、ブラウザの標準からアプリのダイアログに変える
- ハコヅミを作る #34：公開までの道のりを引き直す（ベータ版、テスタ、お問い合わせの窓口）
- ハコヅミを作る #35：公開の前に、セキュリティを見直す（ヘッダー、CSP、回数の制限）
- ハコヅミを作る #36：利用規約とプライバシーポリシーを、実装と照らして書く
- ハコヅミを作る #37：ログインしていない人に見せる、紹介のページを作る
- ハコヅミを作る #38：初めての人に、何から始めるかを案内する
- ハコヅミを作る #39：ベータ版の前に足りないものを洗い出す（サーバーのログ、お知らせ）
- ハコヅミを作る #40：エラーの画面を作ったら、「何も出ていなかった」ことに気づく
- ハコヅミを作る #41：ベータ版の前に、もう1つ機能を足すと決める（段階の組み替え）
ステップ3：料理
- ハコヅミを作る #42：料理を登録できるようにする（食材は、消耗品から選ぶ）
- ハコヅミを作る #43：キャンプで作る料理を選ぶと、食材が持ち物チェックに入る
- ハコヅミを作る #44：フリーと有料の違いを、どこに置くかを決める
- ハコヅミを作る #45：公開のあとの道のりを決める（課金の時期、いいね、作らないと決めた機能）
- ハコヅミを作る #46：料理の手順と食材を、1つずつ足す形に直す（ステップ3 完了）
ステップ4：ベータ版の公開
- ハコヅミを作る #47：AI が書いたコードを、別の AI に見直してもらう（セカンドオピニオンの計画）
- ハコヅミを作る #48：2つのモデルにバグとセキュリティを見てもらうと、見つけるものが違った
- ハコヅミを作る #49：規約に「料理」が書かれていなかった（規約・データ・テストの見直し）
- ハコヅミを作る #50：見つかった 13 件を、7つ同時に直そうとして止まる
- ハコヅミを作る #51：ベータ版を始めようとしたら、「招待制」が守られていなかった
- ハコヅミを作る #52：入口を開けて、テスタを募る（外したはずの守りが外れない、効かないボタン）
- ハコヅミを作る #53：GitHub Actions の無料の枠を、1週間で 90% 使った
ステップ5：テスタからの改善提案と微改修
- ハコヅミを作る #54：テスタを待つあいだの、最初の直し（消耗品のまとまり、表示を覚える、レシピの並べ替え）
- ハコヅミを作る #55：スマホで使って気づいた、小さな見た目の直し（引っぱると見える色、畳む欄、札を隠す）
- ハコヅミを作る #56：テスタが来る前に、使い方のページと「あとから足す」欄を作る
- ハコヅミを作る #57：料理に写真を付ける、依存パッケージを上げる（公開の前に残していたもの）
- ハコヅミを作る #58：ホーム画面に追加する、凍結した人のアカウントを消す（そして、次に何を作るか）
- ハコヅミを作る #59：キャンプの前の晩に使ってみたら、着替えと食材がまざった（カテゴリ分けと「身の回り品」）
- ハコヅミを作る #60：料理にカテゴリとおすすめ度を付ける（2つの Issue を1つの PR に、人のレシピをコピーしてよいか）
- ハコヅミを作る #61：プランを足して使えるようにする（試したら、全員のチェックが消えるマイグレーションだった）
ステップ6・7：共有と、いいね・フォロー
- ハコヅミを作る #62：ギアを共有できるようにする（スイッチの形を3回変えた、通報がないうちは出さない）
- ハコヅミを作る #63：キャンプと料理も共有できるようにする（2つ目を足す前にまとめる、本番に出してから気づいたタブ）
- ハコヅミを作る #64：テスタが0人なので、X で募集する（書いてみたら、「無料」は特典ではなかった）
- ハコヅミを作る #65：プロフィールにアイコンを付ける（絵で選んだ大きさは、実物で見ると小さかった）
- ハコヅミを作る #66：ほかの人のギアを「欲しい」に入れる（写すのは3つだけ、「やめても残る」という初めての例外）
- ハコヅミを作る #67：プロフィールに SNS のリンクを置く（DM を作らない代わり、実装を任せて報告を読む）
- ハコヅミを作る #68：ほかの人の料理を、自分の料理にコピーする（5日前の案を、作る前に読み直す）
- ハコヅミを作る #69：「いいね」と、いいねの多い順（朝に計画を直して、夜に本番へ）
- ハコヅミを作る #70：メンバーをフォローする（いいねは1件に、フォローは人に）
ステップ8：課金
- ハコヅミを作る #71：課金の前に、小さな直しを2つ（数と一覧を合わせる、入口をまとめる）
- ハコヅミを作る #72：課金を作る前に、決めたこと（月払いだけ、差は画像だけ、住所はどうする）
- ハコヅミを作る #73：Stripe のアカウントを作り、知らせを受け取る（画面のない課金の土台）
- ハコヅミを作る #74：有料プランの申し込みと解約（Stripe の画面に任せる、受入で見つかった「解約の日時」）
- ハコヅミを作る #75：支払いが失敗したとき（払い直しのあいだは有料のまま、時計を進めて2つの道を通す）
- ハコヅミを作る #76：有料プランを休止できるようにする（冬は止めておける、払った分は再開で引く）
- ハコヅミを作る #77：退会・凍結のときに契約を止め、規約を書き直す（課金の「作る」の締めくくり）
- ハコヅミを作る #78：開発をいったん止めて、春を待つ（テスタの募集と、冬のアフィリエイト）