項目の間に見出し・説明文を配置する

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

モデルの入力項目とは独立した見出しや説明文を、項目の前後に配置できます。入力する順序に沿って案内を置き、複数の項目に共通する注意事項や、連絡先を収集する目的を伝えられます。

ここでは、氏名とメールアドレスを登録する「見学申込」を例に説明します。見出しや案内文のために、データを保存する項目を増やす必要はありません。

2. Wagby11で実現できること

2.1 見出し・説明文・項目を順に並べる

一つのセクション内で「申込者情報」の見出し、氏名の入力案内、氏名欄、「連絡先の確認」の小見出し、連絡先の案内、メールアドレス欄の順に並べています。入力欄から離れた場所にも、複数行の説明文を表示できます。

見出しは内容の階層を表します。この例では「申込者情報」をレベル2、その中の「連絡先の確認」をレベル3にしています。文字を大きくする目的だけで階層を変えず、文字サイズや色は表示スタイルで調整します。

2.2 保存後の画面にも案内を表示する

登録・更新・詳細画面に同じ配置を指定できます。保存後の詳細画面では、入力した氏名とメールアドレスが表示され、見出しと説明文も残ります。更新画面でも同じ順序で案内を確認できます。

説明文はレイアウトに用意する固定の文章です。利用者が入力・保存する値ではなく、申込ごとに変わるコメントや備考を記録する用途には文字列項目を用意します。

2.3 説明の置き場所を使い分ける

説明文にHTMLタグを書いても、装飾としては解釈されず文字として表示されます。改行を残す指定や文字色など、どのように表示したいかをAIへ伝えてください。PCとモバイルは同じレイアウト定義を使い、狭い画面では項目が一列になっても、見出し・説明文・項目の順序は維持されます。

2.4 見出しと説明文を装飾する

同じ見学申込の画面へ装飾を加えた例です。セクション名の左に青い線を付け、「申込者情報」の見出しには薄い背景を付けています。「連絡先の確認」の小見出しには余白と角丸を、案内文には淡い黄色の背景と枠を付け、読む範囲を分かりやすくしています。

装飾には、表示要素へCSSクラスを付ける方法と、文字色などを直接指定する方法があります。この例では、Web UIが読み込む既存のCSSクラスを使って枠線・余白・角丸を付け、文字色や背景色を直接指定しています。登録・更新画面にも同じ装飾を適用できます。装飾を変えても、見出しの階層や保存済みの値は変わりません。

CSSクラス名を付けるだけでは新しい装飾は作られません。独自のクラスを使いたい場合は、そのクラスを定義したスタイルシートをWeb UIで読み込む作業も必要です。AIには、利用できる既存クラスで実現するか、独自CSSの用意が必要かも確認するよう伝えてください。

styleで指定できるのは、文字色、背景色、フォント、文字サイズ・太さ、行間・字間、文字の装飾、空白・改行の扱いです。余白・枠線・角丸にはCSSクラスを使います。色だけに意味を持たせず、見出しと説明文を読んでも内容が分かるようにします。入力値に応じて色を変える場合は、一覧・詳細の項目スタイルを参照してください。

3. AIへの指示例

最小限の指示例

見学申込の氏名とメールアドレスの入力欄の前に、それぞれ見出しと入力案内を付け、背景色・枠線・余白で読みやすくしてください。

AIは、対象画面、見出しの文言と階層、説明の長さや配置、装飾する範囲やCSSクラスの組み合わせを類推して補います。例えば、氏名の前には申込者の案内、メールアドレスの前には連絡先の用途を説明する文章を提案することがあります。最小限の指示だけで、以下の詳細例と同じ文言・配色・画面構成になるとは限りません。

より詳細な指示例

