WAGBY11 MANUAL / 03
マークダウン対応テキストエリアを使う
Markdownの記号を含む文章を入力し、詳細画面で見出しやリストとして表示する方法を説明します。
最終更新日：
1. このページで伝える機能
マークダウン対応テキストエリアでは、見出しや強調などを表す簡単な記号を使って文章を入力できます。入力時は記号を含むテキストを編集し、詳細画面で読みやすく整形して表示します。利用できるMarkdown記法の一覧も確認できます。
受付情報の「対応メモ」に、見出し・太字・リストを含む文章を入力する例です。ツールバーで装飾を指定したい場合はリッチテキストエリアを使います。
2. Wagby11で実現できること
2.1 利用できるMarkdown記法
次の入力例を、対応メモのテキストエリアへ記述できます。表の入力例にある改行や空白も記法の一部です。整形した結果を表示するのは詳細画面です。
| 記法 | 入力例 | 表示・用途 |
|---|---|---|
| 見出し | # 大見出し
## 中見出し
### 小見出し | 行頭の#の数で見出しの大きさを変えます。#から######までの6段階です。#の後ろに空白を入れます。 |
| 太字 | **重要な点** | 語句を太字で強調します。 |
| 斜体 | *補足の語句* | 語句を斜体で表示します。 |
| 取り消し線 | ~~変更前の内容~~ | 語句に打ち消し線を付けます。 |
| 箇条書き | - 設置場所を確認
- 担当者へ連絡 | 行頭に-と空白を付けて、箇条書きにします。 |
| 番号付きリスト | 1. 受付する
2. 内容を確認する | 手順を番号順に並べます。番号とピリオドの後ろに空白を入れます。 |
| リストの入れ子 | - 準備する
- 資料を印刷する
- 会場へ連絡する | 子の行を字下げして、リストを階層化します。 |
| タスクリスト | - [ ] 未確認
- [x] 確認済み | 未完了・完了をチェックボックスの形で表示します。詳細画面のチェックボックスは操作用ではなく、原文で指定した状態の表示です。 |
| 引用 | > お客様からの連絡内容 | 引用した文章を区別して表示します。 |
| 行内コード | 設定値は `enabled` です。 | 文中の短いコードや設定名を等幅文字で表示します。 |
| コードブロック | ```text
確認用のコードや設定
複数行で記述できます
``` | 複数行のコードを、まとまりとして表示します。 |
| 区切り線 | --- | 文章の区切りに横線を表示します。前後に空行を入れて記述します。 |
| 表 | | 項目 | 内容 |
| --- | --- |
| 担当 | 営業部 |
| 期限 | 月末 | | 縦棒で列を分け、2行目で見出し行を区切ります。 |
| リンク | [参考資料](https://example.com/) | リンク先へ移動する文字を指定します。http・https・mailtoのリンクを利用できます。 |
| URLの自動リンク | https://example.com/ | WebのURLをそのまま書いてもリンクになります。 |
| 改行と段落 | 1行目
2行目
次の段落 | 入力した改行を表示に反映します。空行を入れると段落を分けられます。 |
| 記号をそのまま表示 | \*印を付けた語句\* | 記法として扱われる記号の前にバックスラッシュを付け、文字として表示します。 |
生のHTMLを記述してもHTMLの装飾としては解釈しません。画像のMarkdown記法は、画像表示に対応していません。
2.2 Markdownの記号で文章を入力する
見出しは##、太字は**文章**、箇条書きは行頭の-で表します。次の例では、対応のポイントと作業内容を記号付きで入力しています。
2.3 詳細画面で整形された文章を読む
保存後の詳細画面では、見出し・太字・リストとして表示します。登録・更新ではMarkdownのソースを入力するため、詳細の表示と入力時の見た目は異なります。
見出し、強調、取り消し線、リスト、引用、コード、表、リンク、タスクリストを利用できます。生のHTMLはHTMLとして解釈せず、画像は表示しません。安全なリンク先に制限して表示します。
3. AIへの指示例
最小限の指示例
対応メモをMarkdownで入力し、詳細画面で見やすく表示してください。AIはテキストエリアとMarkdown表示の組み合わせ、長さ、表示行数を類推して補います。入力・詳細・一覧でどのように見せたいかを伝えると、確認しやすくなります。
より詳細な指示例
受付情報（Entry）の対応メモ（notes）を、Markdown対応テキストエリアにしてください。
・文字列型、最大2000文字とし、任意入力を維持してください。
・登録・更新では8行を目安にMarkdownのソースを入力します。
・詳細画面では見出し、太字、箇条書きを整形して表示してください。
・一覧、確認画面、REST API、ダウンロードはソースのままであることを確認してください。
・見出しと太字と箇条書きを含む文章を保存し、詳細で整形され、更新では元の記号付き文章を編集できることを検証してください。
既存の主キー・項目・権限・データを保持してください。既存の文章をどう表示するかを先に確認してください。
guide・referenceを確認し、設計情報の検証・コード生成・起動と、画面・保存結果の確認を行ってください。4. 編集されるAppSchemaの例
通常のテキストエリアにMarkdownの表示形式を組み合わせます。
entity:
attributes:
- name: 対応メモ
name_en: notes
type: string
length: 2000
ui:
fields:
- name_en: notes
input:
control: textarea
size: 60
rows: 8
format:
style: markdownformat.style: markdownが詳細画面の整形表示を指定します。保存値はMarkdownソースです。input.control: textareaと組み合わせて使用します。
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