リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: StreetFood Map
都道府県スタンプラリー機能の追加
1. 目的
ユーザーが「作った!」チェックを通じて全国47都道府県のグルメを制覇していく達成感を可視化し、継続的な利用動機を高める。旅行・料理好きのコレクション欲を刺激するゲーミフィケーション要素。
2. 具体的な仕様
【スタンプラリー画面】
- 既存のSVGインタラクティブ日本地図を流用し、「スタンプラリーモード」切替ボタン(地図上部に配置)を追加する。
- モード切替時、各都道府県の塗り色を以下の3段階で変化させる:
・未挑戦(その県のレシピを1品も「作った!」していない): グレー (#cccccc)
・挑戦中(1品以上「作った!」済み、ただし県内レシピを全制覇していない): オレンジ (#f4a136)
・制覇(県内の全レシピを「作った!」済み): 緑 (#4caf50) + SVG上にスタンプ風の星マークをオーバーレイ表示
- 都道府県ホバー時のツールチップに「○品中△品クリア」を追記する。
【進捗サマリーバー】
- 地図下部に固定のプログレスバーを設置。
「挑戦済み都道府県: X / 47」「総クリアレシピ: Y / 全件数」の2指標をテキスト+バーで表示。
- バーはCSSのwidthアニメーション(transition: width 0.6s ease)で動的に伸縮する。
【達成バッジのポップアップ】
- 以下のマイルストーン達成時にモーダルポップアップで祝福メッセージとバッジ画像(CSSで描画した絵文字+テキスト装飾で代用可)を表示する:
・初めて「作った!」を押したとき(バッジ名: 食の旅スタート)
・10都道府県挑戦達成(バッジ名: 食旅人)
・47都道府県すべて挑戦達成(バッジ名: 全国制覇への道)
・いずれかの都道府県を全レシピ制覇(バッジ名: ○○グルメマスター)
- 達成済みバッジはLocalStorageの `stamprally_badges` キーに配列で保存し、再表示しない。
- ポップアップには「シェア用テキストをコピー」ボタンを設置し、「StreetFood Mapで○○を達成しました! #StreetFoodMap」という文字列をクリップボードにコピーできるようにする(navigator.clipboard.writeText使用)。
【データ仕様】
- 既存の `cooked_recipes`(LocalStorage)をそのまま参照し、新規テーブル・キーの追加は `stamprally_badges` のみ。
- 各レシピDBレコードには既に都道府県コードが紐づいているため、JS側で都道府県ごとの全レシピ件数と「作った!」件数を集計するだけで実装可能。
- 集計処理は地図モード切替時と「作った!」ボタン押下時の2タイミングで実行し、都度SVGの塗り色とプログレスバーを再描画する。
3. 既存機能との整合
- SVG地図のクリック→都道府県グルメ一覧表示の既存フローはそのまま維持。スタンプラリーモードでクリックしても同様に遷移する(塗り色の変化はあくまで重ね表示)。
- 「作った!」ボタンのロジック・LocalStorageキー構造は変更しない。スタンプラリー側が参照するだけ。
- サーバー側ランキング集計(`cooked` カウント)には一切手を加えない。
- 既存のフィルター検索・お気に入り・ランダム探索ボタンはスタンプラリーモード中も引き続き動作する。
ユーザーが「作った!」チェックを通じて全国47都道府県のグルメを制覇していく達成感を可視化し、継続的な利用動機を高める。旅行・料理好きのコレクション欲を刺激するゲーミフィケーション要素。
2. 具体的な仕様
【スタンプラリー画面】
- 既存のSVGインタラクティブ日本地図を流用し、「スタンプラリーモード」切替ボタン(地図上部に配置)を追加する。
- モード切替時、各都道府県の塗り色を以下の3段階で変化させる:
・未挑戦(その県のレシピを1品も「作った!」していない): グレー (#cccccc)
・挑戦中(1品以上「作った!」済み、ただし県内レシピを全制覇していない): オレンジ (#f4a136)
・制覇(県内の全レシピを「作った!」済み): 緑 (#4caf50) + SVG上にスタンプ風の星マークをオーバーレイ表示
- 都道府県ホバー時のツールチップに「○品中△品クリア」を追記する。
【進捗サマリーバー】
- 地図下部に固定のプログレスバーを設置。
「挑戦済み都道府県: X / 47」「総クリアレシピ: Y / 全件数」の2指標をテキスト+バーで表示。
- バーはCSSのwidthアニメーション(transition: width 0.6s ease)で動的に伸縮する。
【達成バッジのポップアップ】
- 以下のマイルストーン達成時にモーダルポップアップで祝福メッセージとバッジ画像(CSSで描画した絵文字+テキスト装飾で代用可)を表示する:
・初めて「作った!」を押したとき(バッジ名: 食の旅スタート)
・10都道府県挑戦達成(バッジ名: 食旅人)
・47都道府県すべて挑戦達成(バッジ名: 全国制覇への道)
・いずれかの都道府県を全レシピ制覇(バッジ名: ○○グルメマスター)
- 達成済みバッジはLocalStorageの `stamprally_badges` キーに配列で保存し、再表示しない。
- ポップアップには「シェア用テキストをコピー」ボタンを設置し、「StreetFood Mapで○○を達成しました! #StreetFoodMap」という文字列をクリップボードにコピーできるようにする(navigator.clipboard.writeText使用)。
【データ仕様】
- 既存の `cooked_recipes`(LocalStorage)をそのまま参照し、新規テーブル・キーの追加は `stamprally_badges` のみ。
- 各レシピDBレコードには既に都道府県コードが紐づいているため、JS側で都道府県ごとの全レシピ件数と「作った!」件数を集計するだけで実装可能。
- 集計処理は地図モード切替時と「作った!」ボタン押下時の2タイミングで実行し、都度SVGの塗り色とプログレスバーを再描画する。
3. 既存機能との整合
- SVG地図のクリック→都道府県グルメ一覧表示の既存フローはそのまま維持。スタンプラリーモードでクリックしても同様に遷移する(塗り色の変化はあくまで重ね表示)。
- 「作った!」ボタンのロジック・LocalStorageキー構造は変更しない。スタンプラリー側が参照するだけ。
- サーバー側ランキング集計(`cooked` カウント)には一切手を加えない。
- 既存のフィルター検索・お気に入り・ランダム探索ボタンはスタンプラリーモード中も引き続き動作する。
💬 返信 (4)
🛠 開発を開始しました (機能追加 (streetfood-map))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
[管理者]
📡 GitHub Actions の deploy workflow を再トリガーしました
PR #674 の merge から 24 分経過しても workflow run が見つからなかったため、手動で再起動しました。
通常 5〜10 分で完了します。
📡 GitHub Actions の deploy workflow を再トリガーしました
PR #674 の merge から 24 分経過しても workflow run が見つからなかったため、手動で再起動しました。
通常 5〜10 分で完了します。
✅ リリース完了のお知らせ
ご要望いただいた「StreetFood Map」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=streetfood-map
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/streetfood-map/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
ご要望いただいた「StreetFood Map」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=streetfood-map
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/streetfood-map/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
Echo
Iris