Skip to main content

​
2つの指定方法

講義ページでは、説明用の図を2種類の方法で指定できます。

​
VisualData（データ駆動）

構造化データで図を指定。スタイルは自動適用されます。 
visualData: {
  type: 'flow',  // flow | split | compare | single
  items: [
    { icon: 'Monitor', label: 'PC', color: 'green' },
    { icon: 'Globe', label: 'インターネット', color: 'green' },
  ],
}
利用可能なアイコン: Monitor, Globe, Cloud, HardDrive, Database, ShieldCheck, ArrowsSplit, Users, Lightning, CaretDoubleUp, ShareNetwork, Heartbeat, Activity VisualData の type:
type説明
flow左→右の2アイコン + アニメーション
split1→複数に分岐する図
compare横並びで比較表示
single単一アイコン
color: 'green' | 'blue' | 'orange' | 'red' | 'indigo'

​
レジストリキー（ReactNode）

自由に JSX を書いた図を、キーで参照する方法。SSR でも安全です。 1. 登録（illustration-registrations.tsx）: 
import { registerIllustration } from './illustration-registry';
import { MonitorIcon, GlobeIcon } from '@phosphor-icons/react';

registerIllustration('my-custom-diagram', (
  <div className="flex gap-4 p-8 bg-emerald-50 rounded-2xl">
    <MonitorIcon size={48} weight="duotone" />
    <span>→</span>
    <GlobeIcon size={48} weight="duotone" />
  </div>
));
2. 使用（course-data）: 
visualData: 'my-custom-diagram',

​
デフォルト図の優先順位

講義ページで visualData が未指定の場合、次の順で使われます。
  1. page.visualData
  2. lesson.defaultIllustration
  3. course.defaultIllustration
  4. DEFAULT_PC_INTERNET_ILLUSTRATION（プリセット）

​
関連ファイル

src/data/course-data
illustration-presets.ts
illustration-registry.tsx
illustration-registrations.tsx
  • illustration-presets.ts: プリセット図（flow / split 等）の定義
  • illustration-registry.tsx: registerIllustration(key, node) のレジストリ
  • illustration-registrations.tsx: カスタム図の登録（キーと ReactNode の対応）