Featuresデザインエディターはじめる

はじめに

このドキュメントでは、Orizmデザインエディターを使用してコンポーネントを定義し、エディターを表示する方法、さらにWebサイト側でのコンポーネント実装やプレビュー機能の設定方法を説明します。以下の手順に従うことで、デザインエディターを活用した効率的な開発が可能になります。

コンポーネントの定義

デザインエディターで使用するコンポーネントの名前やプロパティを定義します。この定義に基づき、エディターの編集UIが生成され、Webサイト側でコンポーネントの状態が認識されます。

以下は、Buttonコンポーネントを定義する例です。このコンポーネントには、以下の4つのプロパティがあります。

  • text: ボタンのテキスト
  • href: リンク先URL
  • variant: デザインの種類
  • size: サイズ
import * as orizm from "@orizm-private/orizm-editor/schema";
 
export const componentSchema = orizm.defineComponentSchema({
  Button: orizm.component({
    displayName: "ボタン",
    category: "アイテム",
    props: orizm.props({
      text: orizm.string({
        displayName: "テキスト",
        default: "ボタン",
      }),
      href: orizm.string({
        displayName: "リンク先URL",
        default: "https://www.google.com",
      }),
      variant: orizm.picklist({
        displayName: "デザイン",
        options: {
          default: { displayName: "デフォルト" },
          secondary: { displayName: "セカンダリ" },
          black: { displayName: "黒" },
          white: { displayName: "白" },
        },
        default: "default",
      }),
      size: orizm.picklist({
        displayName: "サイズ",
        options: {
          sm: { displayName: "小" },
          md: { displayName: "中" },
          lg: { displayName: "大" },
        },
        default: "md",
      }),
    }),
  }),
});

複数のコンポーネントを定義する場合は、orizm.defineComponentSchema関数に渡すorizm.componentを増やしてください。必要に応じてコンポーネントを追加します。

エディターの表示

デザインエディターをCMSで表示するには、OrizmEditorComposerとOrizmEditorを使用します。

以下は、エディターを表示するReactコンポーネントの例です。

import "@orizm-private/orizm-editor/editor.css";
import { Block } from "@orizm-private/orizm-editor/common";
import {
  OrizmEditor,
  OrizmEditorComposer,
} from "@orizm-private/orizm-editor/editor";
import { componentSchema } from "@repo/design-editor/component-schema";
import { useState } from "react";
import { ImageUpload } from "../image-upload";
 
export const StaticPageEditor: React.FC = () => {
  const [blocks, setBlocks] = useState<Block[]>([]);
 
  return (
    <OrizmEditorComposer
      componentSchema={componentSchema}
      initialBlocks={blocks}
      onChange={setBlocks}
      pageSlug="/my-page"
      pageTitle="My Page"
      previewSiteURL="http://localhost:3001"
      customPropEditors={{
        Image: {
          image: ImageUpload,
        },
      }}
    >
      <OrizmEditor />
    </OrizmEditorComposer>
  );
};

主なプロパティ

  • componentSchema: 定義したコンポーネントスキーマを指定します。
  • initialBlocks: 初期状態のブロックを指定します。
  • onChange: ブロックが変更された際に呼び出されるコールバック関数です。
  • previewSiteURL: プレビュー用のWebサイトURLを指定します。
  • customPropEditors: 独自の編集UIをReactコンポーネントとして指定します。

これにより、エディターで編集したデータをblocksステートに反映させ、データベースなどに保存できます。

Webサイト側でのコンポーネント実装

定義したスキーマに基づき、Webサイト側でコンポーネントを実装します。以下は、Buttonコンポーネントの実装例です。

import {
  ComponentMarker,
  type ComponentRenderers,
} from "@orizm-private/orizm-editor/renderer";
import { buttonVariants } from "@repo/ui";
import Link from "next/link";
import { cn } from "../../../ui/src/lib/utils";
import type { componentSchema } from "../component-schema";
 
type ButtonFC = ComponentRenderers<typeof componentSchema>["Button"];
 
export const Button: ButtonFC = ({
  text,
  href = "#",
  variant,
  size,
  width,
  marginTop,
  marginBottom,
  isThumbnail,
}) => {
  return (
    <ComponentMarker>
      <Link
        href={href}
        data-orizm-text-property="text"
        className={cn(
          buttonVariants({
            variant,
            size,
            marginTop,
            marginBottom,
          }),
          width && "w-full",
        )}
      >
        {isThumbnail ? "プレビュー中" : text}
      </Link>
    </ComponentMarker>
  );
};

実装のポイント

  • ComponentMarkerをルートに設置することで、エディターがコンポーネントを認識します。

  • スキーマで定義したプロパティがReactコンポーネントのpropsとして渡されます。

  • isThumbnailはサムネイル撮影中かどうかを示す予約済みのpropsです。

  • data-orizm-text-property 属性にプロパティ名を設定すると、プレビュー上でコンポーネントをダブルクリックすることでテキストプロパティを編集できます。

    プレビュー上でテキスト編集のUIが表示されている様子

本番用ページの表示

本番用ページでは、PageRendererを使用してコンテンツデータを表示します。

import { Block } from "@orizm-private/orizm-editor/common";
import { PageRenderer } from "@orizm-private/orizm-editor/renderer";
import { componentSchema } from "../component-schema";
import { components } from "../components";
 
const Page: React.FC = async () => {
  const blocks: Block[] = await fetchBlocksFromCMS();
 
  return (
    <PageRenderer
      blocks={blocks}
      components={components}
      componentSchema={componentSchema}
    />
  );
};
 
export default Page;

必要なプロパティ

  • blocks: CMSから取得したコンテンツデータ。
  • components: 実装したコンポーネントのオブジェクト。
  • componentSchema: 定義したスキーマ。

プレビュー用ページの表示

エディターからiframe経由で表示するプレビュー用ページを実装します。

"use client";
 
import { PreviewRenderer } from "@orizm-private/orizm-editor/preview";
import { componentSchema } from "./component-schema";
import { components } from "./components";
import { PageRenderer } from "@orizm-private/orizm-editor/renderer";
 
const Page: React.FC = () => {
  return (
    <PreviewRenderer
      initialBlocks={[]}
      componentSchema={componentSchema}
      editorOrigin={
        process.env.NODE_ENV === "development"
          ? "http://localhost:3000"
          : "https://design-editor-demo-cms.vercel.app"
      }
      renderPage={(blocks, isThumbnail) => (
        <PageRenderer
          blocks={blocks}
          components={components}
          componentSchema={componentSchema}
          isThumbnail={isThumbnail}
        />
      )}
    />
  );
};
 
export default Page;

実装のポイント

  • PreviewRendererはエディターから受信したステートをPageRendererに渡します。
  • editorOriginにはエディターが動作するURLを指定します。
  • 初期状態のステートがある場合はinitialBlocksに渡します。

起動方法

  1. CMS側とWebサイト側の開発サーバーを起動します。
  2. CMS側のエディターを開き、Webページを編集します。
インストールスキーマ