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 枚のカードにあたります。

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

quickReplies（任意）

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

使用例

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

Template 項目のドロップダウンで Expression を選びます。
エディターに次の 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: 'プロフェッショナルプランにします',
            },
          },
        ],
      },
    ],
  };
})()

始める準備はできましたか？

Asgard をチームでどう活用できるか、お気軽にご相談ください。

お問い合わせ

基本的な使い方​

Template の構造​

JSON​

各項目​

type（必須）​

columns（必須）​

quickReplies（任意）​

使用例​

商品のおすすめ​

プランの比較​