夏のやりたいこと30

この夏にやってみたいことを最大30個まで書き出し、達成したらスタンプを押して進捗を育てる「夏の冒険ボード」です。単なる ToDo リストではなく、空色とレモンの雑誌エディトリアル調ボードで、この夏をめいっぱい遊びつくすための1ページです。

公開 URL: <https://ai-app-gen-factory.pages.dev/003-summer-wishlist-30/>

使い方

1. ページ上部の「やりたいことを追加」フォームに、この夏やってみたいことを入力します。必須はタイトルだけです。
2. 必要に応じてカテゴリ・メモ・目安の日・優先度を選び、「＋ ボードに追加」を押します。
3. やってみたら、その枠の「達成スタンプ」を押します。スタンプが押され、進捗リングと称号が更新されます。
4. 並べ替え（◀ ▶）、編集（✎）、削除（🗑）は各枠のボタンから行えます。
5. 「𝕏 でシェア」から、今の進捗を投稿できます。

機能

• 30枠の冒険ボード - 空欄・未達成・達成済みがひと目で分かる固定グリッド。空欄には入力誘導を表示します。
• やりたいことの追加 - タイトル（必須）に加えて、カテゴリ・ひとことメモ・目安の日・優先度を軽く付けられます。
• カテゴリ分類 - おでかけ / つくる / 食べる / からだ / 学ぶ / 思い出 の6種類で色分けします。
• 達成スタンプ - チェックだけで終わらせず、スタンプを押したような演出で達成を記録します。
• 進捗ダッシュボード - 達成数 / 登録数 / 30枠 を進捗リングと数値で表示し、達成数に応じて称号が変化します。
• 編集・整理操作 - 並べ替え、編集、削除、全消しを各枠やツールバーから行えます。
• X 共有 - 現在の達成数・称号・ハッシュタグ #夏のやりたいこと30・公開 URL を含む投稿文を作成して共有できます。
• トースト通知 - 追加・達成・削除などの結果をアプリ独自のトーストでお知らせします。

データ保存・技術

• 入力した内容は、お使いのブラウザの localStorage（キー: summer-wishlist-30:v1）にのみ保存されます。
• サーバーへは一切送信されません。別の端末やブラウザ、シークレットウィンドウとはデータが共有されません。
• ブラウザのデータを消去すると、登録した内容も消えます。
• 静的な HTML / CSS / JavaScript のみで動作します。ビルドや外部ライブラリ、ネットワーク通信は不要です。
• assets/ の画像（バナー・背景・スタンプ・カード装飾・区切り・favicon）を UI と演出に使用します。
• 画像が読み込めない環境でも主要 UI と体験が成立するよう、CSS のグラデーション背景や CSS で描いた達成スタンプなどのフォールバックを実装しています。
• レスポンシブ対応で、PC・スマートフォンのどちらからでも利用できます。

ファイル構成

003-summer-wishlist-30/
  index.html   メイン画面
  styles.css   スタイル（空色とレモン / 雑誌エディトリアル）
  app.js       アプリのロジック（保存・描画・操作・共有）
  assets/      画像アセット
  README.md    このファイル

ハッシュタグ: #夏のやりたいこと30