# ボード要素

- Human documentation: [https://docs.univer.ai/ja-JP/guides/boards/model/board-elements](https://docs.univer.ai/ja-JP/guides/boards/model/board-elements)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/boards/model/board-elements.md](https://docs.univer.ai/ja-JP/guides/boards/model/board-elements.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [boards/model/board-elements.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/model/board-elements.ja-JP.mdx)

---

ボードページでは、描画可能なオブジェクトを `elements` に、その表示順を `elementOrder` に格納します。各要素には、一意で変わらない `id`、`type`、およびキャンバス上の位置とサイズを表す `transform` があります。

## 要素に共通するフィールド

| フィールド        | 型                          | 説明                                                                       |                   |
| ------------ | -------------------------- | ------------------------------------------------------------------------ | ----------------- |
| id           | `string`                   | ページ内で一意の要素 ID。                                                           |                   |
| type         | `BoardElementType`         | `text`、`shape`、`image`、`connector`、`container`、`table`、`group` などの要素の種類。 |                   |
| transform    | `IBoardElementTransform`   | 位置、サイズ、回転、拡大縮小、傾斜、反転の値。                                                  |                   |
| parentId?    | `string`                   | 親コンテナまたは親グループの ID。                                                       |                   |
| laneId?      | `string`                   | 要素がスイムレーン内にある場合のレーン ID。                                                  |                   |
| name?        | `string`                   | 人が読みやすい要素名。                                                              |                   |
| description? | `string`                   | アクセシビリティまたはアプリケーション用のメタデータ。                                              |                   |
| visible?     | `boolean`                  | 要素をレンダリングするかどうか。                                                         |                   |
| selectable?  | `boolean`                  | エディターで要素を選択できるかどうか。                                                      |                   |
| locked?      | `boolean`                  | 編集をロックするかどうか。                                                            |                   |
| custom?      | \`Record\<string, unknown> | null\`                                                                   | アプリケーション定義のメタデータ。 |

## 要素の種類

| 種類          | 追加データ                               | 主な用途                              |
| ----------- | ----------------------------------- | --------------------------------- |
| `text`      | `text`, `textStyle`, `textData`     | 付箋、ラベル、リッチテキストブロック。               |
| `shape`     | `shapeData`                         | 四角形、矢印、吹き出し、カスタム図形。               |
| `image`     | `source`, `imageSourceType`, `crop` | 埋め込み画像。                           |
| `connector` | `connectorData`                     | 自由点や図形に接続された線や矢印。                 |
| `container` | `containerData`                     | フレーム、エリア、スイムレーン、UML パッケージ、システム境界。 |
| `table`     | `tableId`                           | テーブルプラグインが提供するボード上のテーブル要素。        |
| `chart`     | `chartId`                           | グラフ要素。                            |
| `media`     | `mediaType`, `source`               | 音声や動画のプレースホルダー。                   |
| `group`     | `children`                          | グループ化された要素の集合。                    |

## コンテナ

コンテナへの所属動作は `containerData.behavior`、取り込みルールは `containerData.capturePolicy` で定義します。順序と親子関係の整合性を保つため、要素をコンテナに出し入れする際は Facade のコンテナメソッドを使用してください。

```ts
board.wrapElementsInContainer(['task-1', 'task-2'], {
  title: 'Sprint 1',
})
```

## スイムレーン

スイムレーンは `containerData.swimlane` を持つコンテナです。各レーンには、一意で変わらない ID、タイトル、順序値、サイズがあり、必要に応じて折りたたみ状態も設定できます。

```ts
board.setSwimlaneLanes('lane-board', {
  orientation: 'horizontal',
  lanes: [
    { id: 'todo', title: 'Todo', order: 0, size: 240 },
    { id: 'doing', title: 'Doing', order: 1, size: 240 },
  ],
})
```

## コネクター

コネクターは、端点と経路データを使用します。端点には、自由点、図形の境界、接続ポイント、ライフラインを指定できます。経路データはジオメトリに依存することが多いため、コネクターの編集には Facade の操作または UI 操作を使用することを推奨します。