こんにちは、Discourse Metaコミュニティ！
新しい実験的な機能、フォームテンプレートをご紹介できることを嬉しく思います。これを使用すると、トピック作成フローの一部として、データ検証を含む構造化されたフォームを強制できます。
機能の有効化
この機能は、サイト全体の実験的なフラグの背後に隠されています。有効にするには、
管理 ▸ 設定の下にある experimental_form_templates サイト設定をオンにするだけです。
テンプレートの管理
フォームテンプレートは、 管理 ▸ カスタマイズ ▸ テンプレート (/admin/customize/form-templates/) で作成、編集、削除できます。
そこには、フォーラムに存在するテンプレートのリストを含むテーブルが表示されます。既存のテンプレートを編集、削除、プレビューしたり、新しいテンプレートを作成したりできます。テーブルには、各テンプレートが現在アクティブになっているカテゴリも表示されます。
テンプレートはYAML構造で定義されます。これを手動で入力するか、上部にある「追加」ボタンを利用して、特定の入力タイプを定義するサンプルYAMLコードを末尾に追加できます。
すべてのフィールドタイプを含む完全なYAML例を次に示します。
- type: input
id: name
attributes:
label: "Full name"
placeholder: "eg. John Smith"
description: "What is your full name?"
validations:
required: true
minimum: 2
maximum: 100
- type: textarea
id: introduction
attributes:
label: "Introduction"
placeholder: "A short introduction"
description: "Write a short introdution about yourself"
validations:
required: true
minimum: 10
maximum: 500
- type: dropdown
id: fav-animal
attributes:
label: "Favorite animal"
description: "Select your favorite animal"
none_label: "Select an option"
choices:
- "Dog"
- "Cat"
- "Other"
validations:
required: true
- type: multi-select
id: comm-channel
attributes:
label: "Communication channels:"
description: "Select your preferred communication channels:"
none_label: "Select an option"
choices:
- "Email"
- "Phone"
- "Messenger"
- type: upload
id: cat-photo
attributes:
label: "Cat photo"
description: "Send a photo of your cat (or any cat)"
file_types: ".jpg, .png"
allow_multiple: false
- type: checkbox
id: accept-terms
attributes:
label: "I have read and I agree to the terms"
description: "You need to accept terms to continue"
validations:
required: true
検証
各フィールドには、フォームを送信する前に合格する必要がある検証オプションを追加できます。利用可能な検証のリストについては、コードエディターの上にある「検証」ボタンをクリックしてください。これにより、各検証オプションの構文が表示され、その意図された使用方法が説明されます。
検証オプション
| キー | タイプ | 説明 |
|---|---|---|
| required | boolean | フォームを送信するにはフィールドを完了する必要があります |
| minimum | integer | テキストフィールドの場合、許可される最小文字数を指定します |
| maximum | integer | テキストフィールドの場合、許可される最大文字数を指定します |
| pattern | regex string | テキストフィールドの場合、許可される入力を指定する正規表現 |
| type | string | 入力フィールドの場合、期待される入力のタイプを指定できます（text|email|date|number|url|tel|color） |
カテゴリへのテンプレートの適用
フォームテンプレートを作成したら、それをカテゴリに適用したくなります。これを行うには、テンプレートを適用したいカテゴリの設定に移動します。
「テンプレート」メニューを選択し、右側にあるスイッチを使用してフォームテンプレートをオンにします。有効になったら、ドロップダウンを使用して1つ以上のテンプレートをカテゴリに追加できます。
フォームへの入力
テンプレートがカテゴリに適用されると、テンプレートが適用されているカテゴリを選択してトピックを作成する際に、テンプレートのフォームが自動的に表示されます。カテゴリに複数のテンプレートが割り当てられている場合は、利用可能なテンプレートを切り替えるためのピッカーも表示されます。
フォームに入力する際、フォームテンプレート定義で指定された検証に従い、有効になった後にのみ「
トピックを作成」をクリックでき、すべての入力フィールドからトピックコンテンツが生成されます。
最後に、送信後、トピックコンテンツはすべての入力済みフィールドで構成されます。
フォーム値の事前入力
フォームテンプレートで定義されたフィールドIDに一致するパラメータを使用して /new-topic を呼び出すことでも、フォーム値を事前入力できます。たとえば、以前の例として使用されたテンプレートの場合：
/new-topic?name=John%20Smith&favorite-animal=Cat
ロードマップ
- トピックが作成されたときにJSON出力をトピックデータに保存する
- フォームテンプレートが設定されたカテゴリで、自由形式のコンポーザーを選択して使用できるようにするトグル
協力方法
この新機能に関するフィードバックをお待ちしています。管理者の場合は、フォーラムで試してみたい場合は、experimental_form_templates 設定をオンにして、すぐに使用を開始できます！
経験を共有したり、バグを報告したり、提案を提供したりするために、form-templates タグを付けて新しいトピックを開始してください。
Discourseをより良くするためにご協力いただきありがとうございます！
