😎

LINEでFlex Messageを送信する

2025/09/06に公開

LINEでテキストよりも柔軟なレイアウトを適用できるFlex Messageを送る方法を書いておきます。
Node.js(TypeScript)のSDKを使うと簡単に送ることができます。

ここでは、LINEアプリから何らかのテキストを送信すると、横方向にスワイプしてコンテンツを表示できるFlex Messageのカルーセルを返信させます。

Flex Messageとは

LINEではテキストや写真だけよりも、柔軟なレイアウトを適用して送信できるFlex Messageというものがあります。企業アカウントからキャンペーンや広告がFlex Messageで送られて来たことがある方も多いのではないでしょうか。

Flex Messageの例（出典：Messaging API公式ドキュメント)

これらはJSONで定義して送信することができます。
初めて見ると複雑そうですが、GUIからJSONを生成できる公式シミュレータもあります。

SDK

LINEのNode.js用SDKが公開されていますので、これを利用します。

yarn add @line/bot-sdk

Flex Messageを送信する方法

カルーセルのFlex Messageを返信するコードは次のとおりです。

カルーセルを送信するコード

index.ts

import express, { Request, Response } from "express";
import {
  middleware,
  messagingApi,
  MessageEvent,
  TextMessage,
} from "@line/bot-sdk";
const { MessagingApiClient } = messagingApi;
import dotenv from "dotenv";
dotenv.config();

const app = express();

const config = {
  channelSecret: process.env.LINE_API_SECRET || "",
};
app.post(
  "/webhook",
  middleware(config),
  async (req: Request, res: Response) => {
    const event = req.body.events[0] as MessageEvent;
    if (event === undefined) {
      // Webhook検証
      return res.status(200).end();
    }

    // 簡略化のため、テキストメッセージとして扱う
    const message = event.message as TextMessage;

    // LINE Messaging APIクライアントの初期化
    const client = new MessagingApiClient({
      channelAccessToken: process.env.LINE_ACCESS_TOKEN || "",
    });

    // メッセージ返信
    await client.replyMessage({
      replyToken: req.body.events[0].replyToken,
      messages: [
        // Flex Messageを送信
        {
          type: "flex",
          altText: "this is a flex message",
          contents: {
            type: "carousel",
            contents: [
              {
                type: "bubble",
                body: {
                  type: "box",
                  layout: "horizontal",
                  contents: [
                    {
                      type: "text",
                      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                      wrap: true,
                    },
                  ],
                },
                footer: {
                  type: "box",
                  layout: "horizontal",
                  contents: [
                    {
                      type: "button",
                      style: "primary",
                      action: {
                        type: "uri",
                        label: "Go",
                        uri: "https://example.com",
                      },
                    },
                  ],
                },
              },
              {
                type: "bubble",
                body: {
                  type: "box",
                  layout: "horizontal",
                  contents: [
                    {
                      type: "text",
                      text: "Hello, World!",
                      wrap: true,
                    },
                  ],
                },
                footer: {
                  type: "box",
                  layout: "horizontal",
                  contents: [
                    {
                      type: "button",
                      style: "primary",
                      action: {
                        type: "uri",
                        label: "Go",
                        uri: "https://example.com",
                      },
                    },
                  ],
                },
              },
            ],
          },
        },
      ],
    });
  }
);

const port = process.env.PORT || 3000;
app
  .listen(port, () => {
    console.log("Server is running on port", port);
  })
  .on("error", (err: Error) => {
    throw new Error(`Server failed to start: ${err.message}`);
  });

Flex Messageを送信するコードです。

await client.replyMessage({
      replyToken: req.body.events[0].replyToken,
      messages: [
        // Flex Messageを送信
        {
          type: "flex",　// (1)
          altText: "this is a flex message",
          contents: {
            type: "carousel", // (2)
            contents: [
              {
// 後略

(1) メッセージタイプとしてflexを指定することで、Flex Messageを送信できます。
(2) contentsに内容を指定します。ここでは、carouselを指定して横にスワイプできるようになります。

次のようにサーバーを起動して、LINEアプリから何らかのテキストを送信すると、カルーセルのFlex Messageが返信されます。

# LINE Botサーバーを起動
tsx index.ts

# ngrokで外部に公開
ngrok http 3000

まとめ

LINEのFlex Messageを送信する方法をまとめました。Flex Messageでは柔軟なレイアウトのメッセージを送信できます。JSONで定義しますが、公式シミュレータもあるので初心者でもイメージを掴むことはできます。
SDKを用いるとJSONさえ定義すれば、通常のテキストメッセージと同じように送信できます。

Flex Messageとは

SDK

Flex Messageを送信する方法

まとめ

Discussion