リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
モンスター・背景PNG画像のWebPオンデマンド配信による表示高速化
1. 目的:
これまでAjax応答やDB書き込み、Canvas描画キャッシュ等の高速化を重ねてきたが、実際の通信量で大きな割合を占める大量のモンスターPNG画像(数百種)・フィールド背景画像・ドット絵タイルの転送サイズには未着手。画像を自動でWebPに変換して配信することで、マップ移動・戦闘突入・図鑑表示・Service Workerの初回キャッシュ登録を体感速く感じられるようにする。
2. 具体的仕様:
- lib.phpに `rpgsf_image_url(string $png_relative_path): string` を新設。呼び出し時に `$_SERVER['HTTP_ACCEPT']` に `image/webp` が含まれ、かつ config.php の `webp_conversion`(デフォルトtrue)が有効かつ `function_exists('imagewebp')` の場合のみ、WebP配信用URL `api/webp_image.php?src=<相対パス>&v=<manifest version>` を返す。それ以外は従来通り元のPNGパスをそのまま返す(フォールバック)。
- api/webp_image.php を新設:
- `src` パラメータをrealpath検証し、アプリディレクトリ配下のPNGファイルであることを確認(ディレクトリトラバーサル対策)。
- 変換結果は `storage/cache/webp/{md5(src+mtime)}.webp` にキャッシュ保存。既にキャッシュがあればそれを `readfile()` で返す。無ければ `imagecreatefrompng` → `imagewebp(品質82)` で生成しキャッシュ後に返す。
- レスポンスヘッダーに `Content-Type: image/webp` と `Cache-Control: public, max-age=31536000, immutable` を付与。
- 変換に失敗した場合(GD未対応・破損画像等)は元のPNGファイルをそのまま出力し、既存動作を壊さない。
- マップCanvas・戦闘Canvas・図鑑・ショップ/ふくろ/装備アイコン等、画像パスをJSに渡している既存箇所のPHP出力部分だけを `rpgsf_image_url()` 経由に置き換える(JS側のCanvas描画ロジックやimg要素の扱いは変更不要、URLが変わるだけ)。
- Service Workerのプリキャッシュリスト生成箇所も同関数経由のURLに統一し、対応ブラウザではWebP、非対応(旧Safari等)ブラウザでは自動的にPNGのままキャッシュされるようにする。
- config.php に `webp_conversion` フラグ(bool, デフォルトtrue)を追加し、管理者が無効化して従来のPNG直配信のみに戻せるようにする。
3. 既存機能との整合:
- 既存のPNG直リンク・共有URL・キャッシュ済みリソースへの参照は一切変更せず、新規ヘルパー経由で出力するimgタグ・Canvas読み込みURLのみが変わる。GD拡張が無い環境やAcceptヘッダー非対応ブラウザでは自動的に従来のPNG配信にフォールバックするため、後方互換を完全に維持する。既存の.htaccessによるPNGの長期キャッシュ設定もそのまま有効。
これまでAjax応答やDB書き込み、Canvas描画キャッシュ等の高速化を重ねてきたが、実際の通信量で大きな割合を占める大量のモンスターPNG画像(数百種)・フィールド背景画像・ドット絵タイルの転送サイズには未着手。画像を自動でWebPに変換して配信することで、マップ移動・戦闘突入・図鑑表示・Service Workerの初回キャッシュ登録を体感速く感じられるようにする。
2. 具体的仕様:
- lib.phpに `rpgsf_image_url(string $png_relative_path): string` を新設。呼び出し時に `$_SERVER['HTTP_ACCEPT']` に `image/webp` が含まれ、かつ config.php の `webp_conversion`(デフォルトtrue)が有効かつ `function_exists('imagewebp')` の場合のみ、WebP配信用URL `api/webp_image.php?src=<相対パス>&v=<manifest version>` を返す。それ以外は従来通り元のPNGパスをそのまま返す(フォールバック)。
- api/webp_image.php を新設:
- `src` パラメータをrealpath検証し、アプリディレクトリ配下のPNGファイルであることを確認(ディレクトリトラバーサル対策)。
- 変換結果は `storage/cache/webp/{md5(src+mtime)}.webp` にキャッシュ保存。既にキャッシュがあればそれを `readfile()` で返す。無ければ `imagecreatefrompng` → `imagewebp(品質82)` で生成しキャッシュ後に返す。
- レスポンスヘッダーに `Content-Type: image/webp` と `Cache-Control: public, max-age=31536000, immutable` を付与。
- 変換に失敗した場合(GD未対応・破損画像等)は元のPNGファイルをそのまま出力し、既存動作を壊さない。
- マップCanvas・戦闘Canvas・図鑑・ショップ/ふくろ/装備アイコン等、画像パスをJSに渡している既存箇所のPHP出力部分だけを `rpgsf_image_url()` 経由に置き換える(JS側のCanvas描画ロジックやimg要素の扱いは変更不要、URLが変わるだけ)。
- Service Workerのプリキャッシュリスト生成箇所も同関数経由のURLに統一し、対応ブラウザではWebP、非対応(旧Safari等)ブラウザでは自動的にPNGのままキャッシュされるようにする。
- config.php に `webp_conversion` フラグ(bool, デフォルトtrue)を追加し、管理者が無効化して従来のPNG直配信のみに戻せるようにする。
3. 既存機能との整合:
- 既存のPNG直リンク・共有URL・キャッシュ済みリソースへの参照は一切変更せず、新規ヘルパー経由で出力するimgタグ・Canvas読み込みURLのみが変わる。GD拡張が無い環境やAcceptヘッダー非対応ブラウザでは自動的に従来のPNG配信にフォールバックするため、後方互換を完全に維持する。既存の.htaccessによるPNGの長期キャッシュ設定もそのまま有効。
💬 返信 (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