# UI 概要

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

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

---

`@univerjs-pro/boards-ui` は、ライセンスが必要な Univer Boards のブラウザーキャンバスを提供します。シーン、選択とビューポートの操作、ツールバー、コンテキストメニュー、テキスト、図形、コネクター、対応する Board 要素の編集 UI を描画します。

## Board UI を登録する

Board プラグインより先に `UniverLicensePlugin` を設定します。Docs、Drawing、Ink、Shape Editor は技術的な描画および編集依存関係であり、それらの製品について事前に知る必要はありません。

```ts
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverBoardsPlugin)
univer.registerPlugin(UniverBoardsUIPlugin, {
  workbench: {
    content: true,
    header: false,
    headerMenu: false,
    toolbar: false,
    footer: false,
  },
  interaction: {
    minZoomRatio: 0.1,
    maxZoomRatio: 4,
    wheelZoomWithModifier: true,
    trackpadPanEnabled: true,
  },
})
```

依存関係、スタイル、ロケールの完全な登録順序は[インストールと基本的な使い方](https://docs.univer.ai/ja-JP/guides/boards/getting-started/installation.md)を参照してください。

## キャンバス設定

`IUniverBoardsUIConfig` はグリッド、挿入時の既定値、図形と付箋の色、ツール、ビューポートバー、レンダーアダプター、クイック追加、精密選択、寸法表示、共同編集カーソルも制御します。

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

コンテキストメニューの上書きには [`menu` と `updateMenuConfig()`](https://docs.univer.ai/ja-JP/guides/boards/features/core.md#menu-order-and-grid-layout) を使用します。Boards 独自のキャンバスツールバーは `toolbar.tools` で設定し、Ribbon の `gridLayout` では制御しません。