デザインエディターとは
デザインエディターは、Webページを直感的に編集できるツールです。以下の操作が可能です。
- コンポーネントをドラッグ＆ドロップで配置
- コンポーネントのプロパティを直接編集
編集画面はWebページのプレビューとして機能するため、別途プレビュー画面を開く必要がありません。
デザインエディターは、@orizm-private/orizm-editor パッケージとしてプライベートレジストリで配布されています。このライブラリはスタータープロジェクトに組み込まれていますが、必要に応じて既存プロジェクトにも導入できます。
デザインエディターの特徴
デザインエディターには、以下の特徴があります。
- Webページを直感的に編集可能
- 編集画面のサイズを切り替え可能
- コンポーネントをカテゴリーごとにグループ化
- 開発者が独自のコンポーネントを作成可能
- コンポーネントのプロパティを開発者が制御可能
- コンポーネントの入れ子構造に対応
- コンポーネントのサムネイルを自動生成
デザインエディターは、CMSとWebサイトが連携して動作します。CMSはエディターを表示し、Webサイトはエディターの状態を受け取ってページを再描画します。そのため、CMSとWebサイトの両方でデザインエディターを利用する実装が必要です。
プレビューの仕組み
デザインエディターは、CMSとWebサイトが連携することでリアルタイムプレビューを提供します。具体的には、デザインエディターがWebサイトをiframeで表示する仕組みです。
Webサイトがiframe表示をブロックしている場合、デザインエディターは正しく動作しません。CMSからiframe経由でWebサイトを表示できるように設定してください。
また、デザインエディターを安全に動作させるためには、CMSとWebサイトが互いのURLを認識している必要があります。この情報はReactコンポーネントのpropsとして指定します。