プロジェクトデータ・履歴

OpenGraphs のプロジェクトは JSON で表現され、IndexedDB に自動保存されます。バージョン履歴で任意の時点のスナップショットに戻せます。

ファイル形式

プロジェクトは .opengraphs 拡張子の JSON ファイルとして保存されます。トップレベル構造:

{
  "name": "My Project",
  "compositions": [
    {
      "id": "main",
      "name": "Main",
      "width": 1280,
      "height": 720,
      "duration": 3,
      "fps": 30,
      "background": [10, 20, 40],
      "layers": [ /* ... */ ]
    }
  ]
}

主要スキーマ

レイヤー (Layer)

{
  "id": "layer-1234",
  "name": "Background",
  "type": "shape" | "video" | "text" | "group" | "adjustment" | ...,
  "width": 1280,
  "height": 720,
  "color": [255, 255, 255],
  "blendMode": "normal" | "multiply" | "screen" | ...,
  "opacity": 100,
  "parentId": "layer-other",
  "transform": { "anchor_point": [0.5, 0.5], "position": [0, 0], "scale": [100, 100], "rotation": 0, "opacity": 100 },
  "objects": [ /* Object 配列 */ ],
  "effects": [ /* EffectData 配列 */ ],
  "masks": [ /* MaskData 配列 */ ],
  "time_remap": [ { "time": 0, "value": 0 }, { "time": 3, "value": 3 } ]
}

オブジェクト (Object)

{
  "id": "obj-1",
  "type": "2d" | "text" | "image" | "video" | "audio" | "shader" | "group" | "adjustment" | "cloner" | "3d_primitive" | "3d_light",
  "name": "My Shape",
  "width": 200,
  "height": 200,
  "fill_color": [100, 150, 255],
  "stroke_color": [255, 255, 255],
  "cloner": { "count": 10, "mode": "linear" | "circular" | "grid", "offset": { "x": 20, "y": 0, "rotation": 18, "scale": 0 }, "radius": 120, "indexExpression": "", "source": { /* ソース Object */ } }
}

エフェクト (EffectData)

{
  "id": "fx-1",
  "name": "Bloom",
  "enabled": true,
  "params": {
    "threshold": 0.7,
    "intensity": 1.2,
    "radius": 4
  }
}

マスク (MaskData) v1.5+

{
  "enabled": true,
  "shape": "rectangle" | "ellipse" | "polygon",
  "position": [0, 0],
  "scale": [100, 100],
  "rotation": 0,
  "feather": 0,
  "inverted": false
}

キーフレーム (KeyframeData)

{ "time": 0.5, "value": 100, "easing": "linear" | "ease-in" | "ease-out" | "hold" | "step" }

自動保存

30 秒ごとにプロジェクト全体が IndexedDB (データベース名 opengraphs-autosave) に自動保存されます。ブラウザを閉じても、次回開いたときに復元できます。

復元方法

復元は アプリ UI 内のバナー から行います。起動時に前回セッションの未保存データが見つかると、画面上部にバナーが表示され、「復元」または「破棄」を選べます。ブラウザの confirm() ダイアログは使用しません。

自動復元 (silent)

Version History モーダル内の Auto-restore on startup チェックボックスを ON にすると、確認バナーを出さずに次回起動時に自動で復元します。

バージョン履歴

トップツールバーの Version History から、現在の状態をスナップショットとして保存し、過去のバージョンに戻せます。最大 30 件保持 (古いものから自動削除)。

使い方

Version History をクリック → モーダルが開く。
上部の入力欄に説明 (例: "after intro animation") を入れて Snapshot ボタンで保存。
リストから任意のバージョンの Restore をクリック。確認ダイアログは表示されず、インラインで「Current unsaved changes will be lost.」の警告と [Yes, restore] / [Cancel] ボタンが現れる。

スマートリリンク

Smart Relink ボタンは、外部画像 / 動画ファイルへの参照を SHA-256 ハッシュで管理する機能。プロジェクトファイル間で同じファイルを再利用できます。

プロジェクト保存時に参照ファイルの SHA-256 を記録。
別の環境で開いたとき、ファイルが消えていてもライブラリから再リンク可能。

Undo / Redo

Ctrl+Z / Ctrl+Shift+Z で取り消し / やり直し。状態は localStorage に永続化。