リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
移動・戦闘AjaxのAbortController化による多重リクエスト解消と体感速度向上
1. 目的:
マップ移動の方向キー連打やスマホ方向パッド連打、戦闘コマンドのボタン連打時に、直前のAjaxリクエストが完了しないまま次のリクエストが発行され、複数のfetch/XHRが同時に飛んでいる状態になっている。これによりサーバー処理やネットワーク帯域が無駄に消費されるだけでなく、レスポンスの到着順序が入れ替わった場合に古いレスポンスが新しい状態を上書きして画面がちらつく・一瞬巻き戻る現象が起きやすく、体感速度を損ねている。既存の『最新操作だけを反映する予測描画』はクライアント側の入力キューを間引く仕組みだが、実際のネットワークリクエスト自体は多重に飛んだままになっているため、ネットワークレベルでの多重リクエストそのものを止めることで、サーバー・回線双方の無駄を減らし、応答の取りこぼしなしで最速のレスポンスだけを反映できるようにする。
2. 具体的な仕様:
- assets/js内の移動Ajax関数・戦闘コマンドAjax関数それぞれに、モジュールスコープの `let currentMoveAbort = null;` `let currentBattleAbort = null;` のようなAbortController保持変数を追加する。
- リクエスト送信直前に、直前のコントローラーがあれば `abort()` を呼んでから新しい `AbortController` を生成し、`fetch(url, { ..., signal: controller.signal })` として使用する。
- fetchの catch 節で `err.name === 'AbortError'` の場合は無視(エラーログ・UI表示をしない)し、それ以外のエラーのみ通常通り扱う。
- 各リクエストにインクリメンタルなリクエストID(連番)を持たせ、レスポンス受信時に『自分が最新リクエストIDか』を確認してから画面状態(HP・ログ・マップ座標など)を反映することで、万一AbortControllerが間に合わなかった場合の二重反映も防止する。
- 対象箇所は移動(マップ座標更新)Ajax、戦闘コマンド送信Ajax、宝箱/NPC接触などの短時間で連続入力されやすい既存Ajax呼び出し全てとする。
- サーバー側(PHP)の処理内容・レスポンス形式・DBスキーマは変更しない。クライアントJSのみの変更で完結する。
3. 既存機能との整合:
- 既存の『最新操作のみ反映する予測描画』『セッションバッファによるDB書き込み間引き』『差分レンダリング』とは独立して動作し、互いに競合しない。むしろ多重リクエストが減ることでセッションロック競合やバッファ処理の負荷も副次的に軽減される。
- 通常操作(連打しない場合)の挙動・レスポンス内容は一切変わらないため後方互換。
- AbortErrorのハンドリングを追加するのみで、既存のエラーハンドリング分岐(通信失敗時の再試行やエラーメッセージ表示)はそのまま維持する。
マップ移動の方向キー連打やスマホ方向パッド連打、戦闘コマンドのボタン連打時に、直前のAjaxリクエストが完了しないまま次のリクエストが発行され、複数のfetch/XHRが同時に飛んでいる状態になっている。これによりサーバー処理やネットワーク帯域が無駄に消費されるだけでなく、レスポンスの到着順序が入れ替わった場合に古いレスポンスが新しい状態を上書きして画面がちらつく・一瞬巻き戻る現象が起きやすく、体感速度を損ねている。既存の『最新操作だけを反映する予測描画』はクライアント側の入力キューを間引く仕組みだが、実際のネットワークリクエスト自体は多重に飛んだままになっているため、ネットワークレベルでの多重リクエストそのものを止めることで、サーバー・回線双方の無駄を減らし、応答の取りこぼしなしで最速のレスポンスだけを反映できるようにする。
2. 具体的な仕様:
- assets/js内の移動Ajax関数・戦闘コマンドAjax関数それぞれに、モジュールスコープの `let currentMoveAbort = null;` `let currentBattleAbort = null;` のようなAbortController保持変数を追加する。
- リクエスト送信直前に、直前のコントローラーがあれば `abort()` を呼んでから新しい `AbortController` を生成し、`fetch(url, { ..., signal: controller.signal })` として使用する。
- fetchの catch 節で `err.name === 'AbortError'` の場合は無視(エラーログ・UI表示をしない)し、それ以外のエラーのみ通常通り扱う。
- 各リクエストにインクリメンタルなリクエストID(連番)を持たせ、レスポンス受信時に『自分が最新リクエストIDか』を確認してから画面状態(HP・ログ・マップ座標など)を反映することで、万一AbortControllerが間に合わなかった場合の二重反映も防止する。
- 対象箇所は移動(マップ座標更新)Ajax、戦闘コマンド送信Ajax、宝箱/NPC接触などの短時間で連続入力されやすい既存Ajax呼び出し全てとする。
- サーバー側(PHP)の処理内容・レスポンス形式・DBスキーマは変更しない。クライアントJSのみの変更で完結する。
3. 既存機能との整合:
- 既存の『最新操作のみ反映する予測描画』『セッションバッファによるDB書き込み間引き』『差分レンダリング』とは独立して動作し、互いに競合しない。むしろ多重リクエストが減ることでセッションロック競合やバッファ処理の負荷も副次的に軽減される。
- 通常操作(連打しない場合)の挙動・レスポンス内容は一切変わらないため後方互換。
- AbortErrorのハンドリングを追加するのみで、既存のエラーハンドリング分岐(通信失敗時の再試行やエラーメッセージ表示)はそのまま維持する。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (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