# コア機能

- Human documentation: [https://docs.univer.ai/ja-JP/guides/boards/features/core](https://docs.univer.ai/ja-JP/guides/boards/features/core)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/boards/features/core.md](https://docs.univer.ai/ja-JP/guides/boards/features/core.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

- Source: [boards/features/core/index.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/features/core/index.ja-JP.mdx)

---

#### Package metadata

```json
{
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/boards",
      "facade": "@univerjs-pro/boards/facade"
    },
    {
      "client": "@univerjs-pro/boards-ui",
      "locale": "@univerjs-pro/boards-ui/locale/ja-JP",
      "style": "@univerjs-pro/boards-ui/lib/index.css",
      "facade": "@univerjs-pro/boards-ui/facade"
    }
  ],
  "license": true,
  "server": false
}
```

Univer Boards のコアは、ページと要素のモデルにインタラクティブなブラウザーキャンバスを組み合わせたものです。モデルと UI は 2 つの Web SDK パッケージで提供され、独立した `UNIVER_BOARD` ユニットとして動作します。

## 機能

* **ページと要素の順序**：ページを `pages` に、描画可能なオブジェクトを各ページの `elements` に保存し、両方の階層で明示的な順序配列を使用します。
* **キャンバス要素**：テキスト、図形、画像、コネクター、グループ、コンテナ、スイムレーンを扱います。
* **コマンド駆動の編集**：要素の変更、順序、親子関係を 1 つのコマンド層に集約し、権限と、任意の履歴・コラボレーション統合用フックを提供します。
* **ブラウザーキャンバス**：要素を描画し、選択、変形、クリップボード、テキスト編集、ビューポート操作、パネルを提供します。
* **拡張可能なアダプター**：表、マインドマップ、グラフ、リソース、印刷、交換などの任意の Boards 機能を追加できます。
* **永続化**：ページ、リソース、テーマ、アクティブページの状態を含む `IBoardData` スナップショットを作成、復元、保存します。

## プラグインモード

### インストール

[インストールと基本的な使用方法](https://docs.univer.ai/ja-JP/guides/boards/getting-started/installation.md)で説明する Univer ランタイムに、2 つの Boards パッケージを追加します。

#### npm

```bash
npm install @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### pnpm

```bash
pnpm add @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### yarn

```bash
yarn add @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### bun

```bash
bun add @univerjs-pro/boards @univerjs-pro/boards-ui
```

### 製品プラグインの登録

インストールガイドに従って共有の描画、ドキュメント、Drawing、インク、図形編集の依存関係と ライセンスを先に登録し、その後に Boards プラグインを登録します。

```ts
import { UniverBoardsPlugin } from '@univerjs-pro/boards'
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'

import '@univerjs-pro/boards-ui/lib/index.css'

univer.registerPlugin(UniverBoardsPlugin)
univer.registerPlugin(UniverBoardsUIPlugin)
```

`UniverBoardsPlugin` は Board モデル、コマンド、要素サービス、アダプター、権限を登録します。`UniverBoardsUIPlugin` は描画されたキャンバスとブラウザー操作を追加します。

## プリセットモード

現在、Univer Boards 専用のプリセットはありません。モデルとブラウザー UI の両方でプラグインモードを使用してください。

## メニュー設定とキャンバスツールバー

Boards のコンテキストメニューは共通の [`MenuConfig`](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/ui.md#menuconfig) を使用します。`menu` は既存の `UniverUIPlugin` 登録に追加し、`UniverBoardsUIPlugin` には渡しません。次の例では「複製」を所属グループの先頭に移動します。

### 初期設定

```ts
import type { MenuConfig } from '@univerjs/ui'
import { UniverUIPlugin } from '@univerjs/ui'

const menu: MenuConfig = {
  'board.menu.duplicate-selection': { order: -1 },
}

univer.registerPlugin(UniverUIPlugin, { container: 'app', menu })
```

`order` は同じ階層のコンテキストメニュー項目を昇順に並べ、別のグループには移動しません。製品のメニュー定義にある項目 ID を使用してください。コマンド ID と同じとは限りません。

### 実行時の更新

`@univerjs/ui/facade` をインポートしてから、`FUniver.newAPI(univer)` で `univerAPI` を作成します。[`updateMenuConfig()`](https://docs.univer.ai/ja-JP/reference/facade/univer.md#updatemenuconfig) は変更をマージし、未指定のフィールドを保持してメニューを更新します。後から登録されるメニューにも設定が適用されます。

```ts
import '@univerjs/ui/facade'

univerAPI.updateMenuConfig({
  'board.menu.duplicate-selection': { order: 5 },
})
```

### キャンバスツールバー

Boards は独立したキャンバスツールバーを使用し、標準の製品 Ribbon は登録しません。`gridLayout` は共通のグリッド Ribbon のみを制御し、キャンバスツールバーやコンテキストメニューの配置は変更しません。キャンバスのツールは `UniverBoardsUIPlugin.toolbar.tools` で設定します。既存の登録でペンツールを無効にする例を示します。

```ts
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'

univer.registerPlugin(UniverBoardsUIPlugin, {
  toolbar: { tools: { pen: false } },
})
```

`toolbar.tools` はツールの利用可否を制御し、順序やグリッド位置は設定しません。キャンバスの操作と共通メニューの違いは [Boards UI リファレンス](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs-pro/boards-ui.md) を参照してください。
