アイス食べ歩きノート

ひと口の記憶を集めよう。
食べたアイスの 味・店・写真・評価・感想 を、パステル文具のスタンプ帳のように楽しく残せる食べ歩きログアプリです。淡ピンクとミントの配色で、今日のひと口を付箋とシールを貼る感覚で記録できます。
公開 URL: https://ai-app-gen-factory.pages.dev/007-ice-cream-note/
できること
- 今日のアイスを記録 — 商品名・お店・フレーバータグ・価格・食べた日・食感や甘さのメモを保存。
- 写真カード — 端末内のファイル選択で写真を添付(任意)。写真なしでもイラスト風プレースホルダーで記録が成立します。
- 3つの軽い評価指標 — 総合評価(5段階の星)に加え、🍬 甘さ・🌿 さっぱり度のメーター、💖「もう一度食べたい」トグル。
- スタンプ帳グリッド — 保存した記録をシールのように並べて見返せます。カードをタップすると詳細モーダルが開きます。
- 絞り込み・並び替え — 味・店・季節・評価での絞り込み、フリーワード検索、新しい順/古い順/高評価順の並び替え、「また食べたいだけ」表示。
- サマリー表示 — 今月のアイス数、合計件数、いちばん多いお気に入りの味、もう一度食べたい件数をひと目で確認。
- 編集・削除 — 詳細モーダルから編集・削除。確認はアプリ独自のモーダル、通知はトーストで行います(ブラウザ標準の
alert/confirmは不使用)。 - X へのポスト導線 — 記録数やお気に入りの味を添えて、ハッシュタグ
#アイス食べ歩きノートと公開 URL 付きでシェアできます。
使い方
- 左(スマホでは上)のカードに 商品名 を入力し、総合評価の星をえらびます(この2つが必須)。
- 必要に応じてお店・フレーバータグ・価格・食べた日・甘さ・さっぱり度・メモ・写真を追加します。
- 「スタンプ帳に貼る 🍦」を押すと、右(スマホでは下)のスタンプ帳に記録が追加されます。
- スタンプをタップすると詳細が開き、そこから編集・削除ができます。
- 検索や絞り込みで、味・店・季節・評価ごとに記録を見返せます。
データ保存・技術
- 構成は HTML / CSS / JavaScript のみ の静的ページで、ビルドや外部ライブラリは不要です。
- 記録はブラウザの localStorage(キー:
ice-cream-note.v1)にだけ保存されます。サーバー送信・外部保存・解析サービス送信は一切行いません。 - 写真は
<canvas>で長辺 720px 程度のサムネイル(JPEG)に縮小してから保存し、ローカル容量を節約します。保存容量が一杯のときは、写真なしでテキスト記録だけを残すフォールバックが働きます。 - 提供アセット(バナー・favicon・背景・空状態イラストなど)は UI と演出に組み込みつつ、読み込めない場合も CSS だけで破綻しないフォールバックを用意しています。
- 同じブラウザ・同じ端末でのみ記録が残ります。別の端末やブラウザ、シークレットウィンドウでは引き継がれません。
アセット
| ファイル | 用途 |
|---|---|
assets/banner.png |
OGP / Twitter Card 用のプレビュー画像 |
assets/favicon.png |
favicon / apple-touch-icon |
assets/background.png |
ページ背景(読み込めない場合は淡ピンク/ミントの CSS 背景) |
assets/empty-state-ice-creams.png |
記録が空のときのイラスト |
assets/flavor-sticker-sheet.png |
デザインモチーフ参照用 |
assets/photo-log-frame.png |
写真フレームのモチーフ参照用 |
音声アセットはありません。音がなくても主要 UI と体験が成立します。
ライセンス
このアプリはリポジトリルートの LICENSE に従います。