ハコヅミを作る #58：ホーム画面に追加する、凍結した人のアカウントを消す（そして、次に何を作るか）
前回（#57）に続いて、一般に公開する前にやると決めていたものを片づけます。今回で、その一覧が空になりました。
- ホーム画面に追加する
- アイコンを、パッケージなしで作る
- 手元に残ったデータで、テストが落ちる
- 凍結した人のアカウントを消す
- 次に、何を作るか
ホーム画面に追加する
ハコヅミを使うのは、車に荷物を積むときです。そのたびにブラウザを開いて、ブックマークから探すのは手間です。スマホのホーム画面にアイコンを置いて、1回押せば開くようにします。
以前、家計簿アプリで同じ対応をしました。そのときの記事を Claude Code に読んでもらって、同じ形で進めました。
- アプリの名前・色・アイコン・開き方を書いたファイル（manifest）を置く
- iPhone の Safari 向けのタグを足す
ホーム画面から開くと、アドレスバーのない画面で開きます。
範囲を決める
「PWA 対応」と言うと、電波がないところでも開けるようにする（オフライン）ところまで含むことがあります。キャンプ場は電波が弱いので、ハコヅミにはいずれ要る機能です。
ただ、オフラインは仕組みが大きく変わります。持ち物チェックを「押したらすぐ保存する」作りにも関わります。今回は「ホーム画面に追加して開ける」までにして、オフラインは別の作業に分けました。
開発環境で、manifest が読めない
ハコヅミの開発環境は、自分だけが開けるように、手前に認証（Cloudflare Access）を置いています。
ブラウザは、manifest を読みに行くときに、ふつうはクッキーを付けません。認証の手前で止められて、manifest が読めなくなります。manifest を読むタグに「クッキーを付けて読む」指定（crossorigin="use-credentials"）を足しました。本番には認証がないので、あってもなくても同じです。
実機で確かめるのは、本番で
iPhone では、ホーム画面から開いたアプリと Safari とで、クッキーが別になります。Google でログインする途中で Google の画面に移るので、うまく戻ってこられるかが心配でした。
これは、実機でしか確かめられません。本番に出してから、iPhone で確かめました。ログインして、持ち物チェックを保存するところまで、問題なく動きました。
アイコンを、パッケージなしで作る
ホーム画面のアイコンには、192×192 と 512×512 の画像が要ります。今あるロゴは 192×192 までだったので、もとの大きな絵（1254×1254）から作り直すことにしました。
もとの絵を見ると、角丸の外側（四隅）が黒くなっていました。そのままアイコンにすると、黒い角が出ます。
作ったアイコン（四隅をクリーム色で塗った）
Android は、機種によって、アイコンを丸や角丸に切り抜きます。端にある「ハコヅミ」の字が欠けないように、絵を 8 割に縮めて、まわりをクリーム色で埋めたものも作りました。
切り抜かれても欠けないアイコン
画像を加工するパッケージを足せば簡単ですが、ハコヅミは「依存パッケージは増やさない」方針です。#56で使い方の絵を WebP にしたときと同じく、ブラウザに描かせました。テストに使っているブラウザを起動して、canvas にもとの絵を描き、四隅から黒いところをたどって塗りつぶし、縮めて PNG で書き出します。
最初に作ったものには、角丸のふちの、うすい影が残っていました。もとの絵は、ふちに近いところが、少しだけ暗いクリーム色になっていたためです。絵の中身（木や文字）はふちから離れているので、ふちの帯をまるごとクリーム色で塗ることにしました。
ロゴを変えたら、コマンド1つで作り直せます。
手元に残ったデータで、テストが落ちる
manifest のタグは、全部の画面に入ります。念のため、手元で E2E テストを全件流しました。すると、今回とは関係のない、前回（#57）書いた料理の写真のテストが2件落ちました。
原因は、テストが料理を「名前だけ」で探していたことでした。テストは、自分用のユーザーを作って、そこに「カレー」を登録します。ところが、手元のデータベースには、ブログ用の絵を撮ったときの「カレー」が残っていました。名前で探すと、そちらが先に見つかります。
#54では、「手元に残ったデータのおかげで、たまたま通っていた」テストがありました。今回は逆で、「手元に残ったデータのせいで、落ちる」テストです。CI は毎回まっさらな状態から始まるので、通っていました。
テストで作ったユーザーで絞って探すように直しました。まっさらな状態でも、データが残った状態でも、同じ結果になるのが、正しいテストです。
凍結した人のアカウントを消す
利用規約には、こう書いてあります。
凍結について伝えたいことがあるとき、またはデータの削除を希望するときは、お問い合わせフォームから連絡してください。
ところが、連絡を受けても、消す手段がありませんでした。セカンドオピニオンのレビューで見つかっていたものです。
アカウントを消す処理は、本人の「退会」の画面からしか呼べません。凍結された人は、その画面に届きません。データベースを直接触って消すと、ギアやキャンプの行と画像が、持ち主のいないまま残ります。
管理画面に、消す手段を足しました。
凍結された人にだけ出る「アカウントを消す」（架空のユーザー）
押すと、確認が出る
決めたことは、次のとおりです。
- ボタンは、凍結された人にだけ出す。凍結していない人を、直接は消せません。「まず凍結してから、消す」の2段にして、押しまちがいの歯止めにします
- 消す処理は、本人の退会と同じものを使う。新しい処理は作りません。テーブルを足したときに、直すところが1か所で済みます
- 消す前に、中身を見る機能は作らない。管理者に見えるのは、今までどおり、一覧と件数までです
受入条件が、今の作りと合わない
取りかかる前に Issue を読み直すと、受入条件の1つが、今の作りと合わなくなっていました。
消したあと、その人が同じ Google アカウントでログインすると、空の新しいユーザーとして始まる
この Issue を書いたのは、招待制の仕組み（#51）を作る前です。今は、退会すると、招待の一覧からも消えます。同じアカウントでログインしようとしても、「招待されていません」と断られます。
凍結した人を消すのですから、断られるほうが合っています。受入条件のほうを直しました。
Issue を書いてから時間がたつと、そのあいだに入った変更で、前提が変わっていることがあります。取りかかる前に、今の作りと突き合わせて読み直します。
規約は、直さない
規約の文は、変えませんでした。もともと「削除を希望するときは、連絡してください」と書いてあり、その連絡に応えられるようになった、というだけだからです。規約に書いたことを、あとから実装が追いかけた形です。
次に、何を作るか
これで、一般に公開する前にやると決めていたことが、片づきました。
| やると決めていたこと | 記事 |
|---|---|
| 使い方のページ | #56 |
| 料理の写真 | #57 |
| 依存パッケージの版上げ | #57 |
| ホーム画面に追加する | 今回 |
| 凍結した人のアカウントを消す | 今回 |
残っているのは、テスタに使ってもらうことです。ところが、募集を始めて数日、テスタはまだ1人もいません。自分で使って気になったところは、ひととおり直しました。
そこで、次の段階の「共有」（ほかの人のギアやキャンプを見られる機能）に進もうかと、Claude Code に相談しました。返ってきた答えは、「まだ始めないほうがよい」でした。
- 共有は、ほかの人のものを見る機能。使う人が自分1人のうちは、作っても、確かめようがない
- 「自分のギアを見せたいか」をテスタに聞いてから決める、と決めていた。今始めると、その材料がない
- 通報の仕組み、規約の改定など、運営の重さが一気に増える
代わりに出てきた案は2つです。
- テスタが集まらない理由に、手を打つ
- ほかの人がいなくても役に立つ機能（オフライン）を進める
作ることは、楽しい作業です。使う人がいないときほど、次の機能を作るほうへ、気持ちが向きます。人を探すより、作るほうが気が楽だからです。
まずは、1 に手を付けます。今週末は、自分でキャンプに行きます。ハコヅミを、はじめて実戦で使ってきます。
おわりに
- 「PWA 対応」は範囲が広い。ホーム画面に追加するところと、オフラインは、分けて進める
- 認証の後ろにある開発環境では、manifest を読むときにも、クッキーを付ける指定が要る
- 実機でしか確かめられないことは、最初から「本番で確かめる」と決めておく
- テストは、まっさらな状態でも、データが残った状態でも、同じ結果になるように書く
- Issue を書いてから時間がたったら、取りかかる前に、今の作りと突き合わせる
- 使う人がいないのに次の機能を作りたくなったら、人を探すほうから逃げていないかを疑う
次回は、キャンプで実際に使ってみた話を書く予定です。