外部連携結果をカルーセル表示したい

「外部連携結果をカルーセル表示」アクションを利用することで、外部システム連携で取得した値をもとに、チャットウィンドウにカルーセルパネル(絵・写真・情報)を表示することができます。

今回は、Googleが提供しているGoogle Books API(https://developers.google.com/books/)を利用し、取得した書籍情報をカルーセル表示します。

カルーセルパネルは最大10件まで表示可能です。上限を超えた場合は、最初の10件のみ表示されます。

※「外部連携結果をカルーセル表示」アクションはSkype For Business、LINE WORKSでは使用することができません。

まずは、GoogleBooks APIを利用して、ユーザーが入力した検索ワードに該当する書籍情報を取得する外部システム連携を作成します。

  手順(外部システム連携1 書籍検索)

  1. 左メニューの『チャットボット一覧』より設定を行うチャットボットを選択し、『外部システム連携』タブから ”新規作成”ボタンをクリックしてください。

  2. 『外部システム連携先』に連携先名を入力してください。

  3. 『説明』に連携先の説明文を入力してください。

  4. 『タイプ』から、『HTTP(S)』を選択してください。

  5. 『URL』に接続先URLを入力してください。
    URL入力例:https://www.googleapis.com/books/v1/volumes?q={{検索ワード}}

  6. 『Response Map』に以下の例を参考に入力し、 “保存” ボタンをクリックしてください。

    入力例:
    変換元 変換先
    items 検索結果
つぎに、GoogleBooks APIを利用して、書籍の詳細情報を取得する外部システム連携を作成します。

  手順(外部システム連携2 書籍詳細)

  1. チャットボット画面に戻り、『外部システム連携』タブから ”新規作成”ボタンをクリックしてください。

  2. 『外部システム連携先』に連携先名を入力してください。

  3. 『説明』に連携先の説明文を入力してください。

  4. 『タイプ』から、『HTTP(S)』を選択してください。

  5. 『URL』に接続先URLを入力してください。
    URL入力例:https://www.googleapis.com/books/v1/volumes/{{検索結果カルーセル.id}}

  6. 『Response Map』に以下の例を参考に入力し、 “保存” ボタンをクリックしてください。

    入力例:
    変換元 変換先
    volumeInfo.title タイトル
    volumeInfo.authors 著者
    volumeInfo.publisher 出版社
    volumeInfo.publishedDate 出版日
    volumeInfo.pageCount ページ数
    volumeInfo.description 書籍の説明
    volumeInfo.infoLink webページ

  手順(シナリオ作成)

  1. チャットボット画面に戻り、『シナリオ一覧』タブから”新規作成”ボタンをクリックしてください。

  2. 『シナリオ名』を入力してください。

  3. 『ユーザー発言例(発言例タブ)』を入力してください。

  4. 『シナリオの流れ』エリアの中にあるリストから『ヒアリング』アクションを選択し、 “アクションを追加” ボタンをクリックしてください。

  5. 『ヒアリング』アクションに、以下の例を参考に入力してください。

    入力例:
    No ヒアリング項目名 タイプ   項目ごとの質問文
    検索ワード テキスト全体 @text 検索する書籍に関するキーワードを入力してください。(著者、タイトルなど)
  6. 『シナリオの流れ』エリアの中にあるリストから『外部システム連携』アクションを選択し、 “アクションを追加” ボタンをクリックしてください。

  7. 『連携先』に先ほど作成した、『書籍検索』を選択してください。

  8. 検索ワードに一致した書籍情報をカルーセル表示します。
    『シナリオの流れ』エリアから『外部連携結果をカルーセル表示』アクションを追加し、以下の例を参考に入力してください。

    入力例:
    『タイトル』 検索結果カルーセル
    『リスト変数名』 検索結果
    ※『リスト変数名』に設定する「検索結果」は、「手順(外部システム連携1 書籍検索)」の「Response Map」に設定した変換先名です。

    『カルーセルアイテム』
    アイテムID {{id}}
    アイテムタイトル {{volumeInfo.title}}
    本文 {{searchInfo.textSnippet}}
    画像URL {{{volumeInfo.imageLinks.thumbnail}}}
    画像URLのような、HTMLでエスケープが必要な文字(&, <, >など)を含むURLを使用する場合は、波括弧3つ  {{{   }}} で囲んでください。
    『カルーセル選択肢』
    詳細を見る -
    著者を見る -
    webページに飛ぶ -
  9. カルーセル選択肢の各項目が選択された時に表示する書籍の詳細情報を取得します。
    『シナリオの流れ』エリアの中にあるリストから『外部システム連携』アクションを追加し、『連携先』に先ほど作成した、『書籍詳細』を選択してください。

  10. カルーセル選択肢の『詳細を見る』が選択された場合は、取得した詳細情報に含まれる「書籍の説明」を表示します。
    『シナリオの流れ』エリアの中にあるリストから『テキスト発言』アクションを追加し、以下の例を参考に入力してください。

    入力例:
    『発言内容』 {{書籍の説明}}
    『実行条件』 「検索結果カルーセル.label」= 「詳細を見る」
    (『実行条件』はアクション内下部にある下矢印をクリックし設定してください。)
    ※カルーセルアクションの『タイトル』に『.label』を付けると、カルーセル選択肢で選択した項目の表示名が取得できます。

  11. 『シナリオの流れ』エリアの中にあるリストから『テキスト発言』アクションを追加し、以下の例を参考に入力してください。
    入力例:
    『発言内容』 著者は下記になります
    『実行条件』 「検索結果カルーセル.label」= 「著者を見る」
  12. カルーセル選択肢の『著者を見る』が選択された場合は、取得した詳細情報に含まれる「著者」情報を表示します。
    複数著者がいる場合があるため著者をリストで表示できるようにします。
    『シナリオの流れ』エリアから『外部連携結果をリスト表示』アクションを追加し、以下の例を参考に入力してください。

    入力例:
    『リスト変数名』 著者
    『項目毎の表示内容』 {{.}}
    『実行条件』 「検索結果カルーセル.label」= 「著者を見る」
    ※{{.}}と入力することで、配列データの情報を全て取得することができます。

  13. カルーセル選択肢の『webページに飛ぶ』が選択された場合は、取得した詳細情報に含まれる「webページ」へのリンクを表示します。
    『シナリオの流れ』エリアの中にあるリストから『テキスト発言』アクションを追加し、『発言内容』に以下の例を参考に入力してください。

    入力例:
    『発言内容』 下記がGoogle ブックスへのWebページになります。 {{webページ}}
    『実行条件』 「検索結果カルーセル.label」= 「webページに飛ぶ」
  14. 保存”ボタンをクリックしてください。

  15. 「学習データが更新されています。反映するには学習ボタンを押してください。」というメッセージが表示されますので、 “保存してチャットボットを学習” ボタンをクリックしてください。

Last updated on 2018/12/11.