# UI 概要

> PDF Canvas、編集コントロール、ロケール、サムネイル Worker を設定します。

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

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

---

`@univerjs-pro/pdfs-ui` は PDF ユニットを Univer の標準ワークベンチにマウントし、Univer Office SDK のライセンスで提供されます。

## パッケージの責務

| パッケージ                       | 責務                                                         |
| --------------------------- | ---------------------------------------------------------- |
| `@univerjs-pro/pdfs`        | `UNIVER_PDF` ユニット、ドキュメントモデル、永続化される PDF コマンドを登録します。         |
| `@univerjs-pro/pdfs-ui`     | ブラウザーの Canvas、サムネイルレール、フッターをマウントし、既定でローカル編集コントロールを有効にします。  |
| `@univerjs-pro/pdfs-editor` | 共同編集側の依存関係を宣言します。PDF UI のマウントや `editor.enabled` の制御は行いません。 |

`UniverPdfsUIPlugin` は `UniverLicensePlugin` と `UniverPdfsPlugin` に依存します。ライセンスを含む PDF の基本設定を完了してから UI プラグインを登録してください。

## UI プラグインの登録

```ts
import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'
import PdfsUIJaJP from '@univerjs-pro/pdfs-ui/locale/ja-JP'

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

univer.registerPlugin(UniverPdfsUIPlugin)
```

`PdfsUIJaJP` を `new Univer(...)` に渡すロケールへマージします。このロケールには PDF のリボン、インスペクター、コンテキストメニュー、ページレールの文言が含まれます。

## ビューアーモードと編集モード

プラグインは常にページサムネイルレール、PDF Canvas、フッターをマウントします。編集は既定で有効で、さらにリボン、コンテキストメニュー、インスペクター、クリップボード、挿入コマンド、編集アクションとコントローラーを登録します。

表示専用にする場合は編集コントロールを無効にします。

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  editor: { enabled: false },
})
```

この設定が変更するのは、マウントされる UI と編集専用のコントローラーおよびサービスです。アクセス制御ではなく、保存済み PDF スナップショットも変更しません。

## サムネイル Worker

`thumbnailWorkerURL` には文字列、`URL`、既存の `Worker` を指定できます。対象モジュールで、パッケージが公開する Worker ランタイムを起動します。

```ts title="pdf-thumbnail-worker.ts"
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'

startPdfPageThumbnailWorker()
```

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  thumbnailWorkerURL: new URL('./pdf-thumbnail-worker.js', import.meta.url),
})
```

この Worker は専用 Worker スコープで実行する必要があります。Worker が未設定、必要なブラウザー API がない、またはページがメインスレッド専用リソースを必要とする場合、サムネイルはメインスレッドで描画されます。

## 公開 API の境界

UI は内部で PDF コマンドとサービスを呼び出します。リボンにボタンがあっても、同名の公開メソッドがあるとは限りません。対応するプログラム編集は [PDF Facade ガイド](https://docs.univer.ai/ja-JP/guides/pdfs/getting-started/facade.md)、変換は[インポートとエクスポート](https://docs.univer.ai/ja-JP/guides/pdfs/features/import-export.md)、ブラウザー印刷は[印刷](https://docs.univer.ai/ja-JP/guides/pdfs/features/print.md)を参照してください。

## メニューの順序とグリッドレイアウト

[`order`、`gridLayout`、`updateMenuConfig()`](https://docs.univer.ai/ja-JP/guides/pdfs/features/core.md#menu-order-and-grid-layout) でタブ・グループ・項目の順序、グリッド配置、実行時の更新を設定できます。ガイドにはカスタムメニューの Facade オプションへのリンクもあります。