シェイプ上のテキスト

SpreadJSでは、次のいずれかの方法でシェイプ上にテキストを追加したり編集したりすることができます。

• シェイプをダブルクリックする

• シェイプを選択してEnterキーを押す

• シェイプを右クリックし、コンテキストメニューから [テキストの編集] を選択します。

シェイプにテキストの追加や編集する際、テキストエディタが表示され、シェイプ以外にクリックすると非表示します。ただし、シェイプが編集状態でない場合、テキストの選択をサポートしません。また、シェイプの角をドラッグしてダイアログをリサイズする場合、水平方向のサイズのみ変更されます。

isTextBox プロパティを true に設定される場合、シェイプをクリックする／選択することで、シェイプ内のテキストを追加または編集することができます。

// シェイプにテキストを追加するには、isTextBox プロパティをtrueに設定します。
shape.isTextBox(true);

使用例

本使用例では、会議を開催するために会議室の座席計画を検討します。会議には重要な方のグループが参加することになっているため、座席配置は前もって計画されています。各席はオートシェイプで表現され、メンバーの名前はシェイプのテキストを使用して記載されます。変更があった場合は、名前の追加、編集、または削除も可能です。

シェイプ上テキストの動作

テキストエディタおよびテキストは、シェイプの動作に従います。例えば、シートに対してズームアクションを実行すると、テキストエディタとテキストのサイズも変更され、再配置されます。

行または列が固定されている場合、スクロールするとシェイプが折り返されます。ただし、テキストは影響を受けず、そのまま同じ場所に残ります。

シェイプを回転させると、テキストエディタとテキストが回転します。

テキストエディタでは、コンテンツの高さに応じてシェイプの高さを設定することもできます。

また、resizeToFitText プロパティを true に設定すると、テキストボックスシェイプの高さをコンテンツに応じてリサイズされます。

// シェイプの高さを自動調整するには、resizeToFitText を true に設定します。
var oldStyle = shape.style();
oldStyle.textFrame.resizeToFitText = true;
shape.style(oldStyle);

テキストエディタの動作

テキストエディタは、テキストの入力中に行を自動的に折り返し、テキスト領域を自動的に拡張します。

シェイプを選択してEnterキーを押下すると、シェイプにあるすべてのテキストが選択されます。Escキーを押すと、編集が終了します。

シェイプテキストでは、IME入力もサポートされています。

シートが保護されている場合、テキスト入力は以下のようになります。

• シェイプがロックされていて、オブジェクトの編集が有効（ options.protectionOptions.allowEditobject がtrue）の場合、テキスト入力が可能です。

• シェイプがロックされていて、オブジェクトの編集が無効の場合、テキスト入力はできません。

• シェイプのロックが解除されている場合、テキスト入力が可能です。

SpreadJSデザイナでの設定

SpreadJSデザイナでシェイプを追加する場合、シェイプのコンテキストメニューから［コメントの編集］オプションを選択し、シェイプにテキストを設定することができます。

また、シェイプをダブルクリックすると、テキストエディタとともに図の書式設定パネルが表示され、文字のオプションから、文字色やフォント、配置を設定することができます。なお、リッチテキストはサポートされていません。

テキスト方向

SpreadJS は、ドキュメントやレポート内のシェイプにおけるテキストの向きと流れを制御できます。テキスト方向を調整することで、テキストを横書き、縦書き、または積み重ね形式で表示できます。

この機能は、図表やレポートの視覚的プレゼンテーションを強化するうえで非常に効果的であり、従来から縦書きを利用してきた東アジア言語（日本語、中国語、韓国語など）のレイアウト規則に対応するために不可欠です。

次の表は、SpreadJS がサポートするすべてのテキスト方向設定を示しています。

使用手順

SpreadJS は、APIを使用したコードによる設定と、デザイナ上での設定操作のいずれかの方法で、シェイプ内のテキスト方向を設定できます。

API を使用する場合

GC.Spread.Sheets.Shapes.TextDirection には 7 種類の列挙値があり、それぞれが異なるテキスト方向を表します。シェイプのテキスト方向を設定するには、シェイプの style.textFrame 内の textDirection プロパティに、希望する TextDirection 列挙値を割り当てます。

以下のコードを使用して、テキスト方向を wordArtVertRtl に設定した長方形を作成します。

 var rectangleShape = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 60, 200, 160);
 var style = rectangleShape.style();
 style.textFrame.textDirection = GC.Spread.Sheets.Shapes.TextDirection.wordArtVertRtl;
 rectangleShape.style(style);
 rectangleShape.text('これはサンプルテキストです。');

デザイナーを使用する場合

1. 対象シェイプを選択: 編集するテキストを含むシェイプをクリックします。リボンに [図形の書式] タブが有効になります。

2. 書式ウィンドウを開く: [書式ウィンドウ] ボタンをクリックしてサイドバーを起動します。

3. テキスト設定に移動

(1) [文字のト オプション] を選択してテキスト書式のカテゴリにアクセスします。

(2) [テキスト ボックス] を選択して詳細なテキストプロパティを表示します。

4. テキスト方向を変更

(1) [テキストの方向] プロパティを探します。

(2) 現在の向きの値の横にあるプルダウン矢印をクリックします。

(3) 次の標準化されたオプションから選択します：

5. 利用可能なオプションから希望するテキスト方向を選択します。シェイプ内のテキストが選択した方向に更新されます。

重要ポリシー

1. テキストの折り返しと改行

シェイプ内のテキストは、シェイプの境界と設定されたテキスト方向に応じて自動的に次の行に折り返されます。

これらの折り返し規則と改行規則は、アプリケーション内の通常のセルにおける挙動と一致しています。

2. シェイプ内テキストの編集

横書き以外の方向を持つシェイプ内のテキストを編集するとき、テキストは常に標準的な横書き形式で表示および編集されます。縦書きや積み重ね方向は編集終了後にのみ表示用として適用されます。

3. 自動でシェイプサイズを調整

シェイプを手動でリサイズすると、その時点のテキスト方向に基づいて、シェイプ内のテキストレイアウトが自動的に調整されます。

• テキスト方向が横書きの場合、シェイプの幅を変更すると、テキストは新しい幅に合わせて再配置されます。

• テキスト方向が縦書きの場合、シェイプの高さを変更すると、テキストは新しい高さに適応します。

シェイプをテキストに必要なサイズより小さくリサイズした場合、境界外のテキストは自動的に非表示となり、表示されません。

4. 不規則シェイプにおけるテキスト方向

単純な長方形以外のシェイプでは、テキストはシェイプのテキスト領域を囲む長方形枠内に収めて配置されます。

5. デザイナーでのカルチャ別テキスト方向オプション

Excelと整合するために、Designerツールは横書き、縦書き、すべてのテキストを90°回転、すべてのテキストを270°回転、積み重ね、の5種類のテキスト方向オプションを提供します。このうち「積み重ね」設定は、現在使用されているカルチャに応じて挙動が異なります。

以下の表は具体的なサポート内容を示しています。