リッチテキスト

Spread.Sheetsでは、セル内でリッチテキスト形式がサポートされます。これにより、ユーザーはワークシート内の行ヘッダ、列ヘッダ、またはビューポート領域に表示するテキストに、必要なスタイルを設定できます。リッチテキストの形式設定により、ユーザーはスプレッドシートの審美的な外観を向上させ、データを効率的に操作できます。

セルにリッチテキスト形式を適用した後、セル値は正常に変換されます。デフォルトでは、セルにテキスト情報を入力すると、ワークシートのビューポート領域には、書式スタイルが何も設定されていない状態のテキストが表示されます。これは、下図ワークシートのA1セルの状態です。セルにリッチテキスト形式を適用すると、テキストは下図ワークシートのA3セルのように表示されます。

viewport1

下図は、リッチテキスト形式を適用した列ヘッダと行ヘッダを示します。

セルにリッチテキスト形式を適用すると、下付き文字、上付き文字、文字飾り、テキストの配置、縦書きテキスト、文字の折り返し、インデントなど、さまざまなスタイルを施したテキストを表示できるだけでなく、視覚的に優れた外観のスプレッドシートを作成できます。また、JSONのシリアル化と逆シリアル化、Excel入出力、縮小による全体表示、自動調整など、いくつもの組み込み機能もサポートされます。

下図は、ビューポート領域にリッチテキスト形式を適用し、B4セルに縦書きテキストを表示する例を示します。

コードの使用

次のサンプルコードは、ワークシートの列ヘッダセル、行ヘッダセル、およびビューポート領域のセルに、リッチテキストを設定します。

var SpreadJS =
{
                richText: [{
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(78,133,242)"
                    },
                    text: "S"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(228,65,52)"
                    },
                    text: "p"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(247,188,32)"
                    },
                    text: "r"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(78,133,242)"
                    },
                    text: "e"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(65,168,87)"
                    },
                    text: "a"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(228,65,54)"
                    },
                    text: "d"
                }
                ]
};

 var sJS =
{
                richText: [
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(78,133,242)"
                        },
                        text: "S"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(65,168,87)"
                        },
                        text: "p"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(247,188,32)"
                        },
                        text: "r"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(78,133,242)"
                        },
                        text: "e"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(65,168,87)"
                        },
                        text: "a"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(228,65,54)"
                        },
                        text: "d"
                    }
                ]
};

 

var sheet = spread.getActiveSheet();

// ビューポートのセルにリッチテキスト形式を適用します。

 sheet.setValue(3, 0, SpreadJS, 3);
 sheet.setValue(2, 2, sJS, GC.Spread.Sheets.SheetArea.viewport);

// 列ヘッダセルにリッチテキスト形式を適用します。

sheet.setValue(0, 4, { richText: [{ style: { font: 'bold 36px Arial ', foreColor: 'blue' }, text: 'Spread' }] }, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 1, SpreadJS, GC.Spread.Sheets.SheetArea.colHeader);

// 行ヘッダセルにリッチテキスト形式を適用します。

sheet.setValue(2, 0, sJS, GC.Spread.Sheets.SheetArea.rowHeader);

注意： セルにリッチテキスト形式を適用する場合は、以下の点に注意してください。
Spread JSでは、編集モードでリッチテキスト形式はサポートされません。
リッチテキスト形式は、チェックボックス型セルおよびハイパーリンク型セルには適用できません。
リッチテキストの行の長さは、その行の最大フォントサイズに基づいて決定されます。
縦書きテキストにリッチテキスト形式を適用する場合は、文字飾りは無効になります。また、縦書きテキストにリッチテキスト形式を適用する場合に上付き文字や下付き文字を使用すると、縦書きテキストでは上付き／下付き文字はサポートされず、フォントサイズだけが小さくなります。

箇条書きリストの作成

SpreadJS を使用すると、リッチテキスト形式で箇条書きリスト（順序なしリスト）、および番号付きのリスト（順序付きリスト）を作成できます。

リッチテキストでは、リスト項目は次の属性によって表されます。

type: リスト項目のリストスタイルを示します。
level: リスト項目のインデントレベルを示します ((レベル + 1) * 4 スペース文字 “ “)。
richText: リスト項目のテキストコンテンツを示します。

メモ: ネストされたリストは、レベル属性を使用して表現できます。

GC.Spread.Sheets.ListType 列挙を使用して、番号付きリストと箇条書きリストの両方を作成します。

