LINE Flex Messageでカルーセルカードを作るメモ

LINEとChatGPTを連携させたBotを開発している。
それを有料化する依頼が来て絶賛対応中だ。

現在、それを有料プラン化する依頼を受けて対応中だ。

LINEの管理画面からも設定は可能だが、
今回は API経由で自動化 する構成を採用している。

その中で、Flex Messageのカルーセルタイプ（横スワイプ形式） の作り方を、
未来の自分のためにメモとして残しておく。

Flex Messageの構造

message
└─ contents（カルーセル or バブル）
　　 　├─ type: "carousel" ← 横スライド形式
　　 　└─ contents: [bubble, bubble, ...]
　　 　 　　　 ├─ bubble 1（1枚目）
　　　　　　　└─ bubble 2（2枚目）

各「bubble」がカード1枚を表す。
複数並べるとカルーセルになる。
1枚のbubbleの中は「body」と「footer」で構成する。

カルーセルカードの作り方

以下は「スーパーライトプラン」「ライトプラン」を2枚並べる例。
それぞれにStripeの加入ページへ遷移するボタンを設置している。

BOXの基本形は下記

{
  type: "box",
  layout: "vertical", // または horizontal / baseline
  contents: [ ... ]   // 中に text, image, button などを入れる
}

細かく設定していく

function sendSubscriptionCarousel(userId) {

  // ----------------------------------------------
  // カード1：スーパーライトプラン
  // ----------------------------------------------
  const superLightPlan = {
    type: "bubble",
    body: {
      type: "box",
      layout: "vertical", //縦に積む。horizontalは横
      contents: [
        {
          type: "text",
          text: "スーパーライトプラン",
          weight: "bold",
          size: "xl",
          align: "center"
        },
        {
          type: "text",
          text: "¥300/月",
          size: "lg",
          align: "center",
          margin: "md"
        },
        {
          type: "text",
          text: "月10回まで",
          size: "sm",
          align: "center",
          color: "#999999",
          margin: "md"
        }
      ]
    },
    footer: {
      type: "box",
      layout: "vertical",
      contents: [
        {
          type: "button",
          action: {
            type: "uri",
            label: "加入ページへ",
            uri: "https://buy.stripe.com/test_superlight?client_reference_id=" + userId 
            // StripeにユーザーIDを送ると、レスポンスでも同じuserIdが返ってくる → 顧客識別に使える。
          },
          style: "primary" //塗りつぶし
        }
      ]
    }
  };

  // ----------------------------------------------
  // カード2：ライトプラン
  // ----------------------------------------------
  const lightPlan = {
    type: "bubble",
    body: {
      type: "box",
      layout: "vertical",
      contents: [
        {
          type: "text",
          text: "ライトプラン",
          weight: "bold",
          size: "xl",
          align: "center"
        },
        {
          type: "text",
          text: "¥1,980/月",
          size: "lg",
          align: "center",
          margin: "md"
        },
        {
          type: "text",
          text: "月50回まで",
          size: "sm",
          align: "center",
          color: "#999999",
          margin: "md"
        }
      ]
    },
    footer: {
      type: "box",
      layout: "vertical",
      contents: [
        {
          type: "button",
          action: {
            type: "uri",
            label: "加入ページへ",
            uri: "https://buy.stripe.com/test_light?client_reference_id=" + userId
          },
          style: "primary"
        }
      ]
    }
  };

  // ----------------------------------------------
  // カルーセル形式で2枚並べる
  // ----------------------------------------------
  const message = {
    type: "flex",
    altText: "有料プランのご案内",
    contents: {
      type: "carousel",
      contents: [superLightPlan, lightPlan] // ← 横に並べる
    }
  };

  // ----------------------------------------------
  // LINE Messaging API で送信
  // ----------------------------------------------
  const options = {
    method: "post",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + LINE_ACCESS_TOKEN
    },
    payload: JSON.stringify({
      to: userId,
      messages: [message]
    })
  };

  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/push", options);
}

メモ：レイアウトのパターン

• carousel
  • 複数商品・プラン紹介
    • 横スライドできる
• bubble（単体）
  • 単一の案内
    • 画像＋テキストの構成にもできる
• hero
  • カード上部に画像を追加
    • 画像を追加したいときに使用
• button
  • 加入・購入・詳細ボタン
    • actionでURIやpostbackを指定