チュートリアルカスタムレスポンスをコンテンツカルーセルとしてレンダリングする
このチュートリアルでは、カスタムレスポンスを使用してコンテンツカルーセルの形式で情報を表示する方法を説明します。
このチュートリアルで説明されている例の完全な動作版については、 「AI アシスタントWebチャット用コンテンツカルーセル 」をご覧ください。
「コンテンツカルーセル」（または「スライダー」）とは、選択肢をスクロール可能なスライドの連なりとして表示するインタラクティブな要素の一種です。
AIアシスタントには、 コンテンツカルーセル用の組み込みの応答タイプがありません。 その代わりに、` user_defined response` タイプを使用して、表示したい情報を含むカスタムレスポンスを送信し、標準の JavaScript ライブラリを利用してWebチャットを拡張し、コンテンツカルーセルを表示させることができます。
この例では、Swiper ライブラリを使用して、カスタムレスポンスをコンテンツカルーセルとして表示する方法を示しています。
コンテンツカルーセルを作成するアクションステップでは、JSONエディタを使って、'
user_definedカスタムレスポンスを定義します。 レスポンスの中で、コンテンツ・カルーセルに必要なデータを指定する。 この例では、さまざまな種類のクレジットカードに関する情報を送信し、カスタムレスポンスに表示しています：
{
"generic": [
{
"user_defined": {
"carousel_data": [
{
"alt": "everyday card",
"url": "lendyr-everyday-card.jpg",
"title": "The Everyday Card",
"description": "$300 bonus plus 5% gas station cash back offer. Earn 2% cash back on all other purchases."
},
{
"alt": "preferred card",
"url": "lendyr-preferred-card.jpg",
"title": "The Preferred Card",
"description": "$300 bonus plus 5% gas station cash back offer. Earn 5% cash back on all other purchases."
},
{
"alt": "topaz card",
"url": "lendyr-topaz-card.jpg",
"title": "The Topaz Card",
"description": "$90 Annual fee. Earn 120,000 bonus points. Earn additional points on every purchase."
}
],
"user_defined_type": "carousel"
},
"response_type": "user_defined"
}
]
}この例では、'user_definedレスポンスの中にカルーセルデータを含めています。 アシスタントのデザインによっては、'contextオブジェクトからウェブチャットでアクセスできるスキル変数にデータを格納することもできます。
イベント
customResponse用のハンドラを作成します。 このハンドラは、Swiperライブラリによって定義されたスタイルを使用して、コンテンツカルーセルをレンダリングします。 （これらのスタイルの定義については、 完全な例を参照してください。）
この関数も、次のステップで作成するヘルパー関数（createSlides()）に依存している。 この関数の完全なコードは、Swiperライブラリも初期化する。 詳細については、 完全な例を参照してください。
function carouselCustomResponseHandler(event, instance) {
const { element, message } = event.data;
element.innerHTML = `
<div class="Carousel">
<div class="swiper">
<div class="swiper-wrapper"></div>
</div>
<div class="Carousel__Navigation" >
<button type="button" class="Carousel__NavigationButton Carousel__NavigationPrevious bx--btn bx--btn--ghost">
<svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M20 24L10 16 20 8z"></path></svg>
</button>
<div class="Carousel__BulletContainer"></div>
<button type="button" class="Carousel__NavigationButton Carousel__NavigationNext bx--btn bx--btn--ghost">
<svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 8L22 16 12 24z"></path></svg>
</button>
</div>
</div>`;
// Once we have the main HTML, create each of the individual slides that will appear in the carousel.
const slidesContainer = element.querySelector('.swiper-wrapper');
createSlides(slidesContainer, message, instance);
...
}コンテンツカルーセルの各スライドをレンダリングするヘルパー関数 '
createSlides()を作成します。 この関数はカスタムレスポンスから値（alt、'url、'title、'description）を取得し、それらを使用してスライドのHTMLを入力します。 （関数の詳細については、 完全な例を参照してください。）
carouselData.forEach((cardData) => {
const { url, title, description, alt } = cardData;
const cardElement = document.createElement('div');
cardElement.classList.add('swiper-slide');
cardElement.innerHTML = `
<div class="bx--tile Carousel__Card">
<img class="Carousel__CardImage" src="${url}" alt="${alt}" />
<div class="Carousel__CardText">
<div class="Carousel__CardTitle">${title}</div>
<div class="Carousel__CardDescription">${description}</div>
</div>
<!-- Here you would use a link to your own page that shows more details about this card. -->
<a href="https://www.ibm.com" class="Carousel__CardButton bx--btn bx--btn--primary" target="_blank">
View more details
</a>
<!-- This button will send a message to the assisstant and web chat will respond with more info. -->
<button type="button" class="Carousel__CardButton Carousel__CardButtonMessage bx--btn bx--btn--primary">
Tell me more about this
</button>
</div>
`;
...
});イベント
onLoadハンドラ内で、インスタンスon()メソッドを使用してイベントcustomResponseを登録し、関carouselCustomResponseHandler()数をコールバックとして登録します。
instance.on({
type: 'customResponse',
handler: (event, instance) => {
if (event.data.message.user_defined && event.data.message.user_defined.user_defined_type === 'carousel') {
carouselCustomResponseHandler(event, instance);
}
},
});この例では、カスタムレスポンスの'user_defined_typeプロパティをチェックし、指定されたタイプが'carouselである場合にのみ'carouselCustomResponseHandler()関数を呼び出している。 このオプションのチェックでは、カスタムプロパティを使用して複数の異なるカスタムレスポンス (それぞれ「user_defined_type」の値が異なる) を定義する方法を示します。
完全な動作コードについては、 「 AIアシスタントのWebチャット 」のコンテンツカルーセルをご覧ください。