# コア機能

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

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

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [
    {
      "client": "@univerjs/preset-sheets-core",
      "locale": "@univerjs/preset-sheets-core/locales/ja-JP",
      "style": "@univerjs/preset-sheets-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"
    },
    {
      "client": "@univerjs/sheets",
      "locale": "@univerjs/sheets/locale/ja-JP",
      "facade": "@univerjs/sheets/facade"
    },
    {
      "client": "@univerjs/sheets-ui",
      "locale": "@univerjs/sheets-ui/locale/ja-JP",
      "style": "@univerjs/sheets-ui/lib/index.css",
      "facade": "@univerjs/sheets-ui/facade"
    },
    {
      "client": "@univerjs/sheets-formula",
      "facade": "@univerjs/sheets-formula/facade"
    },
    {
      "client": "@univerjs/sheets-formula-ui",
      "locale": "@univerjs/sheets-formula-ui/locale/ja-JP",
      "style": "@univerjs/sheets-formula-ui/lib/index.css"
    },
    {
      "client": "@univerjs/sheets-numfmt",
      "facade": "@univerjs/sheets-numfmt/facade"
    },
    {
      "client": "@univerjs/sheets-numfmt-ui",
      "locale": "@univerjs/sheets-numfmt-ui/locale/ja-JP",
      "style": "@univerjs/sheets-numfmt-ui/lib/index.css"
    }
  ],
  "server": false
}
```

Univer Sheets のコア機能は、スプレッドシートエディタ、数式エンジン、レンダリングエンジン、数値書式エンジン、デザインシステム、UI コンポーネントライブラリで構成されます。これらが統合されることで、多様な形式と複雑な操作を扱える強力なプラットフォームを形成します。

## 機能一覧

Univer Sheets のコア機能には以下が含まれます:

* **スプレッドシート描画**: Univer Sheets のレンダリング（カーソル・選択範囲描画を含む）をサポート。
* **セルスタイル**: フォント、色、罫線、配置などセルの装飾設定。
* **数式計算**: 数式の追加と評価をサポート。数学、統計、テキスト、日付関数など Excel のほぼすべての関数を網羅。
* **数値書式**: 通貨、パーセンテージ、日付などの書式設定をサポート。
* **グリッド線と固定表示（フリーズ）**: 大規模データの閲覧・編集を容易にする表示機能。
* **デフォルトスタイル**: 既定フォント・サイズ・カラーなど全体既定スタイルの設定。
* **プラグインシステム**: 数式・画像・チャート等カスタムプラグインをサポート（Univer の中核アーキテクチャ機能の一つ）。

## プラグインモード

### インストール

#### npm

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

#### pnpm

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

#### yarn

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

#### bun

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

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
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/locale/ja-JP'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'
import SheetsFormulaUIJaJP from '@univerjs/sheets-formula-ui/locale/ja-JP'
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'
import SheetsNumfmtUIJaJP from '@univerjs/sheets-numfmt-ui/locale/ja-JP'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import SheetsUIJaJP from '@univerjs/sheets-ui/locale/ja-JP'
import SheetsJaJP from '@univerjs/sheets/locale/ja-JP'
import { UniverUIPlugin } from '@univerjs/ui'
import UIJaJP from '@univerjs/ui/locale/ja-JP'
import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/sheets-ui/lib/index.css'
import '@univerjs/sheets-formula-ui/lib/index.css'
import '@univerjs/sheets-numfmt-ui/lib/index.css'
import '@univerjs/engine-formula/facade'
import '@univerjs/ui/facade'
import '@univerjs/docs-ui/facade'
import '@univerjs/sheets/facade'
import '@univerjs/sheets-ui/facade'
import '@univerjs/sheets-formula/facade'
import '@univerjs/sheets-numfmt/facade'

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

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsFormulaPlugin)
univer.registerPlugin(UniverSheetsFormulaUIPlugin)
univer.registerPlugin(UniverSheetsNumfmtPlugin)
univer.registerPlugin(UniverSheetsNumfmtUIPlugin)
```

