URLコンポーザーテンプレート

Drew-ART · 2025 年 11 月 24 日午後 11:49

私のサイトにはかなり専門的なコンポーネントですが、役立つかもしれないのでここに共有します。URL内の文字列に基づいて、コンポーザーにテンプレートを追加します。

タグ用のコンポーザーテンプレートを持つことについては多くの議論がありましたが、私のユースケースでは機能しなかったので、代わりにこれを構築しました。これは緊急時に使用することも、タグにも機能するように少し変更することもできます。

GitHub: GitHub - focallocal/url-composer-templates: Reads url strings and adds template text to the composer if a match is found

URLコンポーザテンプレート

URLパラメータに基づいてコンポーザーをテンプレートテキストで事前入力するDiscourseテーマコンポーネント。さまざまな種類のやり取りに対してコンテキスト固有のテンプレートを提供するために、Docussとシームレスに連携するように設計されています。

特徴

URLパラメータサポート: URL内の?composer_template=Xを自動的に検出し、対応するテンプレートを適用します。
複数のテンプレートタイプ: さまざまな目的（レポート、参加、招待、カスタムテンプレート）のために最大6種類のテンプレートを設定可能
コンポーザーの自動オープン: スレッドが存在しないDocussリンクにアクセスした際に、コンポーザーを自動的に開くオプション
柔軟な適用: テンプレートは最初の投稿のみ、すべての返信、またはその両方に適用可能
セッション永続性: sessionStorageを使用して、ページナビゲーション間でテンプレートの選択を維持します
デバッグモード: テンプレートの適用をトラブルシューティングするために、詳細なコンソールロギングを有効にします

インストール

Discourseにテーマコンポーネントをインストールします:
- 管理 → カスタマイズ → テーマに移動します
- 「インストール」→「Gitリポジトリから」をクリックします
- 次のURLを入力します: https://github.com/focallocal/url-composer-templates
- コンポーネントをアクティブなテーマに追加します
プラグインの再ビルドは不要です! composer_templateパラメータのサポートは、すでにdcs-discourse-pluginおよびdcs-clientに存在します。
Reactアプリ（fl-maps）をデプロイします。composerTemplateプロパティを渡す更新されたDCSLinkコンポーネントを使用します。
コンポーネント設定でテンプレートを設定します（管理 → カスタマイズ → テーマ → お使いのテーマ → url-composer-templates → 設定）。

設定

テンプレート設定

各テンプレートには3つの設定オプションがあります。

テンプレート1（レポート）

template_1_id: report - このテンプレートをトリガーするURLパラメータの値
template_1_text: コンポーザーに事前入力するテキスト
template_1_use_for: first_post - 新しいトピックを作成する場合にのみ適用

テンプレート2（参加）

template_2_id: going - 「参加します」タイプのインタラクション用
template_2_text: 参加確認のための事前入力テキスト
template_2_use_for: all_replies - すべての返信に適用（最初の投稿には適用しません）

テンプレート3（招待）

template_3_id: invite - 招待インタラクション用
template_3_text: 招待のための事前入力テキスト
template_3_use_for: all_replies - すべての返信に適用

テンプレート4-6（カスタム）

デフォルトでは無効
特定のユースケースのために有効化およびカスタマイズ可能
必要に応じてID、テキスト、適用範囲を設定します

自動オープン設定

enable_auto_open_composer: true - 有効にすると、次の場合にコンポーザーが自動的に開きます。
- Docussリンクがクリックされた場合（URLに?composer_template=Xが含まれる）
- そのタグの組み合わせに対する既存のスレッドがない場合
- ユーザーがすぐにディスカッションを開始できるように支援します

デバッグモード

debug_mode: false - 有効にすると、絵文字プレフィックス付きの詳細なコンソールログが表示されます。
- テンプレート適用ログ
- コンポーザー自動オープンログ

Docuss統合

自動統合

url-composer-templatesコンポーネントは、Docussと自動的に連携するように設計されています。両方を持っている場合:

Discourseインスタンスにこのコンポーネントがインストールされている
更新されたDocussクライアントとプラグイン（composer_templateサポート付き）

テンプレートは次に基づいて自動的に適用されます。

インタラクトモード:
- DISCUSSモード → triggerIdヒント（going、invite）を使用するか、reportにデフォルト設定されます
- COMMENTモード → reportテンプレートを使用します

HTML属性によるカスタムテンプレート

より正確な制御のために、HTMLでdata-dcs-composer-template属性を使用してテンプレートを直接指定できます。

<!-- 例: レポートボタン -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  問題を報告する
</div>

<!-- 例: 参加ボタン -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  参加します！
</div>

<!-- 例: 招待ボタン -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  友達を招待
</div>

<!-- 例: カスタムテンプレート -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  フィードバックを送信
</div>

テンプレートIDのマッチング

コンポーネントは、URLパラメータからのテンプレートIDと設定されているテンプレートIDを照合します。

