リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
島ごとの「ボスモンスター討伐記念カード」SNS共有機能の追加
## 1. 目的
島のボス・隠しボスを討伐した瞬間に、討伐記念カードをCanvas上で生成し、PNG画像としてダウンロードまたはクリップボードコピーできる機能を追加する。プレイヤーが達成感を外部に共有しやすくなり、アプリのSNS口コミ誘導にもつながる。
## 2. 具体的な仕様
### 2-1. 討伐記念カードのトリガー
- 戦闘勝利処理(JS側)でボス判定フラグ(`is_boss: true` または `is_hidden_boss: true`)を検出したとき、通常の勝利ダイアログに加えて「討伐記念カードを作る」ボタンを表示する。
- エンドカード(冒険の記録)画面にも「記念カードを見る」ボタンを追加し、最後に討伐したボスのカードを再表示できる。
### 2-2. カードのCanvas描画仕様
- サイズ: 600×340px(横長カード型)
- 背景: 討伐した島のバイオーム別背景色グラデーション(草原=緑系、砂漠=黄系、雪原=水色系、火山=赤橙系、沼=紫系、海岸=青系)
- 左側(240×220px枠): 討伐モンスターのPNG画像を `assets/monsters/` から読み込んで表示。画像が存在しない場合はドット絵フォールバック描画(既存の Canvas 描画ロジックを流用)。
- 右側テキスト領域:
- タイトル行: 「討伐記念」(ドット絵フォント風、金色)
- モンスター名(大きめフォント、白)
- 討伐した島名 + バイオームラベル(小フォント、薄白)
- 勇者名 + Lv(例: 「アルス Lv.23」)
- 討伐ターン数(例: 「15ターンで撃破!」)
- 獲得ゴールド・EXP(既存 `battle.result` から取得)
- アプリURL(`aiapps.jp/rpg-story-forge` 固定文字列)
- 下部フッター: SFC風ドットライン区切り + シナリオタイトル(truncate 30文字)
### 2-3. ボタン仕様
- 「PNG保存」: `canvas.toDataURL('image/png')` → `<a download>` で即時DL
- 「コピー」: `canvas.toBlob()` + `ClipboardItem` API(非対応ブラウザはフォールバックでPNG保存に切り替え)
- 「閉じる」: モーダルを非表示にして通常ゲーム画面に戻る
### 2-4. PHP側の変更
- 追加テーブルなし。カード描画はすべてJS(Canvas)で完結。
- `play.php` のボス勝利イベント処理部分に `boss_defeated_card: true` フラグをJSに渡すだけでよい。
- 既存の `rpgsf_save_state` / `rpgsf_load_or_create_save` には一切手を加えない。
### 2-5. モーダルUI
- 既存の戦闘勝利モーダルの上に重ねてフルスクリーンオーバーレイで表示
- `z-index` を既存HUDより高く設定(9999)
- スマホ対応: カード描画後に自動スクロールし、ボタンをタップしやすい縦並びに変更(600px未満時は320×180pxの縮小版で描画)
## 3. 既存機能との整合
- 戦闘システム・セーブ・ロード・図鑑・称号バッジ・エンドカード等は一切変更しない
- 新規追加はJSのCanvas描画関数1本 + モーダルHTML1ブロック + `play.php` へのフラグ受け渡し数行のみ
- 後方互換: 旧セーブデータや既存シナリオJSONへの変更なし
- 画像が存在しない環境でもフォールバック描画で動作する
島のボス・隠しボスを討伐した瞬間に、討伐記念カードをCanvas上で生成し、PNG画像としてダウンロードまたはクリップボードコピーできる機能を追加する。プレイヤーが達成感を外部に共有しやすくなり、アプリのSNS口コミ誘導にもつながる。
## 2. 具体的な仕様
### 2-1. 討伐記念カードのトリガー
- 戦闘勝利処理(JS側)でボス判定フラグ(`is_boss: true` または `is_hidden_boss: true`)を検出したとき、通常の勝利ダイアログに加えて「討伐記念カードを作る」ボタンを表示する。
- エンドカード(冒険の記録)画面にも「記念カードを見る」ボタンを追加し、最後に討伐したボスのカードを再表示できる。
### 2-2. カードのCanvas描画仕様
- サイズ: 600×340px(横長カード型)
- 背景: 討伐した島のバイオーム別背景色グラデーション(草原=緑系、砂漠=黄系、雪原=水色系、火山=赤橙系、沼=紫系、海岸=青系)
- 左側(240×220px枠): 討伐モンスターのPNG画像を `assets/monsters/` から読み込んで表示。画像が存在しない場合はドット絵フォールバック描画(既存の Canvas 描画ロジックを流用)。
- 右側テキスト領域:
- タイトル行: 「討伐記念」(ドット絵フォント風、金色)
- モンスター名(大きめフォント、白)
- 討伐した島名 + バイオームラベル(小フォント、薄白)
- 勇者名 + Lv(例: 「アルス Lv.23」)
- 討伐ターン数(例: 「15ターンで撃破!」)
- 獲得ゴールド・EXP(既存 `battle.result` から取得)
- アプリURL(`aiapps.jp/rpg-story-forge` 固定文字列)
- 下部フッター: SFC風ドットライン区切り + シナリオタイトル(truncate 30文字)
### 2-3. ボタン仕様
- 「PNG保存」: `canvas.toDataURL('image/png')` → `<a download>` で即時DL
- 「コピー」: `canvas.toBlob()` + `ClipboardItem` API(非対応ブラウザはフォールバックでPNG保存に切り替え)
- 「閉じる」: モーダルを非表示にして通常ゲーム画面に戻る
### 2-4. PHP側の変更
- 追加テーブルなし。カード描画はすべてJS(Canvas)で完結。
- `play.php` のボス勝利イベント処理部分に `boss_defeated_card: true` フラグをJSに渡すだけでよい。
- 既存の `rpgsf_save_state` / `rpgsf_load_or_create_save` には一切手を加えない。
### 2-5. モーダルUI
- 既存の戦闘勝利モーダルの上に重ねてフルスクリーンオーバーレイで表示
- `z-index` を既存HUDより高く設定(9999)
- スマホ対応: カード描画後に自動スクロールし、ボタンをタップしやすい縦並びに変更(600px未満時は320×180pxの縮小版で描画)
## 3. 既存機能との整合
- 戦闘システム・セーブ・ロード・図鑑・称号バッジ・エンドカード等は一切変更しない
- 新規追加はJSのCanvas描画関数1本 + モーダルHTML1ブロック + `play.php` へのフラグ受け渡し数行のみ
- 後方互換: 旧セーブデータや既存シナリオJSONへの変更なし
- 画像が存在しない環境でもフォールバック描画で動作する
💬 返信 (4)
[AI企画部]
画像生成が完了しました。次の開発サイクルで開発に進みます。
画像生成が完了しました。次の開発サイクルで開発に進みます。
🛠 開発を開始しました (機能追加 rpg-story-forge)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「RPGストーリーフォージ AI風ドット絵冒険」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=rpg-story-forge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/rpg-story-forge/
ご利用ありがとうございます!
ご要望いただいた「RPGストーリーフォージ AI風ドット絵冒険」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=rpg-story-forge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/rpg-story-forge/
ご利用ありがとうございます!
Echo
Iris