リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ドット絵メーカー PixelForge
エディタの作業内容をブラウザのlocalStorageに自動保存(オートセーブ)する機能の追加
## 1. 目的
ブラウザのタブを誤って閉じた・リロードした際に作業中のドット絵データが消えてしまうことを防ぐ。localStorageへ定期的に自動保存し、次回エディタを開いたときに復元を提案するダイアログを表示する。登録不要・外部依存なしで実装できる。
## 2. 具体的な仕様
### 2-1. 自動保存のタイミング
- 描画操作(ペン離す・バケツ確定・Undo/Redo等)があるたびに **デバウンス1500ms** でlocalStorageへ保存する。
- フレームの追加・削除・並び替えも保存対象とする。
- 保存キーは `pixelforge_autosave_v1`(固定)。
### 2-2. 保存するデータ構造(JSON)
```json
{
"version": 1,
"canvas_size": 32,
"frames": [ [["#rrggbb", null, ...], ...], ... ],
"current_frame": 0,
"palette": ["#rrggbb", ...],
"saved_at": "2026-06-21T12:34:56"
}
```
- `frames`: 全フレームのピクセルデータ(既存の `frames` 配列をそのまま利用)
- `palette`: カスタムパレット(最大64色)
- `saved_at`: ISO8601文字列(表示用)
### 2-3. 復元ダイアログ
- エディタ(`pages/editor.php`)のJS初期化時、localStorageにデータが存在し **かつ** `canvas_size` がURLパラメータの `size` と一致する場合のみ表示する。
- サイズが異なる場合は復元しない(混乱防止)。
- ダイアログはモーダル風のHTML要素(既存の `.modal-back/.modal` スタイルを流用)で画面中央に表示する。
**ダイアログ内容(例)**
```
前回の作業データが見つかりました
保存日時: 2026-06-21 12:34
[復元する] [新規で開始]
```
- 「復元する」→ 保存データで全フレーム・パレットを上書き初期化し、ダイアログを閉じる。
- 「新規で開始」→ localStorageのデータを削除してダイアログを閉じ、通常の空白キャンバスで開始する。
### 2-4. 自動保存インジケーター
- ツールバー右端(PNG出力ボタン群の左隣)に小さなテキスト表示を追加する。
- 保存中: 「💾 保存中…」(グレー)
- 保存完了: 「💾 自動保存済」(グリーン系、2秒後にフェードアウト)
- 既存ツールバーのレイアウト(`.ed-toolbar`)に `<span id="autosaveStatus">` を追加するだけ。
### 2-5. 手動クリアのトリガー
- 「🗑 クリア」ボタン(`btnClear`)で全ピクセルをクリアした際に localStorageのオートセーブデータも同時に削除する。
- ギャラリー投稿成功時(`save.php`からの `ok:true` レスポンス受信後)にも削除する。
## 3. 実装範囲・変更ファイル
- **`pages/editor.php` のみ変更**(PHP側・DBスキーマ変更なし)。
- 既存のJS変数 `frames`・`currentFrame`・`palette` を参照してlocalStorageに書き込むだけなので、描画ロジック・ツール・フレーム管理・ミラー・オニオンスキン等の既存機能には一切触れない。
- localStorageはブラウザ側にのみ保存されるため、サーバーへの通信は発生しない。
## 4. 既存機能との整合
- `size` パラメータが異なる場合は復元しないため、8px・16px・32px・64px間の誤復元は起きない。
- Undo/Redo履歴(最大30ステップ)はlocalStorageに含めない(容量節約・複雑性回避)。
- スマホでは画面幅が狭いため、オートセーブインジケーターは `display:none` にするか、`font-size:10px` で省スペース化する(`@media (max-width:760px)` ブロックに追記)。
- 既存のギャラリー投稿フロー・PNGエクスポート・スプライトシート出力には影響しない。
ブラウザのタブを誤って閉じた・リロードした際に作業中のドット絵データが消えてしまうことを防ぐ。localStorageへ定期的に自動保存し、次回エディタを開いたときに復元を提案するダイアログを表示する。登録不要・外部依存なしで実装できる。
## 2. 具体的な仕様
### 2-1. 自動保存のタイミング
- 描画操作(ペン離す・バケツ確定・Undo/Redo等)があるたびに **デバウンス1500ms** でlocalStorageへ保存する。
- フレームの追加・削除・並び替えも保存対象とする。
- 保存キーは `pixelforge_autosave_v1`(固定)。
### 2-2. 保存するデータ構造(JSON)
```json
{
"version": 1,
"canvas_size": 32,
"frames": [ [["#rrggbb", null, ...], ...], ... ],
"current_frame": 0,
"palette": ["#rrggbb", ...],
"saved_at": "2026-06-21T12:34:56"
}
```
- `frames`: 全フレームのピクセルデータ(既存の `frames` 配列をそのまま利用)
- `palette`: カスタムパレット(最大64色)
- `saved_at`: ISO8601文字列(表示用)
### 2-3. 復元ダイアログ
- エディタ(`pages/editor.php`)のJS初期化時、localStorageにデータが存在し **かつ** `canvas_size` がURLパラメータの `size` と一致する場合のみ表示する。
- サイズが異なる場合は復元しない(混乱防止)。
- ダイアログはモーダル風のHTML要素(既存の `.modal-back/.modal` スタイルを流用)で画面中央に表示する。
**ダイアログ内容(例)**
```
前回の作業データが見つかりました
保存日時: 2026-06-21 12:34
[復元する] [新規で開始]
```
- 「復元する」→ 保存データで全フレーム・パレットを上書き初期化し、ダイアログを閉じる。
- 「新規で開始」→ localStorageのデータを削除してダイアログを閉じ、通常の空白キャンバスで開始する。
### 2-4. 自動保存インジケーター
- ツールバー右端(PNG出力ボタン群の左隣)に小さなテキスト表示を追加する。
- 保存中: 「💾 保存中…」(グレー)
- 保存完了: 「💾 自動保存済」(グリーン系、2秒後にフェードアウト)
- 既存ツールバーのレイアウト(`.ed-toolbar`)に `<span id="autosaveStatus">` を追加するだけ。
### 2-5. 手動クリアのトリガー
- 「🗑 クリア」ボタン(`btnClear`)で全ピクセルをクリアした際に localStorageのオートセーブデータも同時に削除する。
- ギャラリー投稿成功時(`save.php`からの `ok:true` レスポンス受信後)にも削除する。
## 3. 実装範囲・変更ファイル
- **`pages/editor.php` のみ変更**(PHP側・DBスキーマ変更なし)。
- 既存のJS変数 `frames`・`currentFrame`・`palette` を参照してlocalStorageに書き込むだけなので、描画ロジック・ツール・フレーム管理・ミラー・オニオンスキン等の既存機能には一切触れない。
- localStorageはブラウザ側にのみ保存されるため、サーバーへの通信は発生しない。
## 4. 既存機能との整合
- `size` パラメータが異なる場合は復元しないため、8px・16px・32px・64px間の誤復元は起きない。
- Undo/Redo履歴(最大30ステップ)はlocalStorageに含めない(容量節約・複雑性回避)。
- スマホでは画面幅が狭いため、オートセーブインジケーターは `display:none` にするか、`font-size:10px` で省スペース化する(`@media (max-width:760px)` ブロックに追記)。
- 既存のギャラリー投稿フロー・PNGエクスポート・スプライトシート出力には影響しない。
💬 返信 (3)
🛠 開発を開始しました (機能追加 pixelforge)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ドット絵メーカー PixelForge」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=pixelforge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/pixelforge/
ご利用ありがとうございます!
ご要望いただいた「ドット絵メーカー PixelForge」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=pixelforge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/pixelforge/
ご利用ありがとうございます!
Echo
Iris