次のサンプルコードは、箇条書きと番号の両方を含む複数レベルのリストを作成します。

   let sheet = spread.getActiveSheet();
   let style = new GC.Spread.Sheets.Style();
   style.wordWrap = true;
   sheet.setStyle(0, 0, style);
   let richText = [{
       type: GC.Spread.Sheets.ListType.disc, // リッチテキストをリスト項目で表します。シンボルは黒丸(●)です
       level: 0, // リスト項目のレベルを表します
       richText: [{ // 現在のリスト項目のテキストコンテンツを表します。この場合は「disc1」と表示されます
           text: "disc"
       }, {
           text: "1",
           style: {
               font: "24px Arial",
               foreColor: "red"
           }
       }]
   }, {
       type: GC.Spread.Sheets.ListType.lowerAlpha, // リッチテキストをリスト項目で表します。シンボルは英小文字です
       level: 1, // リスト項目のレベルを表します
       richText: [{  // 現在のリスト項目のテキストコンテンツを表します。この場合は「lowerAlpha1」と表示されます
           text: "lowerAlpha1"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.lowerRoman, // リッチテキストをリスト項目で表します。シンボルは小文字のローマ数字です
       level: 2, // リスト項目のレベルを表します
       richText: [{  // 現在のリスト項目のテキストコンテンツを表します。この場合は「lowerRoman1」と表示されます
           text: "lowerRoman1"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.lowerRoman, // リッチテキストをリスト項目で表します。シンボルは小文字のローマ数字です
       level: 2, // リスト項目のレベルを表します
       richText: [{  // 現在のリスト項目のテキストコンテンツを表します。この場合は「lowerRoman2」と表示されます
           text: "lowerRoman2"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.lowerAlpha, // リッチテキストをリスト項目で表します。シンボルは英小文字です
       level: 1, // リスト項目のレベルを表します
       richText: [{  // 現在のリスト項目のテキストコンテンツを表します。この場合は「lowerAlpha2」と表示されます
           text: "lowerAlpha2"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.disc, // リッチテキストをリスト項目で表します。シンボルは黒丸(●)です
       level: 0, // リスト項目のレベルを表します
       richText: [{ // 現在のリスト項目のテキストコンテンツを表します。この場合は「disc2」と表示されます
           text: "disc2"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.circle, // リッチテキストをリスト項目で表します。シンボルは白丸(○)です
       level: 1, // リスト項目のレベルを表します
       richText: [{ // 現在のリスト項目のテキストコンテンツを表します。この場合は「circle1」と表示されます
           text: "circle1"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.circle, // リッチテキストをリスト項目で表します。シンボルは白丸(○)です
       level: 1, // リスト項目のレベルを表します
       richText: [{ // 現在のリスト項目のテキストコンテンツを表します。この場合は「circle2」と表示されます
           text: "circle2"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.square, // リッチテキストをリスト項目で表します。シンボルは四角(■)です
       level: 2, // リスト項目のレベルを表します
       richText: [{ // 現在のリスト項目のテキストコンテンツを表します。この場合は「square1」と表示されます
           text: "square1"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.square, // リッチテキストをリスト項目で表します。シンボルは四角(■)です
       level: 2, // リスト項目のレベルを表します
       richText: [{ // 現在のリスト項目のテキストコンテンツを表します。この場合は「square2」と表示されます
           text: "square2"
       }]
   }, {
       type: GC.Spread.Sheets.ListType.disc, // リッチテキストをリスト項目で表します。シンボルは黒丸(●)です
       level: 0, // リスト項目のレベルを表します
       richText: [{ // 現在のリスト項目のテキストコンテンツを表します。この場合は「disc3」と表示されます
           text: "disc3"
       }]
   }];
   sheet.setValue(0, 0, {
       richText: richText
   });
   sheet.setColumnWidth(0, 200);
   sheet.setRowHeight(0, 250);

以下の出力結果が生成されます。

制限事項

リストは、セルのテキストスタイルの wordWrap プロパティが True に設定されている場合にのみ機能します。
リスト項目は改行をサポートしていません。
リストは常に左揃えになります。
テキストの配置を中央または右に設定すると、リストのインデントが正しく表示されない場合があります。
Excel にエクスポートすると、リスト項目は通常のリッチテキストに変換され、SpreadJS とは見た目が異なる場合があります。
リスト項目に別のリストを含めることはできません。

デザイナの使用

以下の手順に従って、SpreadJS デザイナを使用してリッチテキスト書式を適用することもできます。

アクティブセルを右クリックしてコンテキストメニューを開きます。
[リッチテキスト...] オプションを選択します。
リッチテキストダイアログが表示されます。
必要に応じてリッチテキスト書式を適用します。

ショートカットキー

リッチテキストダイアログを使用してリッチテキストをフォーマットするときに、次のショートカットキーを使用できます。

ショートカットキー	アクション
Ctrl/Cmd+Z	取り消し（アンドゥ）
Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z	やり直し（リドゥ）
Ctrl/Cmd+I	イタリック
Ctrl/Cmd+B	太字
Ctrl/Cmd+U	下線
Ctrl/Cmd+K	取り消し線
Ctrl/Cmd+↑	上付き
Ctrl/Cmd+↓	下付き
Ctrl/Cmd+[	インデントを減らす
Ctrl/Cmd+]	インデントを増やす