Components V2(高度なレイアウト)

Components V2 は、メッセージを「テキスト」「セクション」「コンテナ」などの部品(コンポーネント)を自由に組み合わせて構築する新しい形式です。従来の本文 + Embed では作れなかったレイアウト、たとえば色帯付きの枠でまとめたり、テキストの横にサムネイルやボタンを並べたり、区切り線で内容を整理したりといった表現ができます。

「メッセージを送信」アクションの「メッセージ形式」を「Components V2 (高度なレイアウト)」に切り替えると、専用の「コンポーネントビルダー (V2)」でこの形式のメッセージを組み立てられます。

コンポーネントビルダーを開く

テキスト系の入力欄には変数ボタンがあり、固定の文字のかわりに変数(例: {option_user} や {msg_1})を差し込めます。変数の書き方は 変数と式の使い方 を参照してください。

コンポーネントの一覧

編集エリアの「コンポーネントを追加」メニューから部品を追加します。各コンポーネントの役割:

配置のルール

Components V2 では、部品を置ける場所が決まっています。

• ルート(いちばん外側)の直下に置けるのは「コンテナ」「セクション」「テキスト」「アクション行」の 4 種です。
• 「区切り線」「メディアギャラリー」「ファイル」はコンテナの中専用で、ルート直下には置けません。これらを使うときはまずコンテナを置き、その中に追加します。
• コンテナのネスト(コンテナの中にコンテナ)はできません。コンテナは 1 段までです。
• コンテナには「アクセントカラー (左帯)」と「スポイラー」を設定できます。アクセントカラーは #RGB / #RRGGBB 形式で指定します(先頭の # は省略しても構いません)。空にすると帯なしになります。変数で指定する場合はテンプレートを書けます。
• セクションには「テキスト」を 1〜3 個と、アクセサリ(サムネイル または ボタン)を必ず 1 つ付けます。
• アクション行には「ボタン」を最大 5 個、または「選択メニュー」を 1 個だけ置けます。ボタンと選択メニューを同じ行に混在させることはできません。また、最低 1 つは必要です(空のアクション行はエラーになります)。

各コンポーネントのカードには上下の並べ替え・複製・削除のボタンがあり、ボタン操作で構成を編集できます。

ボタン・選択メニューの配線(ハイブリッド)

アクション行やセクションに置くボタン・選択メニューは、コンポーネントビルダーのツリーには参照だけを置く仕組みです。ボタンや選択メニューの実体(ラベル・スタイル・押下後のフロー)は、従来どおりキャンバス上の独立したボタン / 選択メニューのフローノードで編集します。これを「ハイブリッド配線」と呼びます。

• アクション行の「ボタンを追加」「選択メニューを追加」メニュー、またはセクションのアクセサリの「ボタン」メニューから、「新規作成して追加」を選ぶと、新しいフローノードが作成され、その参照がその場に置かれます。
• 同じメニューには、その「メッセージを送信」に接続済みの既存のボタン / 選択メニューノードも選択肢として並びます。すでにツリーのどこかで参照済みのものは選択肢から除外されます。
• カードの削除(「×」)は、ボタン / 選択メニューの場合は実体のフローノードごと削除し、ツリー側の参照も自動で整理します。

ボタン・選択メニューのフローノードに「結果変数名(variable_name)」を設定すると、ユーザーがボタンを押した/選択した結果を、後続のノードから変数として受け取れます(どのボタンが押されたか、誰がどこで操作したかなど)。詳しくはコンポーネントの結果変数を参照してください。

画像とファイルの指定

メディアギャラリー・ファイル・サムネイルでは、画像やファイルを URL で指定します。表記は次のルールに従います。

• メディアギャラリーは画像を 1〜10 枚まで追加できます。各画像の URL には attachment://ファイル名(添付ファイルの参照)または https://...(外部 URL)を入力できます。画像ごとに代替テキストとスポイラーを設定できます。
• ファイルは attachment:// 参照のみを入力できます。外部 URL は使えません。
• セクションのサムネイルは attachment:// または https://... を入力できます。

Components V2 では添付ファイルが自動表示されないため、これらのコンポーネントから明示的に参照したものだけが表示されます。

上限と検証メッセージ

上限超過や配置の不備があると編集エリアの上部に検証メッセージ(赤=エラー / 黄=警告)が表示され、エラーが残っている間は意図どおりに送信できません。

次のステップ / 関連ページ

• アクション — 「メッセージを送信」など動作ノードの一覧
• コマンドビルダーの概要と使い方 — キャンバスとノードの基本操作
• 変数と式の使い方 — 変数の参照と計算