見学申込（DisplayContent）モデルを用意してください。自動採番の申込IDを主キーとし、氏名（applicantName、文字列80文字）とメールアドレス（email、文字列100文字）を必須にします。
登録・更新・詳細画面に、次の順序で案内と項目を並べてください。
・枠付きセクション名は「見学申込の入力案内」とし、青字の太字にする。
・レベル2の見出し「申込者情報」。
・説明文「見学される方のお名前を入力してください。」。
・氏名欄。
・レベル3の見出し「連絡先の確認」。白字、青い背景にする。
・説明文「日中に確認できるメールアドレスを入力してください。」の次の行に「連絡先は見学日程のご案内に使用します。」を表示する。
・メールアドレス欄。
装飾を加えた画面も用意してください。セクション名の左に青い線と余白を付け、「申込者情報」は薄い灰色の背景と余白・角丸にします。「連絡先の確認」は白字・青背景のまま余白・角丸を付けます。連絡先の案内文は濃い茶色の文字と淡い黄色の背景にし、枠線・余白・角丸を付けてください。
余白・枠線・角丸にはWeb UIで読み込まれる既存のCSSクラスを、色や文字の調整にはstyleを使ってください。セクション名の装飾はtitle_presentationへ指定します。独自のCSSクラスを追加する場合はスタイルシートの定義と読み込みも必要か確認し、クラス名の指定だけで完成としないでください。
案内は保存するモデル項目にせず、uidefsのcontentsで定義してください。検索一覧には申込ID・氏名・メールアドレスを表示してください。
既存のモデル・主キー・データ・権限を保持し、Wagby11のguide・referenceを確認してください。利用者のロールに応じた権限、メニュー、一般利用者向け操作マニュアルを用意し、生成・ビルド後に登録・更新・詳細画面と保存結果を確認してください。

4. 編集されるAppSchemaの例

4.1 見出し・説明文・項目を並べる

以下は、見学申込の画面配置を定義するuidefs/DisplayContent.yamlの例です。構文を覚える必要はありません。表示する文章と項目の順序を伝えると、AIがレイアウトへ反映します。

version: 1
layouts:
  - screens: [create, update, detail]
    form_button_position: top
    sections:
      - title: 見学申込の入力案内
        border: outline
        direction: column
        title_presentation:
          style: { color: "#0879cf", font-weight: "700" }
        contents:
          - type: heading
            level: 2
            text: 申込者情報
            style: { color: "#1f2937", font-size: "1.25rem", font-weight: "700" }
          - type: text
            text: 見学される方のお名前を入力してください。
            style: { color: "#52616b", line-height: "1.6" }
          - type: field
            name_en: applicantName
          - type: heading
            level: 3
            text: 連絡先の確認
            style: { color: "#ffffff", background-color: "#0879cf", font-size: "1rem", font-weight: "700" }
          - type: text
            text: |-
              日中に確認できるメールアドレスを入力してください。
              連絡先は見学日程のご案内に使用します。
            style: { color: "#52616b", line-height: "1.6", white-space: pre-wrap }
          - type: field
            name_en: email

contentsには、見出し（heading）、説明文（text）、モデル項目（field）を表示順に並べます。項目のname_enには、モデルに定義済みの項目名を指定します。同じセクションにfieldsや子のsectionsを併記せず、配置方法を一つにします。

セクション名はtitle、その文字の表示指定はtitle_presentationです。複数行の説明はブロック文字列とwhite-space: pre-wrapで改行を保っています。styleは表示の調整であり、入力値の検証や保存内容を変更しません。

4.2 CSSクラスとスタイルを組み合わせる

装飾を加えた定義から、セクション名・見出し・説明文の指定を抜粋します。氏名とメールアドレスのfieldは省略しています。class_namesは複数のクラス名を配列で指定できます。

title: 見学申込の入力案内
title_presentation:
  style:
    color: '#0879cf'
    font-weight: '700'
  class_names:
  - border-start
  - border-4
  - border-primary
  - ps-3
contents:
- type: heading
  level: 2
  text: 申込者情報
  style:
    color: '#1f2937'
    font-size: 1.25rem
    font-weight: '700'
  class_names:
  - bg-light
  - p-2
  - rounded
- type: heading
  level: 3
  text: 連絡先の確認
  style:
    color: '#ffffff'
    background-color: '#0879cf'
    font-size: 1rem
    font-weight: '700'
  class_names:
  - p-2
  - rounded
- type: text
  text: '日中に確認できるメールアドレスを入力してください。

    連絡先は見学日程のご案内に使用します。'
  style:
    color: '#664d03'
    line-height: '1.6'
    white-space: pre-wrap
    background-color: '#fff8e1'
  class_names:
  - border
  - rounded
  - p-2

border-startなどはWeb UIで読み込まれるCSSの既存クラスです。CSSクラス名の先頭に.は付けず、英字または_で始まり、英数字・_・-で構成される名前を指定します。title_presentationはタイトルを表示するセクションで使います。

styleで指定できるプロパティはcolor、background-color、font-family、font-size、font-style、font-weight、line-height、letter-spacing、text-decoration、white-spaceです。値は文字列で記述します。url()・expression()・@import、波括弧・山括弧を含む値は指定できません。

5. 参考資料

guide：見出し、セクション、説明文

designer/docs/appschema/html/guide/06-layout/12-display-content.html

reference：uidefs画面レイアウト定義

designer/docs/appschema/html/reference/15-ui-layout.html