トピック作成時にユーザーにフォームを完了させるべきか？

貢献 特徴
1

トピックを作成する際に、ユーザーにフォームに入力させることは可能でしょうか？（つまり、トピック作成ウィンドウを開いたときに、そのトピック内にユーザーが記入する必要があるフォームが表示されるようにする）

カテゴリ作成時にトピックテンプレートを使用すれば、ユーザーに入力してほしい内容をいくつかのプロンプトとして設定できます。しかし、これはフォームとは異なります。プロンプトは削除できてしまうため（初心者のユーザーはそれらをどう扱えばよいかわからなくなる可能性があります）、また、同じページに複数のプロンプトがあるとページが混雑してしまいます。

トピック作成時にユーザーにいくつかの重要な情報を記入させたい場合、フォームの方がよりクリーンでシンプルなユーザー体験になります。

これは可能でしょうか？私はこのテーマコンポーネントを見つけましたが、それが何をするものか現時点では確信が持てませんが、私の考えていることを実現するものではないと思います。また、数年前にこのリクエストも見つけましたが、何ら対策は取られていないようです。

また、Custom Wizard プラグインを使えばユーザーが記入するフォームを作成できることは知っていますが、今回のケースでは、そのフォームが Discourse のトピック内に存在する必要があるため（そうすることでタグ付けや返信など、トピックとしてのすべての機能が付随する形で表示されるようになります）。さらに、ユーザー体験が明確にアプリ内に留まるようにする必要があります（Wizard プラグインは、異なるメニューなどが表示される別ページにユーザーを誘導してしまう我认为）。

「いいね！」 3
Topic Template Placeholder Text theme component
Topic Template Placeholder Text theme component
2

この機能は、テーマコンポーネント内で技術的には確かに可能です。

「いいね！」 3
3

興味のある方のために、非常に密接に関連する過去のトピック:

「いいね！」 1
4

ありがとうございます。

どのように機能すると思いますか？

いくつかアイデアがありますが、まだ答えなければならない疑問も残っています：

現在ある基本機能：プレースホルダー。しかし現在は『すべてか無か』の状態です

フォームの動作を模倣するために思いつく最もシンプルな構造は、「フォーム」がエディタ（トピック作成ボタンを押した際に表示される「d-editor」）に現れるようにすることです。

そのエディタ内で、以下のような異なる「セクション」を提供できます：

名前

所在地

問題内容

各セクションタイトルはプレースホルダーとして機能し、ユーザーがクリックするとタイトル（例：名前）が消えます。

現時点では、この設定はプレースホルダーテキストテーマコンポーネントを使用して可能です。

ただし、これだけではフォームのような動作にはなりません。現在の実装では、プレースホルダーが「すべてか無か」のように動作するためです。以下に詳しく説明します。

プレースホルダーによるフォームのような動作。しかし、エディタ内の div にどうアクセスするか？

これをよりフォームに近いものにするには、各セクションが独立して動作する必要があります。

現在、プレースホルダーテキストテーマコンポーネントを使用すると、「すべてか無か」の状態になります。ユーザーがエディタをクリックすると、すべてのプレースホルダータイトルが消えてしまいます。

したがって、基本的なフォームの動作を実現するには、すべてのタイトルが表示または非表示になるのではなく、各プレースホルダータイトルセクションが独立して動作する必要があります。つまり、ユーザーが「名前」というプレースホルダーをクリックした際、そのプレースホルダーのみが消え、「所在地」や「問題内容」などの他のプレースホルダーは残るようにする必要があります。

これは、各プレースホルダーがテキストエディタ内の一意の ID を持つ独自の div の一部であれば可能になります。その後、jQuery を使用して、ユーザーがその領域をクリックしたかどうかに応じてプレースホルダーを表示または非表示にできます。これは、現在 textarea である部分に個別の div を追加することを意味しますが、その方法がわかりません。

このアプローチに関する質問：エディタの textarea 内の div にどのようにアクセスし、ユーザーがクリックした際にアクションを実行できるようにするか？

代替案：既存のテンプレートテキストオプションを使用する。しかし、テキストを編集不可にするには？

おそらく代替案として、セクションタイトルがユーザーがクリックしても「消えない」ようにする方法があります。つまり、セクションタイトル（例：名前、所在地、問題内容）はページ上に残るテキストになります。現在の基本的なトピックテンプレートのデフォルトと比較して、よりフォームに近いものにするには：

  1. セクションタイトルのテキストはユーザーが編集できないようにする（つまり、contenteditable="false"）
  2. セクションの区切りポイントはユーザーが削除できないようにする
  3. セクションタイトルの下に、ユーザーが入力できることが明確なスペースを設ける。現在のデフォルトテンプレートでは、ユーザーはテキストの場所に移動し、return キーを押して入力スペースを作成する必要があります。

