template-builder-ui

Sent テンプレートビルダー UI

Sent の v3 definition 契約を中心にインターフェースを設計します。UI で Meta の素材をインポートすることはできますが、保存および送信される正規モデルに Meta の components[] ペイロードを使用してはいけません。

プロダクトモデル

次の項目を含む 1 つのドラフトオブジェクトを使用します。

• 任意の category および language；
• 必須の definition.body.multiChannel；
• 任意の、sms、whatsapp、rcs 用の完全な本文オーバーライド；
• 任意の definition.header、footer、buttons、definitionVersion、authenticationConfig；
• creation_source、submit_for_review、sandbox の送信制御。

トップレベルの作成フィールドとして、name、channels、body、header、buttons という名前のものを公開してはいけません。プロダクトで内部表示用ラベルが必要な場合は、Sent の作成ペイロードの外部に保持します。

推奨するエディターの手順

1. 意図とカテゴリを確認します。
2. multiChannel の本文を作成します。
3. 変数を構造化エンティティとして挿入します。
4. 任意のチャネル別オーバーライドを追加します。
5. 対応している場合は、ヘッダー、フッター、ボタンを追加します。
6. ライブプレビューとアクセシビリティを確認します。
7. ローカルで検証し、sandbox: true でも検証します。
8. ドラフトを保存し、その後、プロバイダー審査に明示的に送信します。

カテゴリは最初の入力を妨げるべきではありませんが、認証ルールと WhatsApp のポリシー審査に影響するため、送信前に必ず表示してください。

変数の UX

変数を挿入すると、次の両方が作成されます。

• {{0:variable}} のようなプレースホルダー；
• id、name、type、props.sample を含む対応するエンティティ。

変数を移動したときは、番号をアトミックに振り直します。プレースホルダーの構文をエンティティテーブルとは別に編集できるようにしてはいけません。定義のない {{1}} や、定義のない ID があれば、明確なエラーを表示します。

検証マトリックス

references/template-validation-matrix.md に記載されている厳密なルールを適用します。以下が含まれます。

• 各本文の最大文字数は 1,024 文字；
• ヘッダーとフッターは 60 文字；
• フッターに変数を使用しない；
• ボタンは合計 10 個まで；
• ボタンタイプは QUICK_REPLY、URL、VOICE_CALL、PHONE_NUMBER、COPY_CODE とし、タイプごとの上限を適用する；
• クイック返信と CTA の排他制約を独自に追加しない；
• authenticationConfig と認証に関する制限；
• 各チャネルのオーバーライドは完全で、個別に有効であること。

シリアライズした JSON に対して、同梱の waba-template-author リンターを実行します。最終的な判断はサーバー側の検証に委ねます。

チャネルプレビュー

SMS

プレーンテキストと、推定 GSM／UCS-2 セグメント数をプレビューします。セグメント数の推定値は課金に影響しますが、テンプレート本文の上限ではないことを明確に示します。

WhatsApp

ヘッダー、本文、フッター、ボタンをプレビューします。サンプル値、カテゴリ、言語、プロバイダー審査への影響を表示します。

RCS

現在の Sent の RCS ガイダンスでは、テキストと最大 4 個のサジェスチョンチップがサポートされています。リッチカード、カルーセル、メディア添付はロードマップ上の機能であり、現在の Sent ビルダーの制御項目ではありません。利用できない機能の機能宣言を生成してはいけません。

チャネルのルーティングはテンプレートエディターではなく、送信フローに属します。シミュレーターにルーティングを表示する場合は、次のようにします。

• channel の省略、または ["sent"] は、自動ルーティングとフォールバックを意味します；
• ["rcs"] は、チャネルを RCS に固定し、別チャネルへのフォールバックは行いません；
• 複数の明示的な値はブロードキャストと個別の課金対象メッセージを意味します。

RCS と SMS を明示した配列を、順序付きフォールバックとして説明してはいけません。

保存と審査の動作

検証には sandbox: true を使用します。submit_for_review: false で保存します。これを true に切り替える前に、次の項目を表示します。

• カテゴリと言語；
• サンプル値を使ったレンダリング済みプレビュー；
• チャネルのオーバーライド；
• ボタンのアクション；
• 警告；
• プロバイダー審査が外部状態の変更であること。

保存時に自動送信してはいけません。

ライフサイクル UX

リソースのステータス値には、現在 DRAFT、PENDING、APPROVED、REJECTED、PAUSED が含まれます。不明な状態を表示するレンダラーも維持してください。

WhatsApp テンプレートの Webhook イベントでは、field: "templates" を使用し、sub_type と event は含まれません。ステータスは payload.status です。プロバイダーの値には、CATEGORY_UPDATED、DISABLED、および今後追加されるほかの文字列が含まれる場合があります。references/template-status-handling.md を参照してください。

アクセシビリティと障害からの復旧

• すべてのエラーをフィールドと概要に関連付けてください。
• プレビューの色だけに頼らないでください。
• 検証エラーが発生した後も、ユーザーの編集内容を保持してください。
• 上級ユーザーが生の JSON を確認できるようにしてください。
• インポートした Meta JSON は、変換されるまで「Meta Cloud API ソース」としてラベル付けしてください。
• サーバーによる正規化、およびプロバイダー主導のカテゴリ／ステータス変更について、差分を提示してください。

状態遷移については references/template-ui-wireflows.md を使用してください。文面とポリシーの判断には waba-template-author、既存リソースの操作には sent-templates、RCS のローンチ準備には rcs-agent-onboarding を使用してください。