リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
スマホ操作のタップ応答高速化(clickイベント遅延・パッシブリスナー最適化)
1. 目的:
これまでの改善でマップ移動やAjax通信、Canvas描画は高速化されているが、スマホ実機では「ボタンを押してから反応するまで」の入力段階自体に遅延が残っている。多くのブラウザは click イベント発火前にダブルタップズーム判定(最大約300ms)を行い、また touch イベントリスナーが passive 指定されていないとスクロール判定待ちで遅延する。方向パッド・戦闘コマンド・ショップ/ふくろのボタン・マップタイルタップなど、ユーザーが最も頻繁に触る操作の体感速度を底上げする。
2. 具体的な仕様:
- 全ての操作系要素(方向パッド、戦闘コマンドボタン、ショップ/ふくろ/装備欄のボタン、マップ上のタップ移動用オーバーレイ、メニュー切り替えタブ)に CSS `touch-action: manipulation;` を付与し、ブラウザのダブルタップズーム判定による遅延を解消する。
- 各ページ共通のヘッダー出力箇所(rpgsf_render_header)で `<meta name="viewport">` に `user-scalable=no, viewport-fit=cover` が未設定なら追加し、ズームジェスチャー判定自体を発生させない。
- 主要な操作ボタン・タイルに対し、既存の `click` ハンドラはそのまま残しつつ、`pointerdown`(フォールバックで `touchstart`)でも同じ処理を先行発火させる共通ラッパー関数 `bindFastTap(el, handler)` を新規JSファイル(assets/js/fast-tap.js 等、既存JSに追記も可)に実装する。ラッパーは要素ごとに直近発火時刻を記録し、同一要素で150ms以内の重複発火(pointerdown直後のclick発火)を無視することで二重実行を防止する。
- タッチ系イベントリスナーには `{ passive: true }` を明示指定し、スクロールブロッキング判定によるハンドラ実行遅延を避ける(preventDefaultが必要な箇所のみpassive:falseを個別維持)。
- マップCanvas上のタップ移動判定処理にも同じ bindFastTap を適用し、タイルタップから移動開始までの体感遅延を短縮する。
- 対応はCSS追加とJSラッパー関数の追加のみで、既存のclickベースの処理ロジック(戦闘コマンド送信、ショップ購入、装備変更、マップ移動API呼び出しなど)は一切変更しない。
3. 既存機能との整合:
- 既存の click イベントハンドラは変更・削除せず、pointerdown発火を先行させるラッパーを追加するだけなので、PCのマウス操作・既存のAjax処理・オプティミスティック移動描画・戦闘フローは従来通り動作する。
- touch-action や viewport 変更はレイアウト崩れを起こさないプロパティのみを対象とし、SFC風ドット絵UIの見た目は変わらない。
- 二重発火防止のデバウンスにより、誤操作の連打(同一ボタンの多重送信)も副次的に抑制される。
これまでの改善でマップ移動やAjax通信、Canvas描画は高速化されているが、スマホ実機では「ボタンを押してから反応するまで」の入力段階自体に遅延が残っている。多くのブラウザは click イベント発火前にダブルタップズーム判定(最大約300ms)を行い、また touch イベントリスナーが passive 指定されていないとスクロール判定待ちで遅延する。方向パッド・戦闘コマンド・ショップ/ふくろのボタン・マップタイルタップなど、ユーザーが最も頻繁に触る操作の体感速度を底上げする。
2. 具体的な仕様:
- 全ての操作系要素(方向パッド、戦闘コマンドボタン、ショップ/ふくろ/装備欄のボタン、マップ上のタップ移動用オーバーレイ、メニュー切り替えタブ)に CSS `touch-action: manipulation;` を付与し、ブラウザのダブルタップズーム判定による遅延を解消する。
- 各ページ共通のヘッダー出力箇所(rpgsf_render_header)で `<meta name="viewport">` に `user-scalable=no, viewport-fit=cover` が未設定なら追加し、ズームジェスチャー判定自体を発生させない。
- 主要な操作ボタン・タイルに対し、既存の `click` ハンドラはそのまま残しつつ、`pointerdown`(フォールバックで `touchstart`)でも同じ処理を先行発火させる共通ラッパー関数 `bindFastTap(el, handler)` を新規JSファイル(assets/js/fast-tap.js 等、既存JSに追記も可)に実装する。ラッパーは要素ごとに直近発火時刻を記録し、同一要素で150ms以内の重複発火(pointerdown直後のclick発火)を無視することで二重実行を防止する。
- タッチ系イベントリスナーには `{ passive: true }` を明示指定し、スクロールブロッキング判定によるハンドラ実行遅延を避ける(preventDefaultが必要な箇所のみpassive:falseを個別維持)。
- マップCanvas上のタップ移動判定処理にも同じ bindFastTap を適用し、タイルタップから移動開始までの体感遅延を短縮する。
- 対応はCSS追加とJSラッパー関数の追加のみで、既存のclickベースの処理ロジック(戦闘コマンド送信、ショップ購入、装備変更、マップ移動API呼び出しなど)は一切変更しない。
3. 既存機能との整合:
- 既存の click イベントハンドラは変更・削除せず、pointerdown発火を先行させるラッパーを追加するだけなので、PCのマウス操作・既存のAjax処理・オプティミスティック移動描画・戦闘フローは従来通り動作する。
- touch-action や viewport 変更はレイアウト崩れを起こさないプロパティのみを対象とし、SFC風ドット絵UIの見た目は変わらない。
- 二重発火防止のデバウンスにより、誤操作の連打(同一ボタンの多重送信)も副次的に抑制される。
💬 返信 (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