「フレックスメッセージ」を作成する際に使う部品(要素)の設定方法を説明します。

スクリーンショット 2025-01-14 14.46.13.png

読み進めながら自分の作成したいメッセージを作成してください。

<aside> 💡

フレックスメッセージは0から作成するよりも既存のフレックスメッセージを修正する方が簡単に作成できます。

Bot Expressではフレックスメッセージのテンプレート集を用意しているので適宜ご活用ください。

</aside>

フレックスメッセージの構造について

フレックスメッセージは大きく分けてheader、hero、body、footerの4つのブロックが存在します。

スクリーンショット 2024-11-10 21.52.26.png

各ブロックにはコンポーネントと呼ばれるボタンや画像などの要素を入れていきます。

ただしブロックに直接ボタンやテキストなどのコンポーネントは配置できないため、boxのコンポーネントをまずは配置し、その中にボタンやテキストを配置します(heroのみ画像と動画を直接配置可能)。

スクリーンショット 2025-01-14 15.30.37.png

フレックスメッセージのおおまかな作成方法

Flex Message Simulator上でテンプレートとなるフレックスメッセージを準備します。

スクリーンショット 2025-01-14 15.54.33.png

新たにコンポーネントを追加したい場合はブロックの直下に配置されているboxを選択した状態で+ボタンを押してコンポーネントを選択します。

スクリーンショット 2025-01-14 17.36.20.png