画像は AVIF/WebP で殴って、本番の置き場所は GCS に寄せた

日記に写真を載せると嬉しい。でもストレージと帯域と表示速度が一気に来る。要件（purompt.md）側でも、枚数上限やサイズ上限、圧縮方針が最初から決まっていて、**最大辺 2048px、AVIF 優先（だめなら WebP）**みたいに殴り方が具体だった。

実装済み、と言ってよいのはこの圧縮まわりだ。ここが曖昧だと、スマホから投げただけで日記が重くなる。逆に言えば、画像を軽くする投資は回収が早い。本文より先に体感が死ぬからだ。

本番の置き場所は GCS に寄せる前提で決めた。ローカル開発では抽象の裏にローカル実装を差し込み、本番では同じインターフェースで GCS に差し替える。個人アプリでも、この分離は効く。テストが楽だし、「署名 URL をどう切るか」みたいな論点を後回しにしにくい。

クライアント側パイプラインのイメージ（圧縮 → アップロード → DB）

実装の線はリポジトリが正だが、頭の中の整理としては次の段階に分けると説明しやすかった。

1. 入力検証: 枚数・合計サイズ・拡張子。purompt.md の上限は「怒りの UX」を減らす柵。
2. リサイズ: 最大辺 2048px など、表示前提に合わせて情報量を削ぐ。
3. 再エンコード: AVIF 優先、非対応なら WebP。容量と互換のトレードオフ。
4. アップロード: Route Handler が受け取り、ストレージ抽象で保存、DB にメタだけ残す。
5. 表示: クライアントは URL または署名 URL を読む。キャッシュヘッダとセットで考える。

GCS 本番を想定するときのチェックリスト（個人開発版）

• バケットの 公開範囲（公開読み取りにするか、署名 URL のみか）
• サービスアカウントの 最小権限（書き込みと読み取りを分けるか）
• CORS（ブラウザ直アップロードするなら特に）
• オブジェクトキーの 命名規則（ユーザー ID / 日付 / UUID をどう混ぜるか）
• ライフサイクル（削除やアーカイブのルール。個人アプリでも「溜め続ける」はコストになる）

設計の難所は、DB に何を残すかだ。画像本体はオブジェクトストレージ、DB にはパス・サイズ・ハッシュなどのメタ。オフラインと組み合わせると、アップロード待ちの状態機械が必要になる。だから前後の記事（オフライン、認証、本番コンテナ）とセットで読むのがちょうどいい。

日記というプロダクトは、テキストだけのときより「生活に近い」。写真はその象徴だと思う。次は、Google ログインと許可リスト、その背後の proxy 地獄に触れる。

圧縮を先に入れる意味

実装の気持ちよさというより、サポートコストを減らすのが先だ。画像が重いと、ユーザーからの最初のフィードバックが「遅い」に寄る。個人アプリでも、未来の自分が最初のユーザーになる。だから圧縮は早期投資として扱った。

小さな結論

画像は「添付」じゃなくて、思い出の圧縮表現に近い。軽くするのは、記憶を守るための礼儀、くらいの気持ちでやる。

次の自分へ

署名 URL の期限と、クライアントキャッシュの期待値はセットで考える。個人アプリでも「画像が突然見えない」は怖い。

スクショで残すなら

画像付きエントリの詳細画面、複数枚アップロード後の一覧、アップロード前後の容量感が分かるなら Before/After。EXIF やプライバシーに触れるなら個人情報に注意。

EXIF はロマンとリスクの両方

位置情報が入っていると思い出は鮮明になるが、公開の仕方によっては危ない。だから「残す/捨てる」を実装で選べるようにしておくのが安全。要件にもバランスの話が出てくるので、コードと README をセットで読むのが早い。

この回のまとめは、画像は 容量・プライバシー・表示速度の三点セット。圧縮はその第一関門で、ストレージ抽象は第二関門。本番 GCS は第三関門、くらいに段階を分けて考えると迷子にならない。

補足として、アップロード上限（枚数と合計サイズ）は「怒りの UX」を防ぐ柵になる。日記は勢いで書きたいので、エラー文言は優しく、理由は具体的に。

最後に、ローカル実装から GCS へ寄せるときに一番きついのは、権限とパス設計だ。公開範囲を誤ると一瞬で終わる。だから抽象を早めに置いた。

開発者向けのメモ

アップロード API は「受け取る」「検証する」「保存する」「DB に刺す」を分けるとテストが書きやすい。個人開発でも、一度だけテストを書いたコンポーネントが後で助ける。

---

daily-snap 開発ログ
前: オフライン日記はロマン…
次: Google ログインの先に待ってたのは、proxy と secureCookie のコンボだった
索引: 04-02 · … 04-30