Composite

Prev Next

Classic/VPC環境で利用できます。

チャットボット返答のレスポンスコンポーネントのうち、Composite Componentについて説明します。

Compositeコンポーネントは、次の2つの基本コンポーネントで構成されます。

上記のコンポーネントはそれぞれの特徴に合わせてチャットボットのレスポンスをチャットボットビルダで設定することができ、チャットボットビルダで設定したレスポンス結果を JSON形式で返します。

Templateコンポーネント

Templateコンポーネントは、カバー(Cover)、コンテンツテーブル(Content Table)、フットテーブル(Foot Table)で構成されます。

Templateコンポーネントのレスポンスボディ

Templateコンポーネントのレスポンスボディは次の通りです。

フィールド タイプ 必須の有無 説明
type String Required コンポーネントのタイプ
  • Templateコンポーネントの場合、2つの基本コンポーネントのうちtemplateのみ使用可能
title String Optional コンポーネントのタイトル
  • 太字の短文テキスト(Short bold text)
subTitle String Optional 下位コンポーネントのタイトル
  • グレーの短文テキスト(Short gray text)
data Object Optional テンプレート(Template)コンポーネントの構成情報
data.cover Object Required カバー(Cover)情報
data.description String Optional コンポーネントの詳細説明
  • 長文のテキスト
data.contentBackgroundImage String Optional コンテンツテーブル領域に表示されるバック画像の URL
  • https形式の URLが必要
data.contentTable Array Optional contentTableの詳細情報
data.footBackgroundImage String Optional フット(Foot)テーブル領域に表示されるバック画像の URL
  • https形式の URLが必要
data.footTable Array Optional footTableの詳細情報
  • 構成要素はcontentTableと同じだが、contentTableが存在しないと表示できない
data.footTableShowRows Integer Optional 最大行数
  • 行数が最大値より多い場合、最大行を表示して折りたたんで拡張ボタンを追加
  • 設定しないと全行を表示
data.action Action Optional コンポーネントアクション(Action)情報

Table

Tableの説明は次の通りです。

フィールド タイプ 必須の有無 説明
rowSpan Integer Required 表のセルが占める(Span)行の数
colSpan Integer Required 表のセルが占める(Span)列の数
data Object Optional Templateコンポーネントのdata領域情報
data.type String Conditional コンポーネントのタイプ
data.title String Conditional コンポーネントの名前
data.subTitle String Conditional 下位コンポーネントの名前
data.data Object Conditional 下位コンポーネントの構成情報
data.data.type String Conditional 下位コンポーネントのタイプ
data.data.iconUrl String Conditional アイコン URLアドレス
data.data.action Object Conditional コンポーネントのアクション(Action)情報
data.data.action.type String Conditional コンポーネントアクションのタイプ
data.data.action.data Object Conditional コンポーネントアクションの詳細情報

Templateコンポーネントのレスポンス例

Templateコンポーネントのレスポンスのサンプルコードは次の通りです。

{
    "type": "template",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data":{
        "cover":{
            "contentTableShowRows": 3, 
            "contentTable":
            [ 
                "colSpan": 1,
                "rowSpan": 2,
                "data":{}
            ]
        }
    },
    "footTableShowRows":3, 
    "footBackgroundImage":"https://ssl.pstatic.net/CloudFunctions.png",
    "footTable":[] 
}

Persistent Menuコンポーネント

固定メニュー(Persistent Menu)コンポーネントはユーザーがチャットバーでメニューボタンをタッチすると表示され、常にOpenレスポンスに含まれます。utilsを変更しなかった他のレスポンスにpermanentMenuコンテンツが含まれます。

Persistent Menuのレスポンスボディ

Persistent Menuのレスポンスボディは次の通りです。

フィールド タイプ 必須の有無 説明
type String Required 固定メニューのタイプ
  • Templateコンポーネントの場合、2つの基本コンポーネントのうちtemplateのみ使用可能
title String Optional 固定メニュー名
  • チャットバーに表示される
data Object Optional 固定メニューの構成情報
  • coverは使用しない
data.contentBackgroundImage String Conditional コンテンツテーブル領域に表示されるバック画像の URL
  • contentTableにimageコンポーネントがある場合にのみ表示
  • https形式の URLが必要
data.contentTable Array Conditional contentTableの詳細情報
  • footTableは使用されない

contentTable

data.contentTableの説明は次の通りです。

フィールド タイプ 必須の有無 説明
rowSpan Integer Required 表のセルが占める(Span)行の数
colSpan Integer Required 表のセルが占める(Span)列の数
data Object Optional コンポーネントの構成情報
data.type String Conditional コンポーネントのタイプ
data.title String Conditional コンポーネントの名前
data.subTitle String Conditional 下位コンポーネントの名前
data.data Object Conditional 下位コンポーネントの構成情報
data.data.type String Conditional 下位コンポーネントのタイプ
data.data.action Object Conditional コンポーネントのアクション(Action)情報
data.data.action.type String Conditional コンポーネントアクションのタイプ
data.data.action.data Object Conditional コンポーネントアクションの詳細情報

Persistent Menuのレスポンス例

Persistent Menuのレスポンスのサンプルコードは次の通りです。

{
    "type": "template",
    "title": "persistentMenu",
    "data": {
        "contentBackgroundImage": "url",
        "contentTable": []
    }
}

Carouselコンポーネント

Carouselコンポーネントは同じ形式が繰り返されるカルーセル(Carousel)返答が構成されます。

Carouselコンポーネントのレスポンスボディ

Carouselコンポーネントのレスポンスボディは次の通りです。

フィールド タイプ 必須の有無 説明
type String Required コンポーネントのタイプ
  • Carouselコンポーネントの場合、2つの基本コンポーネントのうちcarouselのみ使用可能
title String Optional コンポーネントのタイトル
  • 太字の短文テキスト(Short bold text)
subTitle String Optional 下位コンポーネントのタイトル
  • グレーの短文テキスト(Short gray text)
data Object Optional カルーセル(Carousel)コンポーネントの構成情報
data.cards Array Optional カルーセルを構成するカード(Card)情報

Carouselコンポーネントのレスポンス例

Carouselコンポーネントのレスポンスのサンプルコードは次の通りです。

{
    "type": "carousel",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data" : 
    {
        "cards": [{}]
    }
}