# コア機能

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

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

---

#### Package metadata

```json
{
  "preset": [
    {
      "client": "@univerjs/preset-docs-core",
      "locale": "@univerjs/preset-docs-core/locales/ja-JP",
      "style": "@univerjs/preset-docs-core/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/core"
    },
    {
      "client": "@univerjs/engine-formula"
    },
    {
      "client": "@univerjs/engine-render"
    },
    {
      "client": "@univerjs/design",
      "locale": "@univerjs/design/locale/ja-JP",
      "style": "@univerjs/design/lib/index.css"
    },
    {
      "client": "@univerjs/ui",
      "locale": "@univerjs/ui/locale/ja-JP",
      "style": "@univerjs/ui/lib/index.css"
    },
    {
      "client": "@univerjs/docs"
    },
    {
      "client": "@univerjs/docs-ui",
      "locale": "@univerjs/docs-ui/locale/ja-JP",
      "style": "@univerjs/docs-ui/lib/index.css",
      "facade": "@univerjs/docs-ui/facade"
    }
  ],
  "server": false
}
```

Univer Docs は、ドキュメントエディタ、数式エンジン、レンダリングエンジン、デザインシステム、UI コンポーネントライブラリを備えたコア機能を提供します。これらが組み合わさり、さまざまな文書形式や複雑な操作を支える強力な文書処理基盤を構成します。

## 機能

Univer Docs のコア機能には以下が含まれます。

* **ドキュメント描画**：カーソルと選択範囲を含む Univer Docs の描画をサポート。
* **ドキュメント組版**：段落設定、前後の余白、段落揃え、インデント、ぶら下げインデントなどの全体組版をサポート。句読点の詰め、ぶら下げ句読点、文字間隔、欧文の単語分割などの段落内組版も含まれます。
* **数式計算**：Univer 数式の追加と計算をサポート（開発中）。
* **表機能**：基本的な表の挿入と編集、行の追加/削除、セル編集をサポート。
* **ドキュメントスタイル**：Univer Docs は Microsoft Word に近い *従来型スタイル*（ページ区切り、ヘッダー/フッターなど）と、Notion に近い *モダンスタイル* の両方をサポートします。モダンスタイルではページ分割不要で、コンテンツが無限に伸び、公式/サードパーティのブロック要素（テキスト、画像、表など）の混在組版に対応します（予定）。
* **ヘッダーとフッター**：ヘッダー/フッターの挿入・編集、先頭ページ/奇数偶数ページの区別をサポート（従来型のみ）。
* **リスト機能**：番号付き/箇条書き/タスクリストの挿入・編集、インデント/逆インデントに対応。
* **絵文字と記号**：Docs リボンから絵文字や記号を挿入できます。
* **プラグインシステム**：数式、画像、チャートなどのカスタムプラグインを追加できる拡張機構。Univer の中核アーキテクチャの 1 つです。

## プラグインモード

### インストール

#### npm

```bash
npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### pnpm

```bash
pnpm add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### yarn

```bash
yarn add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### bun

```bash
bun add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignJaJP from '@univerjs/design/locale/ja-JP'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIJaJP from '@univerjs/docs-ui/lib/locale/ja-JP'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIJaJP from '@univerjs/ui/locale/ja-JP'
import '@univerjs/docs/facade'
import '@univerjs/docs-ui/facade'
import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(DesignJaJP, UIJaJP, DocsUIJaJP),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)

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

univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)

const univerAPI = FUniver.newAPI(univer)

univerAPI.createDocument({})
```

### プラグインと設定

#### @univerjs/core

`Univer` の作成、テーマ、言語、ログなどの基本設定を提供します。設定の完全な定義は [`IUniverConfig`](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/core.md#iuniverconfig) を参照してください。

```typescript
import type { IUniverConfig } from '@univerjs/core'
import { LocaleType, Univer } from '@univerjs/core'