このアプローチに関する質問：テンプレートテキストを入力しつつ、(i) そのテキストをユーザーが編集できないようにし、(ii) 各テキストの下に入力可能な明確な場所を設けるには？

もしかすると、フォームのような動作を実現するより良い方法があるかもしれません。

「いいね！」 2
5

おそらく、単一のテキストエリアではなく、より複雑な入力フィールドのセットをレンダリングする前に、テンプレートを一度処理する必要があります。

その後、テキストを適切な箇所に挿入するようにポストプロセッシングを行います。

見出しやテキスト入力ポイントを特定するためのマークアップ標準が必要です。

これはより軽量なソリューションになる可能性があります。なぜなら、すべてがフロントエンドの世界で管理されるからです（すべては依然として単一のテキスト投稿として保存されます）。

このアプローチの主な欠点は、この方法では検索や集約がはるかに困難になることです。

楽しそうなプロジェクトのようですね :slight_smile:

6

現時点ではフロントエンドのみに留まるものを検討しています。フォームの各部分を解析したり検索したりする必要は現時点ではなく、また多くのユースケースでも不要だと考えています。これは、ユーザーが回答を一貫した方法で入力していることを確実にするためのものでした。

以下の部分の意味が理解できません。

7

これを見直したいと考えています。フロントエンドで、ユーザーが自分にはフォームのように見える入力欄を埋められる方法があればいいなと思っています。例えば、トピックを作成する際、以下のような表示になるようにしたいです：

「名前」

「所在地」

「問題」

これらはすべてフロントエンドで完結させることができます。ユーザーが提出した内容の各セクションを解析する必要はありません（できれば嬉しいですが、現時点では必須ではありません）。提出内容は現在と同じように送信されれば構いません。目的は、ユーザーからの提出をより均一にし、複数の異なるプロンプトがある場合に、ユーザーにクリーンな UI を提供することです。

現在利用可能なトピックテンプレートを追加する方法との違い：

  1. ユーザーはこれらのプロンプト（つまり「名前」「所在地」「問題」）を削除できませんでした。

  2. 理想的には、ユーザーが入力すべき場所がより明確になるよう、フォーム風のスタイルを追加したいです。これにより、複数の異なるプロンプトがある場合に、トピックを作成するユーザーにとってよりクリーンな UI を実現できます。トピックテンプレートを使用する場合、ユーザーは各プロンプトに対する回答を入力するためのスペースを自分で作成する必要があります。さらに、現在のトピックテンプレートを使用して複数のプロンプトを設定すると、トピック作成ウィンドウがかなり窮屈に見えてしまいます。

@sam 氏は以前、以下のように返信していました：

確かにこれは可能のようです。私の最大の課題は、テーマコンポーネント（またはプラグイン）内で、トピック作成ウィンドウ内に表示されるものをどのように変更できるかということです。現在、試してみましたが、iframe というブラックボックスのように見えてしまいます。

トピックテンプレートや placeholder プラグイン が行っていることを考えると、そこに入る方法があるはずです。しかし、彼らがどのように実装しているかはまだ分かりません。

トピック作成ウィンドウの内容を変更するために、コードで何ができるかに関するヒントはありますか？

「いいね！」 1
8

Discourse テーマの開発者向けガイドをご覧ください。そこから始めましょう。

もしユーザー名と所在地のことを指しているなら、それらはユーザープロフィールに記載されていますので、不要かもしれませんね？

9

返信ありがとうございます。テーマやプラグインの構築方法については熟知しています。ここで求めているのは、トピック作成フォーム内の iframe にアクセスするための具体的なコードに関するガイダンスです。すべてを詳しく説明する必要はありませんが、何かヒントをいただければ幸いです。以前、このフォームに変更を加える方法を見つけるのに苦労しました。

名前や所在地などの例は、一般的なフォームとして仮定したものです。私の場合は、異なるプロンプトが必要になります。

「いいね！」 3
11

トピック作成時にユーザーに入力を促すフォームのようなソリューションにも興味があります。可能であれば、フィールドの一部を必須にするオプションがあると嬉しいです。これらのデータの一部は機密情報である可能性があるため、トピックのカスタムフィールドに保存したいと思います。

「いいね！」 1
12