# コメント

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

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

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [
    {
      "client": "@univerjs/preset-sheets-thread-comment",
      "locale": "@univerjs/preset-sheets-thread-comment/locales/ja-JP",
      "style": "@univerjs/preset-sheets-thread-comment/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/thread-comment"
    },
    {
      "client": "@univerjs/thread-comment-ui",
      "locale": "@univerjs/thread-comment-ui/locale/ja-JP",
      "style": "@univerjs/thread-comment-ui/lib/index.css"
    },
    {
      "client": "@univerjs/sheets-thread-comment",
      "facade": "@univerjs/sheets-thread-comment/facade"
    },
    {
      "client": "@univerjs/sheets-thread-comment-ui",
      "locale": "@univerjs/sheets-thread-comment-ui/locale/ja-JP",
      "style": "@univerjs/sheets-thread-comment-ui/lib/index.css"
    }
  ],
  "server": "optional"
}
```

コメントは、ドキュメント内でコメントや返信を追加できる機能で、チームメンバー間のコミュニケーションとコラボレーションを促進します。

## プラグインモード

### インストール

#### npm

```bash
npm install @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui
```

#### pnpm

```bash
pnpm add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui
```

#### yarn

```bash
yarn add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui
```

#### bun

```bash
bun add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment' // [!code ++]
import { UniverSheetsThreadCommentUIPlugin } from '@univerjs/sheets-thread-comment-ui' // [!code ++]
import SheetsThreadCommentUIJaJP from '@univerjs/sheets-thread-comment-ui/locale/ja-JP' // [!code ++]
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment' // [!code ++]
import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui' // [!code ++]
import ThreadCommentUIJaJP from '@univerjs/thread-comment-ui/locale/ja-JP' // [!code ++]

import '@univerjs/sheets-thread-comment-ui/lib/index.css'
import '@univerjs/thread-comment-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-thread-comment/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(
      ThreadCommentUIJaJP, // [!code ++]
      SheetsThreadCommentUIJaJP, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverThreadCommentPlugin) // [!code ++]
univer.registerPlugin(UniverThreadCommentUIPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsThreadCommentPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsThreadCommentUIPlugin) // [!code ++]
```

#### コラボレーション機能との併用

collaboration 機能を使用する場合の設定例:

#### npm

```bash
npm install @univerjs-pro/thread-comment-datasource
```

#### pnpm

```bash
pnpm add @univerjs-pro/thread-comment-datasource
```

#### yarn

```bash
yarn add @univerjs-pro/thread-comment-datasource
```

#### bun

```bash
bun add @univerjs-pro/thread-comment-datasource
```

```typescript
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource' // [!code ++]

univer.registerPlugin(UniverThreadCommentDataSourcePlugin) // [!code ++]
```

## モバイル対応

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

| パッケージ                                | デスクトップの登録                           | モバイルの登録                                   |
| ------------------------------------ | ----------------------------------- | ----------------------------------------- |
| `@univerjs/sheets-thread-comment-ui` | `UniverSheetsThreadCommentUIPlugin` | `UniverSheetsThreadCommentMobileUIPlugin` |
| `@univerjs/thread-comment-ui`        | `UniverThreadCommentUIPlugin`       | `UniverThreadCommentMobileUIPlugin`       |

## プリセットモード

### インストール

#### npm

```bash
npm install @univerjs/preset-sheets-thread-comment
```

#### pnpm

```bash
pnpm add @univerjs/preset-sheets-thread-comment
```

#### yarn

```bash
yarn add @univerjs/preset-sheets-thread-comment
```

#### bun

```bash
bun add @univerjs/preset-sheets-thread-comment
```

### 使い方

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'
import { UniverSheetsThreadCommentPreset } from '@univerjs/preset-sheets-thread-comment' // [!code ++]
import UniverPresetSheetsThreadCommentJaJP from '@univerjs/preset-sheets-thread-comment/locales/ja-JP' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-thread-comment/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(
      UniverPresetSheetsCoreJaJP,
      UniverPresetSheetsThreadCommentJaJP, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsThreadCommentPreset(), // [!code ++]
  ],
})
```

## Facade API