const config: IUniverConfig = {
  locale: LocaleType.JA_JP,
  darkMode: false,
}
const univer = new Univer(config)
```

#### @univerjs/engine-render

`UniverRenderEnginePlugin` は描画、スクロールバー、カーソル、選択範囲を扱います。[API リファレンス](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/engine-render.md)を参照してください。

#### @univerjs/engine-formula

`UniverFormulaEnginePlugin` は数式の計算と処理を提供します。[API リファレンス](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/engine-formula.md)を参照してください。

#### @univerjs/design

基本コンポーネントとスタイルを提供するデザインシステムです。[UI の概要](https://docs.univer.ai/ja-JP/guides/docs/ui/overview.md)を参照してください。

#### @univerjs/ui

`UniverUIPlugin` はコンテナ、ツールバー、コンテキストメニューなどの共通 UI を設定します。

```typescript
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  header: true,
  toolbar: true,
  ribbonType: 'grid',
  contextMenu: true,
})
```

`menu` ではコマンド ID をキーとして、メニューの表示や有効状態を変更できます。既存のプラグイン登録に設定を追加し、同じプラグインを再登録しないでください。

```typescript
univer.registerPlugin(UniverUIPlugin, {
  menu: {
    'doc.command.set-inline-format-bold': { hidden: true },
    'doc.command.set-inline-format-italic': { hidden: true, disabled: true },
  },
})
```

完全な設定は [UI プラグインのリファレンス](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/ui.md)を参照してください。

#### @univerjs/docs

`UniverDocsPlugin` は文書モデルとコマンドを提供します。[API リファレンス](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/docs.md)を参照してください。

#### @univerjs/docs-ui

`UniverDocsUIPlugin` は文書エディタの UI と操作を提供します。[API リファレンス](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/docs-ui.md)を参照してください。

## プリセットモード

### インストール

#### npm

```bash
npm install @univerjs/presets @univerjs/preset-docs-core
```

#### pnpm

```bash
pnpm add @univerjs/presets @univerjs/preset-docs-core
```

#### yarn

```bash
yarn add @univerjs/presets @univerjs/preset-docs-core
```

#### bun

```bash
bun add @univerjs/presets @univerjs/preset-docs-core
```

### 使い方

```typescript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreJaJP from '@univerjs/preset-docs-core/locales/ja-JP'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
import '@univerjs/preset-docs-core/lib/index.css'

const { univer, univerAPI } = createUniver({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(UniverPresetDocsCoreJaJP),
  },
  presets: [UniverDocsCorePreset()],
})

univerAPI.createDocument({})
```

### プリセットと設定

#### @univerjs/presets

このプリセットは `createUniver` を提供し、**@univerjs/core** と **@univerjs/design** のすべてのメソッド/オブジェクトを公開します。

`createUniver` はテーマ、言語、プリセットなどを含む設定オブジェクトを受け取り、`Univer` インスタンス `univer` と Facade API 用の `FUniver` インスタンス `univerAPI` を返します。

```typescript
interface ICreateUniverParameter {
  // Univer インスタンスのテーマ。デフォルトは `defaultTheme`
  theme: IStyleSheet
  // ダークモードを使用するか。デフォルトは false
  darkMode?: boolean
  // Univer インスタンスのロケール
  locale: LocaleType
  region?: LocaleType
  // 使用するロケールオブジェクト（キーはロケール種別）
  locales: ILocales
  // ログレベル
  logLevel?: LogLevel
  // 使用するプリセット一覧
  presets: IPresets[]
  // 使用するプラグイン一覧
  plugins: IPlugins[]
}
```

参考：[`createUniver`](https://docs.univer.ai/ja-JP/reference/methods/create-univer.md)

#### @univerjs/preset-docs-core

ドキュメントエディタ、数式エンジン、レンダリングエンジンなど、Univer Docs の基盤機能を含むコアプリセットです。

```typescript
interface IUniverDocsCorePresetConfig {
  // コンテナ要素。文字列または DOM 要素
  container?: string | HTMLElement
  // ヘッダーを表示するか
  header?: boolean
  // ヘッダーツールバーを表示するか
  toolbar?: boolean
  // ヘッダーツールバーの種別。'classic': デフォルトのクラシック; 'grid': 2行グリッド; 'collapsed': コンパクト; 'simple': 非グループ
  ribbonType?: RibbonType
  // フッターを表示するか
  footer?: boolean
  // コンテキストメニューを表示するか
  contextMenu?: boolean
  // 自動フォーカスを無効化するか
  disableAutoFocus?: true
  // メニュー設定
  menu?: MenuConfig

