リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ClipVault スニペット管理
スニペットの「バージョン履歴」機能の追加(直近5世代まで保持)
## 1. 目的
スニペットを編集した際に以前の内容を誤って上書きしてしまうリスクを解消する。編集するたびに直前の状態を自動保存し、いつでも任意のバージョンに1クリックで戻せるようにする。アカウント不要・localStorageのみで完結するため既存アーキテクチャを維持できる。
## 2. 具体的な仕様
### 2-1. データ構造の拡張
既存のスニペットオブジェクトに `history` 配列を追加する。
```json
{
"id": "xxxx",
"title": "...",
"code": "...",
"language": "...",
"tags": [],
"description": "...",
"history": [
{
"savedAt": "2025-06-01T12:00:00.000Z",
"title": "旧タイトル",
"code": "旧コード",
"language": "javascript",
"tags": [],
"description": "旧説明"
}
]
}
```
- `history` は最大5件。6件目が発生したら最古のエントリを削除(FIFO)。
- 既存スニペットに `history` キーが存在しない場合は空配列として扱う(後方互換)。
- JSON export/import 時も `history` をそのまま含めて出力・読み込みする。
### 2-2. 履歴の自動保存タイミング
- 編集フォームの「保存」ボタン押下時、**保存処理の直前**に現在のスニペット内容(title/code/language/tags/description)を `history` 配列の先頭に push する。
- 新規作成時は履歴を記録しない(`history: []` で初期化)。
- コピー操作・お気に入りトグルなど、コード本体に変更のない操作では履歴を記録しない。
### 2-3. UI — 履歴ボタン
- 各スニペットカードの操作ボタン列(コピー・編集・削除等が並ぶ行)に「🕓」アイコンボタンを追加する。
- `history` が空の場合はボタンをグレーアウト(disabled)にし、ツールチップ「編集履歴なし」を表示。
- `history` が1件以上ある場合はクリック可能にし、ツールチップ「バージョン履歴(N件)」を表示。
### 2-4. UI — 履歴モーダル
- 「🕓」ボタンをクリックすると既存の編集モーダルと同系統のデザインのモーダルを開く。
- モーダル構成:
- ヘッダー: 「バージョン履歴 — {スニペットタイトル}」
- リスト: history 配列を新しい順に表示。各行に「保存日時(YYYY/MM/DD HH:mm)」「タイトル(変更があれば現在と異なる旨を薄字で表示)」「プレビューボタン」「この版に戻すボタン」
- フッター: 「閉じる」ボタン
- **プレビューボタン**: クリックするとモーダル内の下半分にその版の `code` を highlight.js でレンダリングして表示。再クリックで閉じる。
- **この版に戻すボタン**: 確認ダイアログ「この版に戻しますか?現在の内容は新たな履歴として保存されます。」→ OK で現在の内容を履歴に追加した上で選択版の内容をスニペットに上書き保存し、モーダルを閉じてカード表示を更新する。
### 2-5. ストレージ容量への配慮
- 1スニペットあたり履歴5件×最大コードサイズを考慮し、localStorage 使用量が 4.5 MB を超えた場合は保存前に警告トースト「ストレージ残量が少ないため履歴を保存できませんでした」を表示し、履歴追加のみスキップしてスニペット本体の保存は続行する。
## 3. 既存機能との整合(壊さない点)
- CRUD・コピー・フィルター・検索・お気に入り・ソート(よく使う順等)はすべて変更なし。
- `history` キーは既存スニペットに存在しなくても空配列として扱うため、旧データの読み込みは正常動作する。
- JSON import 時、`history` キーが存在しないスニペットは `history: []` を補完して取り込む。
- ライト/ダークモードはモーダルにも既存の CSS 変数(`--bg`, `--text` 等)を流用するため自動対応。
- カードの操作ボタン行にボタンが1つ増えるが、既存のフレックスレイアウトを維持し、SP では横スクロール許容またはアイコンのみ表示にして崩れを防ぐ。
スニペットを編集した際に以前の内容を誤って上書きしてしまうリスクを解消する。編集するたびに直前の状態を自動保存し、いつでも任意のバージョンに1クリックで戻せるようにする。アカウント不要・localStorageのみで完結するため既存アーキテクチャを維持できる。
## 2. 具体的な仕様
### 2-1. データ構造の拡張
既存のスニペットオブジェクトに `history` 配列を追加する。
```json
{
"id": "xxxx",
"title": "...",
"code": "...",
"language": "...",
"tags": [],
"description": "...",
"history": [
{
"savedAt": "2025-06-01T12:00:00.000Z",
"title": "旧タイトル",
"code": "旧コード",
"language": "javascript",
"tags": [],
"description": "旧説明"
}
]
}
```
- `history` は最大5件。6件目が発生したら最古のエントリを削除(FIFO)。
- 既存スニペットに `history` キーが存在しない場合は空配列として扱う(後方互換)。
- JSON export/import 時も `history` をそのまま含めて出力・読み込みする。
### 2-2. 履歴の自動保存タイミング
- 編集フォームの「保存」ボタン押下時、**保存処理の直前**に現在のスニペット内容(title/code/language/tags/description)を `history` 配列の先頭に push する。
- 新規作成時は履歴を記録しない(`history: []` で初期化)。
- コピー操作・お気に入りトグルなど、コード本体に変更のない操作では履歴を記録しない。
### 2-3. UI — 履歴ボタン
- 各スニペットカードの操作ボタン列(コピー・編集・削除等が並ぶ行)に「🕓」アイコンボタンを追加する。
- `history` が空の場合はボタンをグレーアウト(disabled)にし、ツールチップ「編集履歴なし」を表示。
- `history` が1件以上ある場合はクリック可能にし、ツールチップ「バージョン履歴(N件)」を表示。
### 2-4. UI — 履歴モーダル
- 「🕓」ボタンをクリックすると既存の編集モーダルと同系統のデザインのモーダルを開く。
- モーダル構成:
- ヘッダー: 「バージョン履歴 — {スニペットタイトル}」
- リスト: history 配列を新しい順に表示。各行に「保存日時(YYYY/MM/DD HH:mm)」「タイトル(変更があれば現在と異なる旨を薄字で表示)」「プレビューボタン」「この版に戻すボタン」
- フッター: 「閉じる」ボタン
- **プレビューボタン**: クリックするとモーダル内の下半分にその版の `code` を highlight.js でレンダリングして表示。再クリックで閉じる。
- **この版に戻すボタン**: 確認ダイアログ「この版に戻しますか?現在の内容は新たな履歴として保存されます。」→ OK で現在の内容を履歴に追加した上で選択版の内容をスニペットに上書き保存し、モーダルを閉じてカード表示を更新する。
### 2-5. ストレージ容量への配慮
- 1スニペットあたり履歴5件×最大コードサイズを考慮し、localStorage 使用量が 4.5 MB を超えた場合は保存前に警告トースト「ストレージ残量が少ないため履歴を保存できませんでした」を表示し、履歴追加のみスキップしてスニペット本体の保存は続行する。
## 3. 既存機能との整合(壊さない点)
- CRUD・コピー・フィルター・検索・お気に入り・ソート(よく使う順等)はすべて変更なし。
- `history` キーは既存スニペットに存在しなくても空配列として扱うため、旧データの読み込みは正常動作する。
- JSON import 時、`history` キーが存在しないスニペットは `history: []` を補完して取り込む。
- ライト/ダークモードはモーダルにも既存の CSS 変数(`--bg`, `--text` 等)を流用するため自動対応。
- カードの操作ボタン行にボタンが1つ増えるが、既存のフレックスレイアウトを維持し、SP では横スクロール許容またはアイコンのみ表示にして崩れを防ぐ。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (clipvault))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ClipVault スニペット管理」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=clipvault
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/clipvault/
ご利用ありがとうございます!
ご要望いただいた「ClipVault スニペット管理」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=clipvault
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/clipvault/
ご利用ありがとうございます!
Echo
Iris