「外部連携結果をカルーセル表示」アクションを利用することで、外部システム連携で取得した値をもとに、チャットウィンドウにカルーセルパネル（絵・写真・情報）を最大10件表示することができます。
※「外部連携結果をカルーセル表示」アクションは、LINE WORKSでは使用できません。
※ 本アクションは、 Standardプラン以上のみ でご利用いただけます。
本記事では、Googleが提供している〔 Google Books API 〕を利用し、取得した書籍情報をカルーセルで表示します。
目次
機能概要
タイトル
選ばれた選択肢の要素を辞書形式で格納する変数名を設定します。
辞書データには以下の要素が含まれます。
| {{変数名.index}} | アイテムの番号 |
| {{変数名.id}} | アイテムのID |
| {{変数名.action}} | 選択肢の値 |
リスト変数名
リスト形式で表示する配列データが格納された変数名を設定します。
配列データ内の各要素の値は、項目ごとの表示内容の中で、{{.}}の形式で記述することで参照できます。
カルーセルアイテム
リスト変数に指定したリストの項目ごとにカルーセルアイテムの内容を設定します。
カルーセルアイテムの上限は10件です。
アイテムID
値を設定することでどのアイテムの選択肢が選ばれたのか区別できます。
アイテムタイトル
アイテムの見出しを設定します。
本文
アイテムの本文を設定します。
画像URL
表示させる画像のURLを設定します。
対応画像形式はPNG・JPEG、httpsで始まる画像URLのみ登録できます。
選択肢
カルーセル下部にボタンとして表示される項目を設定します。
タイプ
選択された場合にどのような処理を行うかを設定します。
表示名
選択肢として表示されるラベル名を設定します。
値
タイプに設定された内容により動作が異なります。
| 選択タイプ | 説明 |
|---|---|
| 変数に値をセット | 変数にセットする値を設定（省略した場合は表示名と同一になる） |
| URLを開く | 対象URLを設定 |
デフォルトアクション(画像または本文がクリックされた場合の処理)を指定する
選択肢ではなく、カルーセルアイテムの画像または本文がクリックされた時に、特定の処理を行いたい場合は、『画像または本文がクリックされた場合にも指定した処理を行う』にチェックを入れ、『タイプ』、『値』を設定してください。
※公開先がWeb、LINEのみ利用可能です。
外部システム連携作成（書籍検索）
はじめに、GoogleBooks APIを利用して、ユーザーが入力した検索ワードに該当する書籍情報を取得する外部システム連携を作成します。
- チャットボットの『外部システム連携』タブから ”新規作成”ボタンをクリックしてください。
- 以下の例を参考に各項目を入力し、”保存”ボタンをクリックしてください。
No. 項目名 例 1 外部システム連携先 書籍検索 2 説明 Google Booksを利用して書籍の検索結果を表示 3 タイプ HTTP(S) 4 URL https://www.googleapis.com/books/v1/volumes?q={{検索ワード}} 5 Method GET 6 Response Type JSON 7 Resonse Map items 検索結果 8 外部システム連携の実行結果をカスタマイズする 任意 - 作成した外部システム連携が問題なく動作しているかどうかテストを行います。
“テスト” ボタンをクリックしてください。
- 外部連携の実行画面が表示されますので、『検索ワード』の『値』を入力し “実行” ボタンをクリックしてください。
- 外部連携の実行後、「検索結果」に格納される取得したデータが『値』に表示されます。
後に作成するDialogPlayシナリオでは、ここで取得したデータの”id”や”volumeInfo”内の”title”等を使用しています。
外部システム連携作成（書籍詳細）
つぎに、GoogleBooks APIを利用して、書籍の詳細情報を取得する外部システム連携を作成します。
- チャットボット画面に戻り、『外部システム連携』タブから ”新規作成”ボタンをクリックしてください。
- 以下の例を参考に各項目を入力し、”保存”ボタンをクリックしてください。
No. 項目名 例 1 外部システム連携先 書籍詳細 2 説明 Google Booksで検索した書籍の詳細を表示 3 タイプ HTTP(S) 4 URL https://www.googleapis.com/books/v1/volumes/{{検索結果カルーセル.id}} 5 Method GET 6 Response Type JSON 7 Resonse Map volumeInfo.description 書籍の説明 volumeInfo.authors 著者 8 外部システム連携の実行結果をカスタマイズする 任意
シナリオ作成
- チャットボット画面に戻り、『シナリオ一覧』タブから”＋シナリオを追加”ボタンをクリックしてください。
- 『シナリオ名』『ユーザー発言例（発言例タブ）』を入力してください。
- 「ヒアリング」アクションを追加し、以下の例を参考に各項目を入力してください。
項目名 例 ヒアリング項目 ヒアリング項目名 検索ワード タイプ @text 項目ごとの質問 検索する書籍に関するキーワードを入力してください。（著者、タイトルなど） 任意 任意 - 「外部システム連携」アクションを追加し、以下の例を参考に各項目を入力してください。
No. 項目名 説明 例 1 連携先 「手順（外部システム連携 書籍検索）」で作成した連携先を設定 書籍検索 2 外部システム連携に失敗した場合はシナリオを強制終了する 有効にすることで外部システム連携失敗時の動作を設定できる
成功：次のアクションへ進む
失敗：エラーメッセージを表示してシナリオを強制終了任意 - カルーセル選択肢の各項目が選択された時に表示する書籍の詳細情報を取得します。
「外部連携結果をカルーセル表示」を選択し、 以下の例を参考に各項目を入力してください。
No. 項目名 例 1 タイトル 検索結果カルーセル 2 リスト変数名 検索結果 3 アイテムID {{id}} 4 アイテムタイトル {{volumeInfo.title}} 5 本文 {{searchInfo.textSnippet}} 6 画像URL {{{volumeInfo.imageLinks.thumbnail}}}
※ 画像URLのように、HTMLでエスケープが必要な文字（&, <, >など）を含む文字列を使用する場合は、波括弧3つ {{{ }}} で囲んでください。7 選択肢 ① 変数に値をセット 詳細を見る ② 変数に値をセット 著者を見る ③ URLを開く Webページに飛ぶ {{{volumeInfo.infoLink}}} 8 デフォルトアクション(画像または本文がクリックされた場合の処理)を指定する 任意 9 タイプ／値 任意
『デフォルトアクション(画像または本文がクリックされた場合の処理)を指定する』を有効にした場合に設定 - カルーセル選択肢の各項目が選択された時に表示する書籍の詳細情報を取得します。
「外部システム連携」アクションを追加し、以下の例を参考に各項目を入力してください。
No. 項目名 説明 例 1 連携先 「手順（外部システム連携 書籍詳細）」で作成した連携先を設定 書籍詳細 2 外部システム連携に失敗した場合はシナリオを強制終了する 有効にすることで外部システム連携失敗時の動作を設定できる
成功：次のアクションへ進む
失敗：エラーメッセージを表示してシナリオを強制終了任意 - カルーセル選択肢の『詳細を見る』が選択された場合は、取得した詳細情報に含まれる「書籍の説明」を表示します。
「テキスト発言」アクションを追加し、以下の例を参考に各項目を入力してください。
実行条件は”
“をクリックすることで展開されます。
No. 項目名 例 1 発言内容 {{書籍の説明}} 2 実行条件 検索結果カルーセル.label
※カルーセルアクションの「タイトル」に「.label」を付けると、カルーセル選択肢で選択した項目の表示名が取得できます。= 詳細を見る - 「テキスト発言」アクションを追加し、以下の例を参考に各項目を入力してください。
No. 項目名 例 1 発言内容 著者は下記になります 2 実行条件 検索結果カルーセル.label = 著者を見る - カルーセル選択肢の「著者を見る」が選択された場合は、取得した詳細情報に含まれる「著者」情報を表示します。
書籍により複数著者である場合を想定し、著者をリストで表示できるようにします。
「外部連携結果をリスト表示」アクションを追加し、以下の例を参考に各項目を入力し”保存”ボタンをクリックしてください。
No. 項目名 例 1 リスト変数名 著者 2 項目毎の表示内容 {{.}}
※ {{.}}と入力することで、外部システム連携で取得した「リスト変数名」の配列データの情報を全て取得することができます。３ 実行条件 検索結果カルーセル.label = 著者を見る - 『シミュレーター』機能で動作を確認してください。
