Featuresデザインエディタースキーマ

スキーマ定義ガイド

このドキュメントでは、デザインエディターで使用するスキーマの定義方法を説明します。スキーマを正しく設定することで、エディターでのプロパティ編集やWebサイトでのコンポーネント表示を効率的に管理できます。

スキーマの基本構造

スキーマは以下のように定義します。

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.component にはコンポーネントの基本情報を設定します。
  • orizm.props にはコンポーネントが受け取るプロパティを定義します。

プロパティ型の詳細

以下に、orizm.props で使用可能なプロパティ型を説明します。

orizm.string

文字列型のプロパティを定義します。

orizm.string({
  displayName: "テキスト",
  default: "ボタン",
  inputType: "textarea",
});
  • inputType: "text" | "textarea" | "color" のいずれかを指定します。
    • "textarea": テキストエリアを表示します。
    • "color": カラーピッカーを表示します。
  • 型: CMSとWebサイトの両方で string 型を使用します。

orizm.picklist

選択肢から1つを選ぶプロパティを定義します。

orizm.picklist({
  displayName: "サイズ",
  options: {
    sm: { displayName: "小" },
    md: { displayName: "中" },
    lg: { displayName: "大" },
  },
  default: "md",
  inputType: "radio",
});
  • inputType: "select" | "radio" のいずれかを指定します。
    • "radio": ラジオボタンを表示します。
    • "select": ドロップダウンリストを表示します。
  • 型: CMSとWebサイトの両方で keyof typeof options 型。

orizm.richText

リッチテキスト型のプロパティを定義します。

orizm.richText({
  displayName: "説明",
  useInlineStyles: false,
  inputType: "multiline",
  default: "",
});
  • inputType: "singleline" | "multiline" を指定します。
  • useInlineStyles: インライン装飾の有効化を指定します。
  • 型:
    • CMS側: raw HTML を含む string 型。
    • Webサイト側: サニタイズされた React.ReactElement 型。

orizm.number

数値型のプロパティを定義します。

orizm.number({
  default: 1,
  displayName: "数値",
  inputType: "number",
  min: 1,
  max: 10,
});
  • inputType: "number" | "range" を指定します。
    • "range": スライダーを表示します。
  • min / max: 数値の範囲を指定します。
  • 型: CMSとWebサイトの両方で number 型。

orizm.boolean

真偽値型のプロパティを定義します。

orizm.boolean({
  displayName: "表示する",
  default: false,
});
  • 型: CMSとWebサイトの両方で boolean 型。

orizm.array

配列型のプロパティを定義します。

orizm.array({
  displayName: "箇条書き",
  default: ["項目1", "項目2"],
  element: orizm.string({
    displayName: "項目",
    default: "",
  }),
});
  • element: 配列要素の型を指定します。
  • 型: T[]（例: string[]）。

orizm.object

オブジェクト型のプロパティを定義します。

orizm.object({
  displayName: "画像",
  schema: {
    heading: orizm.string({
      displayName: "見出し",
      default: "",
    }),
    paragraph: orizm.string({
      displayName: "説明",
      default: "",
    }),
  },
});
  • schema: オブジェクトの構造を定義します。
  • 型: T（例: { heading: string; paragraph: string }）。

null 許容プロパティ

すべてのプロパティ型はデフォルトで null を許容しません。nullable を指定することで許容可能になります。

orizm.string({
  displayName: "テキスト",
  default: null,
  nullable: true,
});
  • 型: T | null。

スロット

スロット（slot）は、コンポーネントの中に他のコンポーネントを配置できる領域です。Reactの children プロパティと同様の役割を果たします。

スロットの定義

スロットは以下のように定義します。

import * as orizm from "@orizm-private/orizm-editor/schema";
 
const TwoColumns = orizm.component({
  displayName: "2カラム",
  category: "レイアウト",
  props: orizm.props({
    gap: orizm.number({
      default: 8,
      displayName: "間隔",
      min: 0,
    }),
  }),
  slots: orizm.slots({
    column1: orizm.slot({
      displayName: "カラム1",
      default: [
        {
          type: "Paragraph",
          props: { text: "Column 1" },
          slots: {},
        },
      ],
    }),
    column2: orizm.slot({
      displayName: "カラム2",
      default: [
        {
          type: "Paragraph",
          props: { text: "Column 2" },
          slots: {},
        },
      ],
    }),
  }),
});

orizm.slot

スロットを定義するための関数です。以下のプロパティを指定できます。

  • default: スロットのデフォルトコンテンツ。
  • 型: React.ReactNode

スロットの使用方法

スロットはコンポーネントの中で以下のように使用します。

import {
  ComponentMarker,
  type ComponentRenderers,
} from "@orizm-private/orizm-editor/renderer";
import type { componentSchema } from "../component-schema";
 
type TwoColumnsFC = ComponentRenderers<typeof componentSchema>["TwoColumns"];
 
export const TwoColumns: TwoColumnsFC = ({ gap, column1, column2 }) => {
  return (
    <ComponentMarker>
      <div className="grid grid-cols-2" style={{ gap }}>
        <div>{column1}</div>
        <div>{column2}</div>
      </div>
    </ComponentMarker>
  );
};
はじめるプロパティエディター