リッチテキスト

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