メインコンテンツまでスキップ

Carousel

Carousel は横スクロールのカード一覧を送るための message template です。

基本的な使い方​

Carousel は横スクロールするカードの入れ物として表示され、各カードは画像、見出し、説明文、操作ボタンを持ちます。ユーザーは左右にスワイプして選択肢を見比べます。

Template の構造​

JSON​

{
  "type": "CAROUSEL",
  "columns": [
    {
      "title": "商品 A",
      "text": "品質が高く、信頼できます。",
      "buttons": [
        {
          "label": "詳細を見る",
          "action": {
            "type": "uri",
            "uri": "https://example.com/product-a"
          }
        }
      ]
    },
    {
      "title": "商品 B",
      "text": "新しい設計で、より良い体験を。",
      "buttons": [
        {
          "label": "すぐ購入する",
          "action": {
            "type": "uri",
            "uri": "https://example.com/product-b"
          }
        }
      ]
    }
  ]
}

各項目​

type（必須）​

message template の種類で、常に "CAROUSEL" です。

columns（必須）​

カードの配列で、各要素が 1 枚のカードにあたります。

項目型必須説明
thumbnailImageUrlStringいいえカードの画像の URL
imageAspectRatioStringいいえ画像の縦横比
• "rectangle": 1.51:1
• "square": 1:1
imageSizeStringいいえ画像の拡縮のしかた
• "cover": 領域を覆います。切り取られる場合があります
• "contain": 画像全体を表示します。余白が出る場合があります
imageBackgroundColorStringいいえ画像の背景色。"#FFFFFF" のような 16 進数のカラーコード
titleStringはいカードの見出し
textStringはいカードの説明文
buttonsArrayいいえ操作ボタンの配列。各ボタンは label と action を持ちます
defaultActionObjectいいえカード本体をタップしたときの既定の動作

quickReplies（任意）​

クイックリプライのボタンの配列で、Carousel 全体の下に表示されます。詳しくは Quick Replies を参照してください。

使用例​

Push Message から横スクロールのカードを送る手順です。

  1. Template 項目のドロップダウンで Expression を選びます。
  2. エディターに次の JavaScript を入力します。

商品のおすすめ​

(() => {
  return {
    type: 'CAROUSEL',
    columns: [
      {
        title: '高性能ノート PC',
        text: 'Intel i7 プロセッサー、メモリ 16GB',
        buttons: [
          {
            label: '詳細を見る',
            action: {
              type: 'uri',
              uri: 'https://shop.example.com/laptop',
            },
          },
        ],
      },
      {
        title: 'スマートフォン',
        text: '6.1 インチ画面、容量 128GB',
        buttons: [
          {
            label: '詳細を見る',
            action: {
              type: 'uri',
              uri: 'https://shop.example.com/phone',
            },
          },
        ],
      },
    ],
  };
})()

プランの比較​

(() => {
  return {
    type: 'CAROUSEL',
    columns: [
      {
        title: 'ベーシック',
        text: '個人向け\n基本機能\nストレージ 5GB',
        buttons: [
          {
            label: 'NT$ 99/月',
            action: {
              type: 'MESSAGE',
              text: 'ベーシックプランにします',
            },
          },
        ],
      },
      {
        title: 'プロフェッショナル',
        text: '小規模チーム向け\n上位機能\nストレージ 50GB',
        buttons: [
          {
            label: 'NT$ 299/月',
            action: {
              type: 'MESSAGE',
              text: 'プロフェッショナルプランにします',
            },
          },
        ],
      },
    ],
  };
})()