Facade API の完全な型定義は、[FacadeAPI](https://docs.univer.ai/ja-JP/reference/facade/thread-comment.md) を参照してください。

### インポート

> [!INFO: プラグインモード注意]
> Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。

```typescript
import '@univerjs/sheets-thread-comment/facade'
```

### セルへのコメント作成

`univerAPI.newTheadComment()` を使ってコメントビルダーを作成できます。これは `FTheadCommentBuilder` のインスタンスを返し、チェーンで各種プロパティを設定できます。

以下は [`FTheadCommentBuilder`](https://docs.univer.ai/ja-JP/reference/facade/thead-comment-builder.md) の主なメソッドです:

| メソッド        | 説明                 |
| ----------- | ------------------ |
| setContent  | コメントの内容を設定します      |
| setPersonId | コメントの作成者 ID を設定します |
| setDateTime | コメントの日時を設定します      |
| setId       | コメントの ID を設定します    |
| setThreadId | スレッド ID を設定します     |

```typescript
// 新しいコメントを作成します
const richText = univerAPI.newRichText().insertText('hello univer')
const commentBuilder = univerAPI.newTheadComment()
  .setContent(richText)

console.log(commentBuilder.content.toPlainText())

// コメントをセル A1 に追加します
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const cell = fWorksheet.getRange('A1')
const result = await cell.addCommentAsync(commentBuilder)
```

### セルのコメントを取得

以下のメソッドでコメントを取得できます。これらは `FThreadComment` のインスタンスを返し、更新・削除・解決などの操作が可能です。

* `FWorkbook.getComments()`: ワークブック内のすべてのコメントを取得します
* `FfWorksheet.getComments()`: ワークシート内のすべてのコメントを取得します
* `FRange.getComment()`: 範囲の左上セルのコメントを取得します
* `FRange.getComments()`: 範囲内のすべてのコメントを取得します

以下は [`FThreadComment`](https://docs.univer.ai/ja-JP/reference/facade/thread-comment.md) の主なメソッドです:

| メソッド           | 説明                    |
| -------------- | --------------------- |
| getIsRoot      | コメントがルートコメントかどうかを返します |
| getCommentData | コメントデータを取得します         |
| getReplies     | コメントへの返信一覧を取得します      |
| getRange       | コメントの範囲を取得します         |
| getRichText    | コメントのリッチテキストを取得します    |
| deleteAsync    | コメントとその返信を削除します       |
| updateAsync    | コメント内容を更新します          |
| resolveAsync   | コメントを解決します            |
| replyAsync     | コメントに返信します            |

```typescript
// ワークブック内のすべてのコメントを取得します
const fWorkbook = univerAPI.getActiveWorkbook()
fWorkbook.getComments()

// アクティブなワークシート内のすべてのコメントを取得します
const fWorksheet = fWorkbook.getActiveSheet()
fWorksheet.getComments()

const fRange = fWorksheet.getRange('A1:B2')
// セル A1 のコメントを取得します
fRange.getComment()

// 範囲 A1:B2 のすべてのコメントを取得します
fRange.getComments()
```

### コメントのクリア

* `FWorkbook.clearComments()`: ワークブック内のすべてのコメントをクリアします
* `FWorksheet.clearComments()`: ワークシート内のすべてのコメントをクリアします
* `FRange.clearCommentAsync()`: 範囲の左上セルのコメントをクリアします
* `FRange.clearCommentsAsync()`: 範囲内のすべてのコメントをクリアします

```typescript
// ワークブック内のすべてのコメントをクリアします
const fWorkbook = univerAPI.getActiveWorkbook()
await fWorkbook.clearComments()

// アクティブなワークシート内のすべてのコメントをクリアします
const fWorksheet = fWorkbook.getActiveSheet()
await fWorksheet.clearComments()

const fRange = fWorksheet.getRange('A1:B2')

// セル A1 のコメントをクリアします
await fRange.clearCommentAsync()

// 範囲 A1:B2 のすべてのコメントをクリアします
await fRange.clearCommentsAsync()
```

### コメント返信リストの取得

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// ワークシート内のすべてのコメントを取得します
const comments = fWorksheet.getComments()
comments.forEach((comment) => {
  // コメントがルートコメントの場合、その返信を取得します
  if (comment.getIsRoot()) {
    const replies = comment.getReplies()
    replies.forEach((reply) => {
      console.log(reply.getCommentData())
    })
  }
})
```

### コメントの更新 / 削除 / 解決 / 返信

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// 新しいコメントを作成し、セル A1 に追加します
const richText = univerAPI.newRichText().insertText('hello univer')
const commentBuilder = univerAPI.newTheadComment()
  .setContent(richText)
  .setId('mock-comment-id')
const cell = fWorksheet.getRange('A1')
await cell.addCommentAsync(commentBuilder)

// 3 秒後にコメントを更新し、返信を追加します
setTimeout(async () => {
  // ID でコメントを取得して内容を更新します
  const comment = fWorksheet.getCommentById('mock-comment-id')
  const newRichText = univerAPI.newRichText().insertText('Hello Univer AI')
  await comment.updateAsync(newRichText)

  // 新しい返信コメントを作成して内容を設定します
  const replyText = univerAPI.newRichText().insertText('Hello Univer AI! GO! GO! GO!')
  const reply = univerAPI.newTheadComment().setContent(replyText)
  await comment.replyAsync(reply)
}, 3000)

// コメントを解決し、6 秒後に削除します
setTimeout(async () => {
  const comment = fWorksheet.getCommentById('mock-comment-id')
  await comment.resolveAsync()
  await comment.deleteAsync()
}, 6000)
```

### イベントリスナー

イベント型の完全な定義は [Events](https://docs.univer.ai/ja-JP/reference/facade/events.md) を参照してください。

コメントモジュールは、コメントの追加・更新・削除・解決状態の変更を監視するためのイベント群を提供します。すべてのイベントは `univerAPI.addEvent()` で購読できます。

#### コメント追加イベント

`univerAPI.Event.CommentAdded`: コメントが追加された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentAdded, (params) => {
  const { comment, workbook, worksheet, row, col } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentAdd`: コメントが追加される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentAdd, (params) => {
  const { comment, workbook, worksheet, row, col } = params

  // コメント追加操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

#### コメント更新イベント

`univerAPI.Event.CommentUpdated`: コメントが更新された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentUpdated, (params) => {
  const { comment, workbook, worksheet, row, col } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentUpdate`: コメントが更新される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentUpdate, (params) => {
  const { comment, workbook, worksheet, row, col, newContent } = params

  // コメント更新操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

#### コメント削除イベント

`univerAPI.Event.CommentDeleted`: コメントが削除された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentDeleted, (params) => {
  const { commentId, workbook, worksheet } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentDelete`: コメントが削除される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentDelete, (params) => {
  const { comment, workbook, worksheet, row, col } = params

  // コメント削除操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

#### コメント解決ステータスイベント

`univerAPI.Event.CommentResolved`: コメントの解決ステータスが変更された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentResolved, (params) => {
  const { comment, row, col, resolved, workbook, worksheet } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentResolve`: コメントの解決ステータスが変更される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentResolve, (params) => {
  const { comment, row, col, resolved, workbook, worksheet } = params

  // コメント解決操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

すべてのイベントは次の共通パラメータを含みます:

* `workbook`: 現在のワークブックインスタンス
* `worksheet`: 現在のワークシートインスタンス
* `row`: コメントの行インデックス
* `col`: コメントの列インデックス
* `comment`: コメントオブジェクト（削除イベントでは `commentId` のみ含まれます）

特殊パラメータ:

* `BeforeCommentUpdate` イベントには `newContent` が含まれます: 新しいコメント内容 (RichTextValue 型)
* `CommentResolved` および `BeforeCommentResolve` イベントには `resolved` が含まれます: コメントの解決ステータス

すべての `Before` プレフィックス付きイベントコールバックは `params.cancel = true` を返すことで該当する操作を防ぐことができます。

## 共通のコメント操作

共通のコメント Facade と製品 Facade を両方インポートします。製品のメソッドは安定したアンカーを作成し、共通 API は返信・更新・解決・削除を扱います。`getComments()` はローカル状態を読み取ります。`listCommentsAsync()` は設定済みデータソースを通じて既知のスレッドを同期し、サーバー上の全スレッドを検索するものではありません。

```ts
import '@univerjs/thread-comment/facade'

const [thread] = univerAPI.getComments({ resolved: false })
if (thread) {
  await univerAPI.replyCommentAsync({
    unitId: thread.unitId,
    subUnitId: thread.subUnitId,
    threadId: thread.threadId,
    content: 'Reviewed.',
  })
}
```

## 共有ディスカッション

[Server SDK](https://docs.univer.ai/ja-JP/server/collaboration/extensions.md) で Comment Service と Endpoint を統合し、共同編集とライセンスの設定後に `@univerjs-pro/thread-comment-datasource` の `UniverThreadCommentDataSourcePlugin` を登録します。付属のデータソースは `/universer-api/comment/unit/{unitId}/...` と `/universer-api/user/list` を使います。アプリからこれらのルートを公開してください。サーバーは文書の編集権限とは別に、コメントの読み書きを認可する必要があります。