  // ... その他の設定項目
}
```

`menu` オプションは特定メニューの表示/非表示を簡単に制御できます。

```typescript
UniverDocsCorePreset({
  menu: {
    'doc.command.set-inline-format-bold': {
      hidden: true,
    },
    'doc.command.set-inline-format-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

ここでの `'doc.command.set-inline-format-bold'` と `'doc.command.set-inline-format-italic'` はコマンド名で、該当メニュー項目を指します。

参考：[@univerjs/preset-docs-core](https://docs.univer.ai/ja-JP/reference/packages/presets/univerjs/preset-docs-core.md)

## 表示の操作

表示リボンにはページ設定、ズーム、全画面の操作があります。ズーム選択と下部のズームバーは同じ表示倍率を示し、変更してもテキストの書式は変わりません。

## メニューの順序とグリッド配置

Docs のメニュー ID で共通の [`MenuConfig`](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/ui.md#menuconfig) を定義し、利用中のモードで適用します：

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

const menu: MenuConfig = {
  'ribbon.start.format': { order: -1 },
  'doc.command.set-inline-format-bold': {
    order: 0,
    gridLayout: { row: 2, column: 2 },
  },
  'doc.command.set-inline-format-italic': {
    gridLayout: { row: 2, column: 1 },
  },
}
```

利用中のモードを選び、既存の初期化設定に以下のオプションを組み込んでください。他のプラグイン、言語、テーマ、コンテナーの設定は保持し、同じプラグインを二重に登録しないでください。

#### プラグインモード

```typescript
import { UniverUIPlugin } from '@univerjs/ui'

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

#### プリセットモード

```typescript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import { createUniver } from '@univerjs/presets'

const { univerAPI } = createUniver({
  presets: [
    UniverDocsCorePreset({
      ribbonType: 'grid',
      menu,
    }),
  ],
})
```

初期化後は [`updateMenuConfig()`](https://docs.univer.ai/ja-JP/reference/facade/univer.md#updatemenuconfig) で既存のインスタンスを更新します：

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

univerAPI.updateMenuConfig(menu)
```

`order` は同じ階層を昇順に並べます。`gridLayout` はグリッド Ribbon 専用で、各 2 行グループ内の座標は 1 から始まります。実行時の更新は未指定のプロパティを保持し、UI をすぐに更新します。プラグインモードでは `UniverUIPlugin` に `menu` を渡し、Facade の使用前に `@univerjs/ui/facade` をインポートします。各フィールドとカスタムボタンの例は[メニュー配置ガイド](https://docs.univer.ai/ja-JP/guides/sheets/features/core.md#menu-order-and-grid-layout)を参照してください。

## 貼り付けオプション

Docs は元の書式を保持、貼り付け先の書式に合わせる、テキストのみの 3 モードに対応します。貼り付け先モードは太字や斜体などを保持しつつ、対象の文字・段落スタイルを使います。テキストのみでは画像とリンクを除き、表をタブ区切りテキストにします。直前の貼り付けは貼り付け後のオプションで変更できます。ブラウザーが読み取りを制限する場合はキーボードまたはシステムの貼り付けを使います。

デスクトップの Ribbon の**貼り付け**メニューは元に戻す・やり直すの隣にあり、図形のテキスト編集中は非表示になります。デスクトップとモバイルのコンテキストメニューでは、**形式を選択して貼り付け**は書式グループにあります。

## ヘッダーとフッターのフィールド

従来型文書のヘッダーやフッターを編集すると、挿入、移動、先頭ページ・奇数偶数ページ、位置を設定するコンテキスト Ribbon が表示されます。現在のページ番号、総ページ数、ローカライズされた日時を挿入できます。ページフィールドは各ページに応じた値を表示します。日時の自動更新を有効にするとフィールド、無効にすると固定テキストを挿入します。日時フィールドは文書を開くときや「フィールドの更新」で更新され、時計のように常時更新はされません。モダン文書ではページのヘッダーとフッターを使用しません。