リッチテキストエリアで文章を装飾する

ツールバーで太字や箇条書きを指定し、装飾付きの文章を保存・表示する方法を説明します。

最終更新日：2026年10月31日

項目の型と入力方法の小目次へ

1. このページで伝える機能

リッチテキストエリアでは、文章を入力しながらツールバーで太字、文字色、箇条書きなどを指定できます。記号やHTMLの構文を覚えずに、伝えたい箇所を目立たせられます。利用できる修飾・編集操作の一覧も確認できます。

受付情報の「対応メモ」を、装飾付きの文章として入力する例です。文字だけを入力する通常のテキストエリアとの違いはテキストエリアの使い分けで確認できます。

2. Wagby11で実現できること

2.1 利用できる修飾・編集操作

文字を装飾するときは対象の文字を選び、段落やリストを整えるときは対象の行にカーソルを置いて操作します。ツールバーで利用できる修飾と編集操作は次のとおりです。

修飾・操作	使い方	表示・用途
太字	文字を選び、「太字」を選ぶ	重要な語句を太く表示します。
斜体	文字を選び、「斜体」を選ぶ	文字を斜めにして強調します。
下線	文字を選び、「下線」を選ぶ	語句に下線を付けます。
取り消し線	文字を選び、「取り消し線」を選ぶ	訂正前の内容などに打ち消し線を付けます。
文字サイズ	「文字サイズ」から選ぶ	小・標準・大・特大の4段階で文字の大きさを変えます。
文字色	文字を選び、「文字色」から色を選ぶ	文字そのものの色を変えます。
背景色	文字を選び、「背景色」から色を選ぶ	文字の背景に色を付け、マーカーのように目立たせます。
番号付きリスト	対象の行で、番号付きのリストボタンを選ぶ	手順などを1、2、3の順番で並べます。
箇条書き	対象の行で、箇条書きのリストボタンを選ぶ	確認事項などを行ごとの箇条書きにします。
インデント	対象の行で、「インデント」の増減ボタンを選ぶ	行の字下げを増減します。リストの階層も表せます。
配置	対象の段落で、「配置」から選ぶ	左揃え・中央揃え・右揃え・両端揃えを指定します。
リンク	文字を選び、「リンク」でURLを指定する	文字からWebページやメールアドレスへのリンクを設けます。
装飾解除	文字を選び、「装飾解除」を選ぶ	選んだ範囲に付けた装飾を解除します。
元に戻す	「元に戻す」を選ぶ	直前の編集を取り消します。装飾そのものではなく、編集を助ける操作です。
やり直し	「やり直し」を選ぶ	「元に戻す」で取り消した編集をやり直します。

同じ文字に太字と文字色などを組み合わせることもできます。画像の挿入は、画像添付の設定を有効にした項目で追加利用できる機能です。このページの画面例では文章の修飾を扱います。

2.2 ツールバーで文章を整える

対応のポイントを太字にし、作業内容を箇条書きにしました。文字を選んで太字や色などを指定し、一覧にしたい行では箇条書きのボタンを使います。

太字と箇条書きで対応メモを入力するリッチテキストエリア — ツールバーで装飾を指定します。本文を入力する領域は8行を目安にしています。

2.3 保存後も装飾を表示する

詳細画面では、太字や箇条書きを反映して表示します。更新画面でも装飾付きのまま再編集できます。一覧ではHTMLタグを除いた文章を表示します。

保存した対応メモの太字と箇条書きが表示された詳細画面 — 入力した文章と装飾を、詳細画面で確認できます。

表示できるHTMLや装飾は標準機能の範囲に制限されます。任意のHTML・CSSを直接編集するエディタではありません。画像の添付は別の設定で有効にできますが、この例では文章の装飾を扱います。

3. AIへの指示例

最小限の指示例

受付情報の対応メモを、太字や箇条書きで入力できるようにしてください。

AIはリッチテキストの入力・表示設定、保存する文字列の長さ、入力領域の高さを類推して補います。装飾したい内容や保存後の表示方法も伝えると、確認すべき点が明確になります。

より詳細な指示例

受付情報（Entry）の対応メモ（notes）を、ツールバー付きリッチテキストエリアにしてください。
・文字列型、最大2000文字とし、任意入力を維持してください。
・登録・更新で太字と箇条書きを使え、入力領域は8行を目安にしてください。
・詳細では装飾付きで表示し、一覧ではHTMLタグを除いた文章を表示してください。
・装飾タグを含む保存値の長さを確認し、太字・箇条書きを保存後も再表示・再編集できることを検証してください。
既存の主キー・項目・権限・データを保持してください。既存の対応メモがある場合は、変換が必要かを先に確認してください。
必要なguide・referenceを確認し、設計情報の検証・コード生成・起動と、画面・保存結果の確認を行ってください。

4. 編集されるAppSchemaの例

文字列項目に、リッチテキストの入力コントロールと表示形式を組み合わせます。

entity:
  attributes:
    - name: 対応メモ
      name_en: notes
      type: string
      length: 2000
ui:
  fields:
    - name_en: notes
      input:
        control: richtext
        rows: 8
      format:
        style: richtext

input.controlがツールバー付きの入力、format.styleが装飾付きの表示を指定します。rowsは入力領域の最小の高さの目安で、保存できる文章の長さとは別です。

5. 参考資料

guide：エンティティ属性タイプ: designer/docs/appschema/html/guide/03-model/02-fields.html
reference：ui（表示形式・入力コントロール）: designer/docs/appschema/html/reference/10-ui.html
reference：entity（文字列・長さ）: designer/docs/appschema/html/reference/06-entity.html