### プラグインと設定

#### @univerjs/core

Univer のコアライブラリで、インスタンス生成・テーマ・言語等の基礎機能を提供します。

```typescript
interface UniverParameter {
  // Univer インスタンスのテーマ。既定値: `defaultTheme`
  theme: IStyleSheet
  // ダークモード使用有無。既定: false
  darkMode?: boolean
  // インスタンスのロケール
  locale: LocaleType
  // 使用するロケールオブジェクト群
  locales: ILocales
  // ログレベル
  logLevel?: LogLevel
}
```

参照：[`Univer`](https://docs.univer.ai/ja-JP/reference/classes/univer.md)

#### @univerjs/engine-render

レンダリングエンジンで、描画・スクロールバー・カーソル・選択範囲等の処理を担当。`UniverRenderEnginePlugin` を提供。

参照：[@univerjs/engine-render](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/engine-render.md)

#### @univerjs/engine-formula

数式エンジンで、数式の計算と処理を担当。`UniverFormulaEnginePlugin` を提供。

参照：[@univerjs/engine-formula](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

UI 基盤プラグイン。

`UniverUIPlugin` を提供し、基本レイアウト構成の設定が可能です。

```typescript
interface IUniverUIConfig {
  // コンテナ要素（文字列または DOM）
  container?: string | HTMLElement
  // ヘッダー表示有無
  header?: boolean
  // ヘッダーツールバー表示有無
  toolbar?: boolean
  // ツールバー種別。'classic': デフォルトのクラシックモード；'grid': 2行グリッドモード；'collapsed': コンパクトモード；'simple': 非グループ化モード
  ribbonType?: RibbonType
  // コンテキストメニュー表示有無
  contextMenu?: boolean
  // 自動フォーカス無効化
  disableAutoFocus?: true
  // 依存性注入オーバーライド設定
  override?: DependencyOverride
  // メニュー設定
  menu?: MenuConfig
}
```

`menu` 設定例:

```typescript
univer.registerPlugin(UniverSheetsUIPlugin, {
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

ここで `'sheet.command.set-range-bold'` と `'sheet.command.set-range-italic'` はコマンド名で、該当メニュー項目を指します。以下の [メニュー項目 ID リスト](#menu-item-id-list) を参照してください。

参照：[@univerjs/ui](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/ui.md)

#### @univerjs/docs

Univer Docs のコアプラグイン。`UniverDocsPlugin` を提供。

参照：[@univerjs/docs](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/docs.md)

#### @univerjs/docs-ui

Univer Docs の UI プラグイン。ドキュメントエディタの UI コンポーネントとインタラクションを提供。`UniverDocsUIPlugin` を提供。

参照：[@univerjs/docs-ui](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/docs-ui.md)

#### @univerjs/sheets

Univer Sheets のコアプラグインで、スプレッドシートエディタの基礎機能を提供。`UniverSheetsPlugin` を提供。

`UniverSheetsPlugin` にはエディタ設定用のオプションがあります:

```typescript
interface IUniverSheetsConfig {
  // 行スタイルと列スタイルが両方設定された場合、行スタイルを優先するか
  isRowStylePrecedeColumnStyle?: boolean
  // 自動行高を結合セルに適用するか
  autoHeightForMergedCells?: boolean
  /**
   * リアルタイムコラボレーションで他のユーザーに凍結状態を同期するかどうか。
   * @default true
   */
  freezeSync?: boolean
}
```

参照：[@univerjs/sheets](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/sheets.md)

#### @univerjs/sheets-ui

Univer Sheets の UI プラグイン。スプレッドシートエディタ用の UI コンポーネントと操作を提供。`UniverSheetsUIPlugin` を提供。

設定オプション:

```typescript
interface IUniverSheetsUIConfig {
  // フッター表示
  footer?:
    | false
    | {
        // シートバー（サブシート管理）
        sheetBar?: boolean
        // 統計バー（選択範囲統計: 件数・合計・平均等）
        statisticBar?: boolean
        // 下部メニュー（ハイライト・グリッド線等）
        menus?: boolean
        // ズームスライダー
        zoomSlider?: boolean
        /**
         * ワークシートバーの「ワークシートを追加」ボタンの設定。
         */
        addSheetButtonConfig?: {
          /**
           * ワークシートバーの「ワークシートを追加」ボタンを表示するかどうか。
           * `footer` または `footer.sheetBar` が false の場合、ワークシートバー自体が描画されないため、この設定は無効になります。
           * @default true
           */
          show?: boolean
          /**
           * 新しいワークシートのデフォルト行数。
           * @default 1000
           */
          defaultRowCount?: number
          /**
           * 新しいワークシートのデフォルト列数。
           * @default 20
           */
          defaultColumnCount?: number
        }
      }
  // 数式バー表示
  formulaBar?: boolean
  clipboardConfig?: {
    // 貼り付け後の貼り付けオプションボタンを非表示にするか
    hidePasteOptions?: boolean
  }
  // スクロールバー設定
  scrollConfig?: IScrollBarProps
  /**
   * 権限保護範囲の影表示戦略。
   * - true または 'always': すべての保護範囲の影を表示（デフォルト動作）
   * - 'non-editable': 編集できない範囲の影のみ表示（編集権限が false の場合）
   * - 'non-viewable': 表示できない範囲の影のみ表示（表示権限が false の場合）
   * - false または 'none': 保護範囲の影を表示しない
   * @default true
   */
  protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'
  // 文字列強制扱いアラート無効化
  disableForceStringAlert?: boolean
  // 文字列強制マーク無効化
  disableForceStringMark?: boolean
}
```

参照：[@univerjs/sheets-ui](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/sheets-ui.md)

## モバイル対応

まず[モバイルエディター](https://docs.univer.ai/ja-JP/guides/sheets/getting-started/installation.md#mobile-support)を設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、**文書を開く前に**完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

| パッケージ                         | デスクトップの登録                     | モバイルの登録                             |
| ----------------------------- | ----------------------------- | ----------------------------------- |
| `@univerjs/sheets-formula-ui` | `UniverSheetsFormulaUIPlugin` | `UniverSheetsFormulaMobileUIPlugin` |
| `@univerjs/sheets-numfmt-ui`  | `UniverSheetsNumfmtUIPlugin`  | `UniverSheetsNumfmtMobileUIPlugin`  |

## プリセットモード

### インストール

#### npm

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

#### pnpm

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

#### yarn

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

#### bun

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

### 使い方

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

const { univerAPI } = createUniver({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(UniverPresetSheetsCoreJaJP),
  },
  presets: [UniverSheetsCorePreset()],
})

univerAPI.createWorkbook({})
```

### プリセットと設定

#### @univerjs/presets

このプリセットは Univer アプリケーションを生成する `createUniver` メソッドを提供し、**@univerjs/core** および **@univerjs/design** の全メソッドとオブジェクトを公開します。

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

```typescript
interface CreateUniverParameter {
  // 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-sheets-core

このプリセットは Univer Sheets のコアプリセットで、ドキュメント編集・数式エンジン・レンダリングエンジン等に必要な中核機能を含みます。

```typescript
interface IUniverSheetsCorePresetConfig {
  // コンテナ要素（文字列または DOM 要素）
  container?: string | HTMLElement
  // ヘッダー表示有無
  header?: boolean
  // ヘッダーツールバー表示有無
  toolbar?: boolean
  // ツールバー種別。'classic': デフォルトのクラシックモード；'grid': 2行グリッドモード；'collapsed': コンパクトモード；'simple': 非グループ化モード
  ribbonType?: RibbonType
  // フッター表示設定
  footer?:
    | false
    | {
        // シートバー（サブシート管理: 追加 / 切替 / 削除）
        sheetBar?: boolean
        // 統計バー（選択範囲の件数・合計・平均等）
        statisticBar?: boolean
        // 下部メニュー（ハイライト・グリッド線等）
        menus?: boolean
        // 下部ズームスライダー
        zoomSlider?: boolean
        /**
         * ワークシートバーの「ワークシートを追加」ボタンの設定。
         */
        addSheetButtonConfig?: {
          /**
           * ワークシートバーの「ワークシートを追加」ボタンを表示するかどうか。
           * `footer` または `footer.sheetBar` が false の場合、ワークシートバー自体が描画されないため、この設定は無効になります。
           * @default true
           */
          show?: boolean
          /**
           * 新しいワークシートのデフォルト行数。
           * @default 1000
           */
          defaultRowCount?: number
          /**
           * 新しいワークシートのデフォルト列数。
           * @default 20
           */
          defaultColumnCount?: number
        }
      }
  // コンテキストメニュー表示有無
  contextMenu?: boolean
  // 自動フォーカス無効化
  disableAutoFocus?: true
  // メニュー設定
  menu?: MenuConfig

  sheets?: {
    // 行スタイルと列スタイルが両方設定された場合、行スタイルを優先するか
    isRowStylePrecedeColumnStyle?: boolean
    // 自動行高を結合セルに適用するか
    autoHeightForMergedCells?: boolean
    /**
     * リアルタイムコラボレーションで他のユーザーに凍結状態を同期するかどうか。
     * @default true
     */
    freezeSync?: boolean

    clipboardConfig?: {
      // 貼り付け後の貼り付けオプションボタンを非表示にするか
      hidePasteOptions?: boolean
    }
    // スクロールバー設定
    scrollConfig?: IScrollBarProps
    /**
     * 権限保護範囲の影表示戦略。
     * - true または 'always': すべての保護範囲の影を表示（デフォルト動作）
     * - 'non-editable': 編集できない範囲の影のみ表示（編集権限が false の場合）
     * - 'non-viewable': 表示できない範囲の影のみ表示（表示権限が false の場合）
     * - false または 'none': 保護範囲の影を表示しない
     * @default true
     */
    protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'
    // 文字列強制扱いアラート無効化
    disableForceStringAlert?: boolean
    // 文字列強制マーク無効化
    disableForceStringMark?: boolean
  }

  // ... 追加の設定項目
}
```

`menu` 設定で特定コマンドの表示／非表示・無効化を簡易制御できます:

```typescript
UniverSheetsCorePreset({
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

ここで `'sheet.command.set-range-bold'` と `'sheet.command.set-range-italic'` はコマンド名で、該当メニュー項目を指します。以下の [メニュー項目 ID リスト](#menu-item-id-list) を参照してください。

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

## ツールバーレイアウトと `RibbonType`

`IUniverSheetsCorePresetConfig` または `IUniverUIConfig` 内の `ribbonType` を設定することでツールバーのレイアウトを変更できます。

`ribbonType` は以下の四つのモードをサポートします:

* `classic`：デフォルトのクラシックモード。グループが上部、ツールバーが下部に配置され、従来のレイアウトに慣れたユーザーに適しています。
* `grid`：グリッドモード。上部のタブを維持し、その下で各ツールグループを2行のグリッドに配置します。より多くのツールを一度に表示したいデスクトップレイアウトに適しています。
* `collapsed`：コンパクトモード。グループとツールバーが同じ行に並び、垂直スペースが限られたシナリオに適しています。
* `simple`：非グループ化モード。 すべてのツールが一つのリストに並び、ツールバーの機能に精通したユーザーに適しています。



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

初期設定と実行時の [`univerAPI.updateMenuConfig()`](https://docs.univer.ai/ja-JP/reference/facade/univer.md#updatemenuconfig) では、同じ `menu` 構造を使います。キーには Ribbon のタブキー（例：`ribbon.insert`）、グループキー（例：`ribbon.start.format`）、またはメニュー項目 ID を指定します。

`order` は同じ階層の項目を昇順に並べます。対象はタブ、タブ内のグループ、グループやサブメニュー内の項目です。別のグループへの移動は行いません。タブとグループのキーには、`@univerjs/ui` が公開する `RibbonPosition` や各グループの列挙型も使えます。

### 初期設定

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

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

const menu: MenuConfig = {
  'ribbon.insert': { order: -1 },
  'ribbon.start.format': { order: -1 },
  'sheet.command.set-range-font-family': {
    order: 0,
    gridLayout: { row: 1, column: 1, width: 160 },
  },
}
```

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

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

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

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

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import { createUniver } from '@univerjs/presets'

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

### 実行時の更新

公開 Facade は変更をマージし、UI をすぐに更新します。指定しないプロパティは既存の設定または Schema の既定値を保持し、後から登録するメニューにも設定が適用されます。プラグインモードでは、先に `@univerjs/ui/facade` をインポートしてください。

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

univerAPI.updateMenuConfig({
  'sheet.command.set-range-bold': {
    order: 0,
    gridLayout: { row: 2, column: 2 },
  },
  'sheet.command.set-range-italic': {
    gridLayout: { row: 2, column: 1 },
  },
})
```

`gridLayout` は `ribbonType: 'grid'` の場合のみ有効です。各グループは 2 行で、`row` と `column` は 1 から始まります。明示した座標が位置を決めるため、`order` だけを変えても座標指定済みのボタンは移動しません。入れ替える場合は重なりを避けるため両方のボタンを更新します。省略可能なフィールドは `rowSpan`、`columnSpan`、`showLabel`、`width`、`iconSize` で、サイズの単位はピクセルです。制約と既定値は [`IRibbonGridLayout`](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/ui.md#iribbongridlayout) を参照してください。

### カスタムメニューの配置

`createMenu()` と `createSubmenu()` も `order` と `gridLayout` に対応します。サブメニューでは Ribbon 上のトリガーの配置を指定し、ポップアップ内部の配置は変更しません。次の例では履歴グループの 3 列目にボタンを追加します。

```ts
univerAPI
  .createMenu({
    id: 'custom-action',
    title: 'Custom action',
    action: () => console.log('Custom action clicked'),
    order: 4,
    gridLayout: { row: 1, column: 3, showLabel: true, width: 96 },
  })
  .appendTo('ribbon.start.history')
```

## メニュー項目 ID リスト

> [!NOTE]
> メニュー項目の DOM 要素の 
> 
> `data-u-command`
> 
>  属性からメニュー項目 ID を見つけることができます。

### ツールバーメニュー項目

| メニュー項目 ID                                             | メニュー項目名称                 |
| ----------------------------------------------------- | ------------------------ |
| univer.command.undo                                   | 元に戻す                     |
| univer.command.redo                                   | やり直し                     |
| sheet.command.set-once-format-painter                 | ペイント形式                   |
| sheet.command.set-range-bold                          | 大胆な                      |
| sheet.command.set-range-italic                        | イタリック                    |
| sheet.command.set-range-underline                     | 下線                       |
| sheet.command.set-range-stroke                        | 取り消し線                    |
| sheet.command.set-range-font-family                   | フォント                     |
| sheet.command.set-range-fontsize                      | フォントサイズ                  |
| sheet.command.set-range-text-color                    | テキストの色                   |
| sheet.command.set-background-color                    | 塗りつぶしの色                  |
| sheet.command.set-border-basic                        | 罫線                       |
| sheet.command.set-horizontal-text-align               | 水平揃え                     |
| sheet.command.set-vertical-text-align                 | 垂直揃え                     |
| sheet.command.set-text-wrap                           | テキストの折り返し                |
| sheet.command.set-text-rotation                       | テキストの回転                  |
| sheet.command.add-worksheet-merge                     | セル結合                     |
| sheet.command.add-worksheet-merge-all                 | セル結合 - すべてを結合            |
| sheet.command.add-worksheet-merge-vertical            | セル結合 - 縦方向に結合            |
| sheet.command.add-worksheet-merge-horizontal          | セル結合 - 横方向に結合            |
| sheet.command.remove-worksheet-merge                  | セル結合 - 結合を解除             |
| sheet.operation.open.conditional.formatting.panel     | 条件付き書式                   |
| formula-ui.operation.insert-function                  | 関数                       |
| formula-ui.operation.more-functions                   | 関数 - その他の関数              |
| sheet.menu.sheets-sort                                | 選別                       |
| sheet.command.sort-range-asc                          | 選別 - 昇順                  |
| sheet.command.sort-range-asc-ext                      | 選別 - 昇順拡張                |
| sheet.command.sort-range-desc                         | 選別 - 降順                  |
| sheet.command.sort-range-desc-ext                     | 選別 - 降順拡張                |
| sheet.command.sort-range-custom                       | 選別 - カスタムソート             |
| sheet.menu.image                                      | 画像                       |
| sheet.command.insert-float-image                      | 画像 - フロート画像              |
| sheet.command.insert-cell-image                       | 画像 - セル画像                |
| sheet.command.numfmt.set.currency                     | 通貨                       |
| sheet.command.numfmt.add.decimal.command              | 小数点以下の桁数を増やす             |
| sheet.command.numfmt.subtract.decimal.command         | 小数点以下の桁数を減らす             |
| sheet.command.numfmt.set.percent                      | パーセント                    |
| sheet.operation.open.numfmt.panel                     | 数値書式                     |
| sheet.menu.data-validation                            | データ検証                    |
| data-validation.operation.open-validation-panel       | データ検証 - データ検証管理          |
| data-validation.command.addRuleAndOpen                | データ検証 - ルール追加            |
| sheet.command.smart-toggle-filter                     | フィルターの切り替え               |
| sheet.command.clear-filter-criteria                   | フィルターの切り替え - フィルター条件をクリア |
| sheet.command.re-calc-filter                          | フィルターの切り替え - フィルター条件を再計算 |
| sheet.operation.open-pivot-table-range-selector-panel | ピボットテーブル                 |
| sheet.menu.print                                      | 印刷                       |
| sheet.operation.print-open                            | 印刷 - 印刷                  |
| sheet.operation.open-print-grid-sidebar               | 印刷 - 印刷レイアウト             |
| data-connector.operation.sidebar                      | データコネクタ                  |
| sheets-exchange-client.operation.exchange             | ファイル                     |
| exchange-client.operation.import-xlsx                 | ファイル - 開く(ファイル)          |
| exchange-client.operation.export-xlsx                 | ファイル - 名前を付けて保存          |
| sheet.command.menu-insert-chart                       | グラフを挿入                   |
| sheet.command.add-range-protection-from-toolbar       | 保護                       |
| univer.operation.toggle-edit-history                  | 編集履歴                     |
| sheet.operation.open-sparkline-selector               | スパークライン                  |
| sheet.operation.toggle-comment-panel                  | コメント管理                   |
| sheet.operation.insert-hyper-link-toolbar             | リンクを挿入                   |
| ui.operation.open-find-dialog                         | 検索と置換                    |
| base-ui.operation.toggle-shortcut-panel               | ショートカットパネルを切り替える         |
| sheet.toolbar.text-to-number                          | テキストを数値に変換               |

### 右クリックメニュー項目

| メニュー項目 ID                                               | メニュー項目名称                  |
| ------------------------------------------------------- | ------------------------- |
| sheet.command.copy                                      | コピー                       |
| sheet.command.cut                                       | カット                       |
| sheet.command.paste                                     | ペースト                      |
| sheet.menu.copy-special                                 | 選択的コピー                    |
| sheet.command.copy-formula-only                         | 選択的コピー - 数式のみコピー          |
| sheet.menu.paste-special                                | 選択ペースト                    |
| sheet.command.paste-values                              | 選択ペースト - 値の貼り付け           |
| sheet.command.paste-format                              | 選択ペースト - 書式の貼り付け          |
| sheet.command.paste-col-width                           | 選択ペースト - 列幅の貼り付け          |
| sheet.command.paste-besides-border                      | 選択ペースト - 罫線以外を貼り付け        |
| sheet.command.paste-formula                             | 選択ペースト - 数式の貼り付け          |
| sheet.menu.clear-selection                              | クリア                       |
| sheet.command.clear-selection-content                   | クリア - 内容                  |
| sheet.command.clear-selection-format                    | クリア - 書式                  |
| sheet.command.clear-selection-all                       | クリア - すべてクリア              |
| sheet.contextMenu.text-to-number                        | テキストを数値に変換                |
| sheet.menu.cell-insert                                  | 挿入                        |
| sheet.command.insert-row-before                         | 挿入 - 前に行を挿入               |
| sheet.command.insert-col-before                         | 挿入 - 前に列を挿入               |
| sheet.command.insert-range-move-right-confirm           | 挿入 - 右に移動                 |
| sheet.command.insert-range-move-down-confirm            | 挿入 - 下に移動                 |
| sheet.menu.delete                                       | 削除                        |
| sheet.command.remove-row-confirm                        | 選択した行を削除                  |
| sheet.command.remove-col-confirm                        | 選択した列を削除                  |
| sheet.command.delete-range-move-left-confirm            | 削除 - 左に移動                 |
| sheet.command.delete-range-move-up-confirm              | 削除 - 上に移動                 |
| sheet.menu.sheet-frozen                                 | フリーズ                      |
| sheet.header-menu.sheet-frozen                          | フリーズ （行・列ヘッダー右クリックメニュー項目） |
| sheet.command.set-selection-frozen                      | フリーズ - 選択範囲まで             |
| sheet.command.set-row-frozen                            | フリーズ - この行まで              |
| sheet.command.set-col-frozen                            | フリーズ - この列まで              |
| sheet.command.cancel-frozen                             | フリーズ - フリーズ解除             |
| sheet.contextMenu.permission                            | 行と列の保護                    |
| sheet.command.add-range-protection-from-context-menu    | 行と列の保護 - 保護範囲を追加          |
| sheet.command.set-range-protection-from-context-menu    | 行と列の保護 - 保護範囲を設定          |
| sheet.command.delete-range-protection-from-context-menu | 行と列の保護 - 保護範囲を削除          |
| sheet.command.view-sheet-permission-from-context-menu   | 行と列の保護 - すべての保護範囲を表示      |
| sheet.menu.sheets-sort-ctx                              | 選別                        |
| sheet.command.sort-range-asc-ctx                        | 選別 - 昇順                   |
| sheet.command.sort-range-asc-ext-ctx                    | 選別 - 昇順拡張                 |
| sheet.command.sort-range-desc-ctx                       | 選別 - 降順                   |
| sheet.command.sort-range-desc-ext-ctx                   | 選別 - 降順拡張                 |
| sheet.command.sort-range-custom-ctx                     | 選別 - カスタムソート              |
| sheet.operation.show-comment-modal                      | コメントを追加                   |
| sheet.operation.insert-hyper-link                       | リンクを挿入                    |
| sheet.operation.screenshot                              | 画像としてコピー                  |

### 右クリックメニュー項目 - 行ヘッダー

| メニュー項目 ID                               | メニュー項目名称  |
| --------------------------------------- | --------- |
| sheet.command.insert-multi-rows-above   | 前に行を挿入    |
| sheet.command.insert-multi-rows-after   | 後に行を挿入    |
| sheet.command.hide-row-confirm          | 選択した行を非表示 |
| sheet.command.set-selected-rows-visible | 選択した行を表示  |
| sheet.command.set-row-height            | 行の高さ      |
| sheet.command.set-row-is-auto-height    | 行の高さを自動調整 |

### 右クリックメニュー項目 - 列ヘッダー

| メニュー項目 ID                               | メニュー項目名称  |
| --------------------------------------- | --------- |
| sheet.command.insert-multi-cols-before  | 前に列を挿入    |
| sheet.command.insert-multi-cols-right   | 後に列を挿入    |
| sheet.command.hide-col-confirm          | 選択した列を非表示 |
| sheet.command.set-selected-cols-visible | 選択した列を表示  |
| sheet.command.set-worksheet-col-width   | 列の幅       |
| sheet.command.set-col-auto-width        | 列の幅を自動調整  |