URLパラメータ	テンプレート設定	デフォルトの目的
`?composer_template=report`	`template_1_id`	バグレポート、問題
`?composer_template=going`	`template_2_id`	イベントの出欠確認
`?composer_template=invite`	`template_3_id`	招待
`?composer_template=custom1`	`template_4_id`	カスタム使用
`?composer_template=custom2`	`template_5_id`	カスタム使用
`?composer_template=custom3`	`template_6_id`	カスタム使用

仕組み

テンプレート適用フロー

URL検出: ユーザーが?composer_template=Xを含むURLに移動すると、コンポーネントはこのテンプレートIDをsessionStorageに保存します
コンポーザーの傍受: コンポーザーが開くと、コンポーネントは保存されているテンプレートIDをチェックします
テンプレートのマッチング: IDに基づいて一致するテンプレートを見つけます
スコープの検証: テンプレートを適用すべきか（最初の投稿、返信、またはその両方）をチェックします
テキストの挿入: コンポーザーにテンプレートテキストを事前入力します
クリーンアップ: 再適用を防ぐために、テンプレートが適用済みであることをマークします

自動オープンフロー

パラメータ検出: URLに?composer_template=Xが含まれているか、自動オープンが有効になっているかを確認します
トピック検索: 現在のタグの組み合わせを持つ既存のトピックを検索します
コンポーザーのオープン: トピックが見つからない場合、コンポーザーを自動的に開きます
テンプレートの適用: その後、上記の通常のフローを通じてテンプレートが適用されます

使用例

イベントウェブサイト

# settings.yml
template_2_id: "going"
template_2_text: "参加する予定です！🎉\n\n皆さんにお会いできるのを楽しみにしています。"
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "このイベントに友達を招待したいです。\n\n招待する人:\n- \n\n招待する理由:\n"
template_3_use_for: "first_post"

課題追跡

template_1_id: "bug"
template_1_text: "**バグの説明:**\n\n**再現手順:**\n1. \n2. \n3. \n\n**期待される動作:**\n\n**実際の動作:**\n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: "**機能リクエスト:**\n\n**ユースケース:**\n\n**提案される解決策:**\n"
template_4_use_for: "first_post"

コミュニティエンゲージメント

template_1_id: "question"
template_1_text: "**私の質問:**\n\n**試したこと:**\n\n**追加のコンテキスト:**\n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "私にとってうまくいったのは次のとおりです。\n\n**解決策:**\n\n**動作の理由:**\n"
template_2_use_for: "all_replies"

トラブルシューティング

テンプレートが適用されない場合

URLパラメータを確認: URLに、テンプレートIDと一致する?composer_template=Xが含まれていることを確認します
デバッグモードを有効にする: 設定でdebug_modeをオンにして、コンソールログを確認します
テンプレートスコープを確認: use_for設定がアクション（トピック作成 vs 返信）と一致しているか確認します
SessionStorageをクリア: ブラウザコンソールを開き、次を実行します: sessionStorage.clear()

自動オープンが機能しない場合

設定を確認: enable_auto_open_composerがtrueに設定されていることを確認します
URLを確認: 自動オープンは、URLに?composer_template=Xが含まれている場合にのみ機能します
既存のトピックを確認: 自動オープンは、タグの組み合わせを持つトピックが存在しない場合にのみトリガーされます
デバッグモードを有効にする: コンソールで🚀絵文字ログを探します

間違ったテンプレートが適用される場合

テンプレートIDを確認: URLパラメータがテンプレートIDと完全に一致していることを確認します（大文字と小文字が区別されます）
優先順位を確認: 複数のテンプレートが一致する可能性がある場合、最初に一致したテンプレートが使用されます
セッションをクリア: SessionStorageに古い値が残っている可能性があります: sessionStorage.clear()

Docuss統合の問題

Docussを更新: 次の最新バージョンがあることを確認します。
- dcs-client（HtmlBased.jsでcomposerTemplateサポート付き）
- dcs-discourse-plugin（DcsIFrame.js.es6でURLパラメータ生成サポート付き）
HTML属性を確認: トリガーにdata-dcs-composer-templateが正しく設定されていることを確認します
ネットワークを検査: ブラウザの開発者ツールの[Network]タブを確認し、URLパラメータが追加されているか確認します

バージョン履歴

v1.0.0（現在）

初期リリース
設定可能な6つのテンプレートのサポート
URLパラメータに基づくテンプレート選択
Docussリンク用のコンポーザー自動オープン
SessionStorageの永続性
トラブルシューティングのためのデバッグモード

貢献

バグを見つけましたか、それとも機能リクエストがありますか？GitHubリポジトリでイシューを開いてください。

ライセンス

このコンポーネントはオープンソースであり、MITライセンスの下で利用可能です。

クレジット

Andy@Focallocalが、任意のウェブサイトにDiscourseディスカッションを埋め込むためのシステムであるDocussと連携して開発しました。

トピック		返信	表示
Reply Template Theme component official , reply-template	57	9634	2025 年 11 月 2 日
Open composer for existing topic/personal message via URL Support	6	1861	2022 年 4 月 7 日
Use template as new topic not working in Docs Bug docs	4	634	2021 年 10 月 26 日
Setting default tag per category in a theme component Dev	3	905	2021 年 10 月 22 日
Prefilled composer link generator Theme component	2	329	2024 年 9 月 14 日