セルにコメントの追加

SpreadJSにより、セルのコメントを 「 comments 」 豊富にカスタマイズできます。ビジュアルスタイリング、レイアウトの調整、インタラクティブな動作をサポートしています。テキストのフォーマット、ボックスやインジケーターアイコンのカスタマイズ、表示モードなどの機能により、ユーザビリティがさらに向上し、開発者はアプリケーションのニーズに合わせてコメントの外観とインタラクションを正確に調整できます。

コメントの作成とカスタマイズ

特定のセルにコメントを追加するには、add メソッドを呼び出します。

// create a comment to cell(5,5)
var comment = activeSheet.comments.add(5,5,"新しいコメントです");

コメントのスタイリングは、コメントクラスを通じて行い、ビジュアル表示を細かく制御できます。

以下は、既存のコメントのボックスとテキストの基本スタイル構成を示す簡単な例です。

// set the style of comment

// box customization
comment.backColor("#ff0000");
comment.borderColor("rgb(46, 119, 183)");
comment.borderStyle("dashed");
comment.borderWidth(4);

// text formatting
comment.fontSize("11pt");
comment.fontStyle("italic");
comment.fontWeight("bold");
comment.foreColor("#e7e6e6");
comment.horizontalAlign(1);
comment.textDecoration(1);

背景色の設定

SpreadJS（スプレッドJS）では、セルコメントの背景色（バックカラー）を設定するために、5種類の入力方法をサポートしています。これにより、柔軟かつ精度の高いカスタマイズが可能です。

RGB（16進数指定）
16進数カラーコード（例：#FF0000は赤）を使用して、正確な色を指定できます。
RGB（数値指定）
RGB値（例：RGB(255, 0, 0)は赤）を指定できます。RGBカラーモデルに精通している開発者向けです。
定義済みカラーネーム
固定された色の名前から選択できます。コード入力せずに色を指定したいユーザー向けの簡易方法です。
テーマカラー
ドキュメントテーマに紐付くカラー（例：「Background 1」など）を利用できます。これによりドキュメント全体のデザインと一貫性を保つことが可能です。
システムテーマネーム
Excel 2019とシームレスに互換性を持たせるためのカラーネームを利用できます。現在、以下の2つのシステムテーマネームがサポートされています。
- SJS_infoBackground：デフォルト値は #FFFFE1（Excelの infoBackground [80]と一致）。
- SJS_window：デフォルト値は #FFFFFF（Excelの window [65]と一致）。

type=note
フロントエンド側でExcelのシステムカラーAPIを直接呼び出すことはできないため、SpreadJSではExcel 2019のカラースペックに基づいた2つのカラー値（SJS_infoBackground、およびSJS_window）をあらかじめ設定しています。
ユーザーの実行環境でシステムカラーの設定がデフォルトカラーから変更されている場合、必要に応じてSJS_infoBackgroundやSJS_windowのカラー値をカスタマイズすることができます。

この例では、「SJS_infoBackground」で表される色を定義し、既存のコメントボックスの backColor を更新します。

// Custom color definition
var infoBkStyle = new GC.Spread.Sheets.Style();
infoBkStyle.name = 'SJS_infoBackground';
infoBkStyle.backColor = '#FFFFE1';

// Add to spread's named style collection.
spread.addNamedStyle(infoBkStyle);

// Set the comment background color
comment.backColor("SJS_infoBackground");

表示モードの選択

SpreadJSのセルコメントの displayMode メソッドは、以下の2つの構成モードをサポートしています：

alwaysShown - コメントは常に対象セルの隣に表示されます。
hoverShown - セルのインジケーターアイコンにマウスオーバーしたときにのみ、コメントが表示されます。

これにより、開発者は永続的な注釈とコンテキストに応じたポップアップを、インタラクション要件に基づいて選択できます。

comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown);

jp-gif1

comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.hoverShown);

jp-gif2

インジケーターアイコンのカスタマイズ

コメントを初期化すると、自動的に対象セルの右上隅に小さな赤い三角形のアイコンが挿入されます。indicatorColor メソッドと indicatorSize メソッドを使用して、コメントのインジケーターアイコンの色とサイズを変更できます。

以下では、前の例を変更し、アイコンを拡大して色を緑色に変更します。

comment.indicatorColor("green");
comment.indicatorSize(15);

コメントのリサイズ/移動/編集

コメントを直接リサイズ、移動、または編集できます。

type=note
コメントの状態を取得または設定するには、commentState を使用します。

以下の画像は、コメントのリサイズと移動のインジケーターアイコンを示しています。コメントを選択するとリサイズアイコンが表示され、コメントの境界にポインタを合わせると移動アイコンが表示されます。

jp-png2

コメントをリサイズする

jp-gif4

コメントを移動する

jp-gif5

コメントを編集する

jp-gif6

コメントのロック

シートオプションの isProtected が true に設定されている場合、コメントイベントまたはコメントテキストをロックできます。シートが保護されている場合のコメントプロパティ値と結果を以下の表に示します。

Locked	LockText	結果
false	false	コメントへの操作が有効になります。コメントは編集可能です。
true	false	コメントへの操作は無効ですが、コメントは編集可能です。
false	true	コメントへの操作は有効ですが、コメントは編集できません。
true	true	コメントへの操作は無効であり、コメントも編集できません。

コメントの動的なサイズ変更と再配置

行または列のサイズを変更すると、 dynamicMove および dynamicSize メソッドの設定によってコメントの位置やサイズが変化することがあります。以下の表は、dynamicMove および dynamicSize の設定による結果を示します。

DynamicMove	DynamicSize	結果
true	true	コメントはセルと一緒に移動・サイズ変更されます。
true	false	コメントはセルと一緒に移動しますが、セルとは連動してサイズ変更されません。
false	true or false	コメントはセルと一緒に移動もサイズ変更もされません。

その他のヒント

コメントが編集モードの場合、コメント内のテキストをカット、コピー、または貼り付けできます。セルをコピーすると、コメントも一緒にコピーされます。

コメントテキストのカット・コピー・貼り付け、コメントのサイズ変更や移動、フォーマットの変更時は、元に戻す・やり直す操作が有効です。

Excel形式ファイルからコメントをインポートする際にはいくつか制限があります。

一部の罫線スタイルやフォントはインポートされません。
元のファイルで表示されている範囲よりもシートの範囲が小さい場合、コメントの位置が異なることがあります。
コメントはXLSXファイルからインポートされます。