Components V2(高度なレイアウト)
Components V2 は、メッセージを「テキスト」「セクション」「コンテナ」などの部品(コンポーネント)を自由に組み合わせて構築する新しい形式です。従来の本文 + Embed では作れなかったレイアウト、たとえば色帯付きの枠でまとめたり、テキストの横にサムネイルやボタンを並べたり、区切り線で内容を整理したりといった表現ができます。
「メッセージを送信」アクションの「メッセージ形式」を「Components V2 (高度なレイアウト)」に切り替えると、専用の「コンポーネントビルダー (V2)」でこの形式のメッセージを組み立てられます。
Components V2 は従来形式(本文 + Embed)とは排他で、不可逆です。設定パネルにも次の警告が表示されます。
「本文・Embed・スタンプ・投票は使用できません。テキストは「テキスト」コンポーネントで表現します。実際に V2 で送信したメッセージは V1 へ戻せません (不可逆)。」
コンポーネントビルダーを開く
「メッセージを送信」を配置して設定パネルを開く
コマンドビルダーで「メッセージを送信」アクションを配置し、ノードをクリックして右側の設定パネル(「メッセージの送信設定」)を開きます。
「メッセージ形式」を Components V2 に切り替える
設定パネルの「メッセージ形式」で「Components V2 (高度なレイアウト)」を選びます。「通常 (本文 + Embed)」のままだと従来のメッセージビルダーが表示されます。切り替えると Components V2 モードの警告が表示されます。
「コンポーネントビルダーを開く」をクリックする
「コンポーネントビルダーを開く」ボタンをクリックすると、全画面のモーダル「コンポーネントビルダー (V2)」が開きます。
編集エリアとプレビューで組み立てる
モーダルの左側が編集エリア、右側が Discord 風のプレビューです。画面が狭いときは右側のかわりに「プレビューを開く」ボタンが表示され、クリックするとプレビューが別モーダルで開きます。上部には集計として「部品 N/40」と「文字 N/4000」が表示されます。
テキスト系の入力欄には変数ボタンがあり、固定の文字のかわりに変数(例: {option_user} や {msg_1})を差し込めます。変数の書き方は 変数と式の使い方 を参照してください。
コンポーネントの一覧
編集エリアの「コンポーネントを追加」メニューから部品を追加します。各コンポーネントの役割:
| コンポーネント | 役割 |
|---|---|
| コンテナ | 左端に色帯(アクセントカラー)を付けられる枠です。中に他の部品をまとめて、Embed のようにひとかたまりとして見せられます。 |
| セクション | テキストと、その横に置くアクセサリ(サムネイル または ボタン)を横並びにする部品です。 |
| テキスト | Markdown 対応のテキストを表示する部品です。従来の本文の置き換えにあたります。 |
| アクション行 | ボタンや選択メニューを横一列に並べる行です。 |
| 区切り線 | 余白や横線で内容を区切る部品です。線の有無と余白の大きさ(小/大)を選べます。 |
| メディアギャラリー | 画像をグリッド状に並べる部品です。 |
| ファイル | アップロード済みファイルを表示する部品です。 |
| サムネイル | セクションの横に置く小さな画像です。セクションのアクセサリ専用で、単独では配置できません。 |
配置のルール
Components V2 では、部品を置ける場所が決まっています。
- ルート(いちばん外側)の直下に置けるのは「コンテナ」「セクション」「テキスト」「アクション行」の 4 種です。
- 「区切り線」「メディアギャラリー」「ファイル」はコンテナの中専用で、ルート直下には置けません。これらを使うときはまずコンテナを置き、その中に追加します。
- コンテナのネスト(コンテナの中にコンテナ)はできません。コンテナは 1 段までです。
- コンテナには「アクセントカラー (左帯)」と「スポイラー」を設定できます。アクセントカラーは
#RGB/#RRGGBB形式で指定します(先頭の#は省略しても構いません)。空にすると帯なしになります。変数で指定する場合はテンプレートを書けます。 - セクションには「テキスト」を 1〜3 個と、アクセサリ(サムネイル または ボタン)を必ず 1 つ付けます。どちらも選んでいないと「サムネイルまたはボタンを選択してください (必須)。」という警告が出て、保存・送信の前に弾かれます。
- アクション行には「ボタン」を最大 5 個、または「選択メニュー」を 1 個だけ置けます。ボタンと選択メニューを同じ行に混在させることはできません。また、最低 1 つは必要です(空のアクション行はエラーになります)。
各コンポーネントのカードには、上下の並べ替え・複製・削除のボタンがあり、ドラッグせずにボタン操作で構成を編集できます。
ボタン・選択メニューの配線(ハイブリッド)
アクション行やセクションに置くボタン・選択メニューは、コンポーネントビルダーのツリーには参照だけを置く仕組みです。ボタンや選択メニューの実体(ラベル・スタイル・押下後のフロー)は、従来どおりキャンバス上の独立したボタン / 選択メニューのフローノードで編集します。これを「ハイブリッド配線」と呼びます。
- アクション行の「ボタンを追加」「選択メニューを追加」メニュー、またはセクションのアクセサリの「ボタン」メニューから、「新規作成して追加」を選ぶと、新しいフローノードが作成され、その参照がその場に置かれます。
- 同じメニューには、その「メッセージを送信」に接続済みの既存のボタン / 選択メニューノードも選択肢として並びます。すでにツリーのどこかで参照済みのものは選択肢から除外されます。
- カードの削除(「×」)は、ボタン / 選択メニューの場合は実体のフローノードごと削除し、ツリー側の参照も自動で整理します。
配線は現在のバージョンで実際に機能します(「近日対応」ではありません)。プレビューにはボタンや選択メニューのラベルが反映され、送信時にもツリーの配置どおりに表示されます。
画像とファイルの指定
メディアギャラリー・ファイル・サムネイルでは、画像やファイルを URL で指定します。表記は次のルールに従います。
- メディアギャラリーは画像を 1〜10 枚まで追加できます。各画像の URL には
attachment://ファイル名(添付ファイルの参照)またはhttps://...(外部 URL)を入力できます。画像ごとに代替テキストとスポイラーを設定できます。 - ファイルは
attachment://参照のみを入力できます。外部 URL は使えません。 - セクションのサムネイルは
attachment://またはhttps://...を入力できます。
attachment:// を使う場合は、attachment://image.png のようにファイル名を続けて書きます。Components V2 では添付ファイルが自動表示されないため、これらのコンポーネントから明示的に参照したものだけが表示されます。
上限と検証メッセージ
上部の集計と、編集エリアに出る検証メッセージで、問題のある箇所をその場で確認できます。
| 項目 | 上限 |
|---|---|
| 1 メッセージあたりの部品の総数(ネスト含む) | 40 |
| テキストの合計文字数 | 4000 文字 |
| メディアギャラリーの画像枚数 | 1〜10 枚 |
| セクション内のテキスト数 | 1〜3 個 |
| アクション行のボタン数 | 最大 5 個 |
| アクション行の選択メニュー数 | 1 個 |
集計の「部品 N/40」「文字 N/4000」は、上限を超えると赤く表示されます。上限超過や配置の不備があると、編集エリアの上部に検証メッセージが出ます。例:
- 「Components V2 モードですが中身が空です。テキストなどのコンポーネントを追加してください。」
- 「セクションにはアクセサリ (サムネイル または ボタン) が 1 つ必要です。」
- 「アクション行にはボタンか選択メニューが 1 つ以上必要です。」
- 「アクション行にボタンと選択メニューを混在させることはできません。」
- 「ファイルは attachment:// 参照のみ使用できます (外部 URL 不可)」
- 「コンポーネント総数が上限 40 を超えています。」
- 「テキスト合計が上限 4000 文字を超えています。」
これらのメッセージは赤(エラー)と黄(警告)で表示されます。エラーが残っている間は意図どおりに送信できないため、メッセージの指示に従って構成を直してください。
次のステップ / 関連ページ
- アクション — 「メッセージを送信」など動作ノードの一覧
- コマンドビルダーの概要と使い方 — キャンバスとノードの基本操作
- 変数と式の使い方 — 変数の参照と計算