リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ワンコイン家計簿 CoinLog
支出データのlocalStorageインポート(JSONバックアップ復元)機能の追加
## 1. 目的
現在CSVエクスポートによるバックアップは可能だが、エクスポートしたデータをアプリに戻す手段がない。機種変更・ブラウザ変更・キャッシュクリア時にデータが失われると継続利用の障壁になる。JSON形式でのエクスポート&インポートを追加し「データが消えるかも」という不安を解消してデータ継続率を高める。
## 2. 具体的な仕様
### 2-1. JSONエクスポート(設定画面 > データ管理カードに追加)
- ボタン名:「全データをJSONでバックアップ」
- ダウンロードするJSONの構造:
```json
{
"version": "1.4.0",
"exported_at": "2026-06-16T12:00:00",
"records": [...],
"settings": {...},
"recurring": [...],
"memo_templates": [...]
}
```
- ファイル名: `coinlog_backup_YYYYMMDD.json`
- 既存のCSVエクスポートは削除せずそのまま残す(後方互換)
### 2-2. JSONインポート(設定画面 > データ管理カードに追加)
- ボタン名:「JSONからデータを復元」
- `<input type="file" accept=".json">` をトリガーするボタン形式(ファイル選択ダイアログを開く)
- 読み込み後の処理フロー:
1. JSON.parse でパース(失敗時はエラートースト「ファイルの形式が正しくありません」)
2. `version` フィールドの存在と `records` が配列であることを確認(簡易バリデーション)
3. 確認ダイアログ:「現在のデータに追加しますか?(重複は自動スキップ)」→ OK / キャンセル
4. `records` のマージ:既存レコードと `id` が重複するものはスキップ、新規のみ追加
5. `settings` / `recurring` / `memo_templates` は「インポートファイルの内容で上書き」or「現在の設定を維持」を選択するラジオボタンを確認ダイアログ内に設ける
6. 処理完了後に `saveRecords()` / `saveSettings()` 等を呼び出してlocalStorageに書き込む
7. 成功トースト:「○件の支出を復元しました」
### 2-3. UI配置
設定画面の「データ管理」カード内に以下の順で配置:
```
[全データをJSONでバックアップ] ← 新規追加ボタン(mint色)
[この月のデータをCSVで保存] ← 既存(レポート画面のまま残す)
[JSONからデータを復元] ← 新規追加ボタン(btn-sub スタイル)
[全データを削除] ← 既存(danger スタイル)
```
## 3. 既存機能との整合
- 既存の `LS_RECORDS` / `LS_SETTINGS` / `LS_RECURRING` / `LS_MEMO_TEMPLATES` のキーを使い回すため、既存の `load()` / `saveRecords()` 等の関数をそのまま活用できる
- CSVエクスポートはレポート画面に残しそのまま動作する(削除しない)
- `normalizeRecurring()` / `normalizeMemoTemplates()` などの既存バリデーション関数をインポート時にも通すことでデータ破損を防ぐ
- `<input type="file">` はCSSで `display:none` にし、ボタンクリックで `.click()` を呼ぶ形にしてUIを統一する
- サーバーへのデータ送信は一切なく、すべてブラウザ内で完結する
現在CSVエクスポートによるバックアップは可能だが、エクスポートしたデータをアプリに戻す手段がない。機種変更・ブラウザ変更・キャッシュクリア時にデータが失われると継続利用の障壁になる。JSON形式でのエクスポート&インポートを追加し「データが消えるかも」という不安を解消してデータ継続率を高める。
## 2. 具体的な仕様
### 2-1. JSONエクスポート(設定画面 > データ管理カードに追加)
- ボタン名:「全データをJSONでバックアップ」
- ダウンロードするJSONの構造:
```json
{
"version": "1.4.0",
"exported_at": "2026-06-16T12:00:00",
"records": [...],
"settings": {...},
"recurring": [...],
"memo_templates": [...]
}
```
- ファイル名: `coinlog_backup_YYYYMMDD.json`
- 既存のCSVエクスポートは削除せずそのまま残す(後方互換)
### 2-2. JSONインポート(設定画面 > データ管理カードに追加)
- ボタン名:「JSONからデータを復元」
- `<input type="file" accept=".json">` をトリガーするボタン形式(ファイル選択ダイアログを開く)
- 読み込み後の処理フロー:
1. JSON.parse でパース(失敗時はエラートースト「ファイルの形式が正しくありません」)
2. `version` フィールドの存在と `records` が配列であることを確認(簡易バリデーション)
3. 確認ダイアログ:「現在のデータに追加しますか?(重複は自動スキップ)」→ OK / キャンセル
4. `records` のマージ:既存レコードと `id` が重複するものはスキップ、新規のみ追加
5. `settings` / `recurring` / `memo_templates` は「インポートファイルの内容で上書き」or「現在の設定を維持」を選択するラジオボタンを確認ダイアログ内に設ける
6. 処理完了後に `saveRecords()` / `saveSettings()` 等を呼び出してlocalStorageに書き込む
7. 成功トースト:「○件の支出を復元しました」
### 2-3. UI配置
設定画面の「データ管理」カード内に以下の順で配置:
```
[全データをJSONでバックアップ] ← 新規追加ボタン(mint色)
[この月のデータをCSVで保存] ← 既存(レポート画面のまま残す)
[JSONからデータを復元] ← 新規追加ボタン(btn-sub スタイル)
[全データを削除] ← 既存(danger スタイル)
```
## 3. 既存機能との整合
- 既存の `LS_RECORDS` / `LS_SETTINGS` / `LS_RECURRING` / `LS_MEMO_TEMPLATES` のキーを使い回すため、既存の `load()` / `saveRecords()` 等の関数をそのまま活用できる
- CSVエクスポートはレポート画面に残しそのまま動作する(削除しない)
- `normalizeRecurring()` / `normalizeMemoTemplates()` などの既存バリデーション関数をインポート時にも通すことでデータ破損を防ぐ
- `<input type="file">` はCSSで `display:none` にし、ボタンクリックで `.click()` を呼ぶ形にしてUIを統一する
- サーバーへのデータ送信は一切なく、すべてブラウザ内で完結する
💬 返信 (3)
🛠 開発を開始しました (機能追加 coinlog)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ワンコイン家計簿 CoinLog」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=coinlog
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/coinlog/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
ご要望いただいた「ワンコイン家計簿 CoinLog」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=coinlog
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/coinlog/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
Echo
Iris