Web SDK

コメント

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

プラグインモード

インストール

Shell
pnpm 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'import { UniverSheetsThreadCommentUIPlugin } from '@univerjs/sheets-thread-comment-ui'import SheetsThreadCommentUIJaJP from '@univerjs/sheets-thread-comment-ui/locale/ja-JP'import { UniverThreadCommentPlugin } from '@univerjs/thread-comment'import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui'import ThreadCommentUIJaJP from '@univerjs/thread-comment-ui/locale/ja-JP'import '@univerjs/sheets-thread-comment-ui/lib/index.css'import '@univerjs/thread-comment-ui/lib/index.css'import '@univerjs/sheets-thread-comment/facade'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      ThreadCommentUIJaJP,       SheetsThreadCommentUIJaJP,     ),  },})univer.registerPlugin(UniverThreadCommentPlugin)univer.registerPlugin(UniverThreadCommentUIPlugin)univer.registerPlugin(UniverSheetsThreadCommentPlugin)univer.registerPlugin(UniverSheetsThreadCommentUIPlugin)

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

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

Shell
pnpm add @univerjs-pro/thread-comment-datasource
TypeScript
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource'univer.registerPlugin(UniverThreadCommentDataSourcePlugin)

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs/sheets-thread-comment-uiUniverSheetsThreadCommentUIPluginUniverSheetsThreadCommentMobileUIPlugin
@univerjs/thread-comment-uiUniverThreadCommentUIPluginUniverThreadCommentMobileUIPlugin

プリセットモード

インストール

Shell
pnpm 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'import UniverPresetSheetsThreadCommentJaJP from '@univerjs/preset-sheets-thread-comment/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-thread-comment/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetSheetsCoreJaJP,      UniverPresetSheetsThreadCommentJaJP,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsThreadCommentPreset(),   ],})

Facade API

Facade API の完全な型定義は、FacadeAPI を参照してください。

インポート

プラグインモード注意

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

TypeScript
import '@univerjs/sheets-thread-comment/facade'

セルへのコメント作成

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

以下は FTheadCommentBuilder の主なメソッドです:

メソッド説明
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 の主なメソッドです:

メソッド説明
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 を参照してください。

コメントモジュールは、コメントの追加・更新・削除・解決状態の変更を監視するためのイベント群を提供します。すべてのイベントは 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() は設定済みデータソースを通じて既知のスレッドを同期し、サーバー上の全スレッドを検索するものではありません。

TypeScript
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 で Comment Service と Endpoint を統合し、共同編集とライセンスの設定後に @univerjs-pro/thread-comment-datasource の UniverThreadCommentDataSourcePlugin を登録します。付属のデータソースは /universer-api/comment/unit/{unitId}/... と /universer-api/user/list を使います。アプリからこれらのルートを公開してください。サーバーは文書の編集権限とは別に、コメントの読み書きを認可する必要があります。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.