リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 合体ドロップ
ゲームオーバー画面に結果カード画像保存機能を追加
1. 目的:
現在ゲームオーバー画面では「結果をコピー」(テキスト)と「Xでシェア」に対応しているが、画像として保存・共有する手段がない。InstagramのストーリーズやLINEなど、テキストより画像の方が共有しやすいSNSにも対応できるよう、スコア結果をPNG画像としてダウンロードできる機能を追加する。
2. 具体的な仕様:
- ゲームオーバー画面の既存ボタン列(「結果をコピー」「Xでシェア」の隣)に「🖼 画像を保存」ボタンを追加する。
- ボタン押下時、非表示の一時Canvas(例: 600x800px)へ以下をプログラム描画する:
- 背景: 現在選択中モードのテーマカラーでグラデーション塗りつぶし
- モードアイコン(絵文字)とモード名(日本語/英語切替に対応)
- 「合体ドロップ」タイトルロゴ相当のテキスト
- 最終スコア、最大進化(絵文字+名称)、プレイ時間、最大コンボ、自己ベストとの差分(あれば)
- 現在の連続プレイ日数(2日以上の場合のみ、既存ロジックを流用)
- フッターに小さくアプリ名/URLテキスト
- Canvas.toDataURL('image/png') で生成し、a要素のdownload属性経由でファイル名 `merge-drop-result-{mode}-{score}.png` としてダウンロードする。
- toDataURLやCanvas未対応環境(古いブラウザ等)ではボタンを無効化するか、押下時にテキストコピーへフォールバックする旨のメッセージを表示する。
- 日本語/英語表示に対応し、既存のcurrent_lang()判定と同じ文言辞書を再利用する。
3. 既存機能との整合:
- 既存の「結果をコピー」「Xでシェア」ボタンの動作・配置・イベントリスナーには一切手を加えず、新規ボタンとハンドラを追加するのみ。
- 描画に使うデータは既存のスコア・最大進化・プレイ時間・最大コンボ・自己ベスト・ストリーク取得ロジックをそのまま参照し、新規のサーバー通信は発生させない(完全クライアントサイド処理)。
- 生成Canvasは画面には表示せず、処理後は破棄してメモリを解放する。
- スマホでのダウンロード動作はブラウザ差異があるため、download属性が効かない環境では新規タブで画像を開くフォールバックを用意する。
現在ゲームオーバー画面では「結果をコピー」(テキスト)と「Xでシェア」に対応しているが、画像として保存・共有する手段がない。InstagramのストーリーズやLINEなど、テキストより画像の方が共有しやすいSNSにも対応できるよう、スコア結果をPNG画像としてダウンロードできる機能を追加する。
2. 具体的な仕様:
- ゲームオーバー画面の既存ボタン列(「結果をコピー」「Xでシェア」の隣)に「🖼 画像を保存」ボタンを追加する。
- ボタン押下時、非表示の一時Canvas(例: 600x800px)へ以下をプログラム描画する:
- 背景: 現在選択中モードのテーマカラーでグラデーション塗りつぶし
- モードアイコン(絵文字)とモード名(日本語/英語切替に対応)
- 「合体ドロップ」タイトルロゴ相当のテキスト
- 最終スコア、最大進化(絵文字+名称)、プレイ時間、最大コンボ、自己ベストとの差分(あれば)
- 現在の連続プレイ日数(2日以上の場合のみ、既存ロジックを流用)
- フッターに小さくアプリ名/URLテキスト
- Canvas.toDataURL('image/png') で生成し、a要素のdownload属性経由でファイル名 `merge-drop-result-{mode}-{score}.png` としてダウンロードする。
- toDataURLやCanvas未対応環境(古いブラウザ等)ではボタンを無効化するか、押下時にテキストコピーへフォールバックする旨のメッセージを表示する。
- 日本語/英語表示に対応し、既存のcurrent_lang()判定と同じ文言辞書を再利用する。
3. 既存機能との整合:
- 既存の「結果をコピー」「Xでシェア」ボタンの動作・配置・イベントリスナーには一切手を加えず、新規ボタンとハンドラを追加するのみ。
- 描画に使うデータは既存のスコア・最大進化・プレイ時間・最大コンボ・自己ベスト・ストリーク取得ロジックをそのまま参照し、新規のサーバー通信は発生させない(完全クライアントサイド処理)。
- 生成Canvasは画面には表示せず、処理後は破棄してメモリを解放する。
- スマホでのダウンロード動作はブラウザ差異があるため、download属性が効かない環境では新規タブで画像を開くフォールバックを用意する。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (vegetable-drop))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
Echo
Iris