# コア機能

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

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

---

#### Package metadata

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

Univer Slides のコア機能は、プレゼンテーションモデルとブラウザー編集 UI で構成されます。モデルはプレゼンテーションを `ISlideData` スナップショットとして保存し、UI は Univer のコマンドを通じてそのモデルを描画、編集します。

## 機能

* **プレゼンテーションモデル**：プレゼンテーション ID、ページサイズ、スライド順、スライド、マスター、レイアウト、テーマ、トランジション、リソースを管理します。
* **描画と編集**：スライドキャンバス、サムネイル、選択、クリップボード、テキストと図形の編集、配置ガイド、スライドショーを提供します。
* **コマンドパイプライン**：ページと要素の変更をコマンドとミューテーションで適用し、モデル、描画、元に戻す／やり直しを同期します。
* **Facade API**：アプリケーション向けオブジェクトからプレゼンテーションの作成、検索、保存と、スライドや要素の操作を行えます。
* **プラグイン構成**：表、グラフ、印刷、インポート／エクスポートなどの任意機能をコア構成から分離します。

## プラグインモード

### インストール

#### npm

```bash
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### pnpm

```bash
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### yarn

```bash
yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### bun

```bash
bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

### 使用方法

```ts
import { UniverLicensePlugin } from '@univerjs-pro/license'
import { UniverSlidesPlugin } from '@univerjs-pro/slides'
import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'
import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US'
import SlidesEnUS from '@univerjs-pro/slides/locale/en-US'
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'
import { UniverDrawingPlugin } from '@univerjs/drawing'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'
import '@univerjs-pro/slides/facade'
import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs-pro/slides-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS, SlidesEnUS, SlidesUIEnUS),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverUIPlugin, { container: 'app' })
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)
univer.registerPlugin(UniverDrawingPlugin)
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverSlidesPlugin)
univer.registerPlugin(UniverSlidesUIPlugin)

const univerAPI = FUniver.newAPI(univer)
const presentation = univerAPI.createPresentation({ name: 'Quarterly review' })
```

編集コントロールなしでブラウザーにプレゼンテーションを描画する場合は、`UniverSlidesUIPlugin` に `{ editor: { enabled: false } }` を渡します。Node.js では UI プラグインを省き、`UniverSlidesPlugin` だけを登録します。

## プリセットモード

Univer Slides は現在プリセットパッケージを提供していません。モデルのみの実行環境でもブラウザーエディターでも、プラグインモードを使用してください。

## リボンの構成

開始にはテーマ、画面切り替え、背景、発表者ノートがあります。挿入にはコンテンツの挿入とオブジェクト一覧、表示にはページサイズ、ズーム、全画面があります。図形の選択時には図形書式タブが表示され、プロパティパネルと独立したフローティングツールバーの切替を利用できます。

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

既存の `UniverUIPlugin` 登録時に `menu` と `ribbonType` を設定します。これらは共通 UI のオプションであり、`UniverSlidesUIPlugin` には渡しません。次の例では Slides の実際のメニュー項目 ID を使用します。

### 初期設定

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

const menu: MenuConfig = {
  'ribbon.view': { order: -1 },
  'ribbon.start.layout': { order: -1 },
  'slide.menu.insert.text': {
    order: 1,
    gridLayout: { row: 1, column: 2, rowSpan: 2, showLabel: true, width: 96 },
  },
  'slide.menu.insert.shape': {
    order: 0,
    gridLayout: { row: 1, column: 1, rowSpan: 2, showLabel: true },
  },
}

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

`order` は同じ階層のタブ、グループ、メニュー項目を昇順に並べます。項目を別のグループに移すことはありません。メニュー項目 ID は `data-u-command` 属性で確認できます。コマンド 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({
  'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } },
})
```

`gridLayout` はグリッド Ribbon のみに適用されます。各グループは 2 行で、`row` と `column` は 1 から始まります。明示的な座標が位置を決めるため、使用中のセルを入れ替える際は `order` だけでなく両方の項目を更新してください。未指定の任意フィールドは既存の設定または Schema を引き継ぎます。行・列の結合、ラベル、幅、アイコンサイズは [`IRibbonGridLayout`](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/ui.md#iribbongridlayout) を参照してください。

`UniverSlidesUIPlugin` の編集機能を有効にしてください。`editor.enabled: false` を指定すると製品の Ribbon は登録されません。メニューの上書き設定で未登録のボタンが作成されることはありません。

カスタムボタンとサブメニューの入口も [`createMenu()`、`createSubmenu()`](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/ui.md#ifacademenuitem) で `order` と `gridLayout` を指定し、`appendTo()` で登録できます。ポップアップ内には Ribbon のグリッドレイアウトは適用されません。