リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: StreetFood Map
「今日の献立にする」材料メモ機能(印刷・テキストコピー対応)
## 1. 目的
レシピを見て「作ってみたい」と思ったユーザーが、買い物や調理準備にスムーズに移れるよう、レシピの材料リストをワンタップで手元に持ち出せる機能を追加する。既存のお気に入り・「作った!」機能を補完し、「見る→作る」の行動導線を強化する。
## 2. 具体的な仕様
### 2-1. UIボタンの追加
- 既存の材料タブの末尾(材料リストの直下)に「🛒 材料メモをコピー」ボタンと「🖨️ 印刷用に表示」ボタンを横並びで追加する。
- ボタンはスマホでは縦積みにしてタップしやすいサイズ(min-height: 44px)を確保する。
### 2-2. 「材料メモをコピー」動作
- クリック時に以下の書式でテキストを生成し、Clipboard API(`navigator.clipboard.writeText`)でコピーする。
```
【料理名】博多もつ鍋(福岡県)
─材料(2人分)─
・牛もつ … 300g
・キャベツ … 1/4個
…(以下、既存DBの材料リストを箇条書き)
─StreetFood Map より─
```
- Clipboard API非対応環境(一部Android WebView等)はfallbackとして`execCommand('copy')`を使用する。
- コピー成功時はボタンのテキストを「✅ コピーしました!」に1.5秒変化させ、元に戻す(CSSトランジションで視覚フィードバック)。
### 2-3. 「印刷用に表示」動作
- クリック時に `window.print()` を呼び出す。
- `@media print` CSSを新規追加し、印刷時はナビゲーション・地図・フィルター・ボタン類を `display:none` にして、料理名・地域・材料リスト・手順・うんちくのみをA4縦1ページ相当に整形して出力する。
- フォントサイズは本文12pt、見出し16ptを基準とする。
- 既存のタブUIは印刷時に全タブ内容を縦に展開表示し、タブ切り替えUIは非表示にする。
### 2-4. データ取得
- 材料データは既存の内製レシピDBから取得している既存ロジック(タブ表示用)をそのまま流用する。新規DBアクセスは不要。
## 3. 既存機能との整合
- 既存のタブ切り替えUI(材料・手順・うんちく)は変更せず、材料タブのコンテンツ末尾にボタンを追加するだけで完結する。
- お気に入り・「作った!」機能・ランキング・地図・フィルター検索には一切手を加えない。
- `@media print` の追加は既存画面表示に影響しない。
- LocalStorageの読み書きも発生しない。
- 実装ファイルはレシピ詳細表示部のJS(インラインまたは既存JSファイル)とCSSの2ファイルのみの修正で完結できる規模とする。
レシピを見て「作ってみたい」と思ったユーザーが、買い物や調理準備にスムーズに移れるよう、レシピの材料リストをワンタップで手元に持ち出せる機能を追加する。既存のお気に入り・「作った!」機能を補完し、「見る→作る」の行動導線を強化する。
## 2. 具体的な仕様
### 2-1. UIボタンの追加
- 既存の材料タブの末尾(材料リストの直下)に「🛒 材料メモをコピー」ボタンと「🖨️ 印刷用に表示」ボタンを横並びで追加する。
- ボタンはスマホでは縦積みにしてタップしやすいサイズ(min-height: 44px)を確保する。
### 2-2. 「材料メモをコピー」動作
- クリック時に以下の書式でテキストを生成し、Clipboard API(`navigator.clipboard.writeText`)でコピーする。
```
【料理名】博多もつ鍋(福岡県)
─材料(2人分)─
・牛もつ … 300g
・キャベツ … 1/4個
…(以下、既存DBの材料リストを箇条書き)
─StreetFood Map より─
```
- Clipboard API非対応環境(一部Android WebView等)はfallbackとして`execCommand('copy')`を使用する。
- コピー成功時はボタンのテキストを「✅ コピーしました!」に1.5秒変化させ、元に戻す(CSSトランジションで視覚フィードバック)。
### 2-3. 「印刷用に表示」動作
- クリック時に `window.print()` を呼び出す。
- `@media print` CSSを新規追加し、印刷時はナビゲーション・地図・フィルター・ボタン類を `display:none` にして、料理名・地域・材料リスト・手順・うんちくのみをA4縦1ページ相当に整形して出力する。
- フォントサイズは本文12pt、見出し16ptを基準とする。
- 既存のタブUIは印刷時に全タブ内容を縦に展開表示し、タブ切り替えUIは非表示にする。
### 2-4. データ取得
- 材料データは既存の内製レシピDBから取得している既存ロジック(タブ表示用)をそのまま流用する。新規DBアクセスは不要。
## 3. 既存機能との整合
- 既存のタブ切り替えUI(材料・手順・うんちく)は変更せず、材料タブのコンテンツ末尾にボタンを追加するだけで完結する。
- お気に入り・「作った!」機能・ランキング・地図・フィルター検索には一切手を加えない。
- `@media print` の追加は既存画面表示に影響しない。
- LocalStorageの読み書きも発生しない。
- 実装ファイルはレシピ詳細表示部のJS(インラインまたは既存JSファイル)とCSSの2ファイルのみの修正で完結できる規模とする。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (streetfood-map))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「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/
ご利用ありがとうございます!
ご要望いただいた「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/
ご利用ありがとうございます!
Echo
Iris