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

「外部連携結果をカルーセル表示」アクションを利用することで、外部システム連携で取得した値をもとに、チャットウィンドウにカルーセルパネル（絵・写真・情報）を最大10件表示することができます。
※「外部連携結果をカルーセル表示」アクションは、LINE WORKSでは使用することができません。

今回は、Googleが提供している〔 Google Books API 〕を利用し、取得した書籍情報をカルーセル表示します。

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

手順（外部システム連携 書籍検索）

1. 左メニューの『チャットボット一覧』より設定を行うチャットボットを選択し、『外部システム連携』タブから ”新規作成”ボタンをクリックしてください。
   
2. 『外部システム連携先』に連携先名を入力してください。
3. 『説明』に連携先の説明文を入力してください。
   
4. 『タイプ』から、「HTTP(S)」を選択してください。
5. 『URL』に接続先URLを入力してください。
   
   [入力例]
   https://www.googleapis.com/books/v1/volumes?q={{検索ワード}}
   
6. 『Response Map』に以下の例を参考に各項目を入力し、 “保存” ボタンをクリックしてください。
   変換先に指定する検索結果は外部連携で取得したデータを格納する変数名になります。
   
   [入力例]
   

   変換元	変換先
   items	検索結果

   
7. 作成した外部システム連携が問題なく動作しているかどうかテストを行います。
   “テスト” ボタンをクリックしてください。
   
8. 外部連携の実行画面が表示されますので、『検索ワード』の『値』を入力し “実行” ボタンをクリックしてください。
   
9. 外部連携の実行後、「検索結果」に格納される取得したデータが『値』に表示されます。
   後に作成するDialogPlayシナリオでは、ここで取得したデータの”id”や”volumeInfo”内の”title”等を使用しています。
   

つぎに、GoogleBooks APIを利用して、書籍の詳細情報を取得する外部システム連携を作成します。

手順（外部システム連携 書籍詳細）

1. チャットボット画面に戻り、『外部システム連携』タブから ”新規作成”ボタンをクリックしてください。
   
2. 『外部システム連携先』に連携先名を入力してください。
3. 『説明』に連携先の説明文を入力してください。
   
4. 『タイプ』から、「HTTP(S)」を選択してください。
5. 『URL』に接続先URLを入力してください。
   
   [入力例]
   https://www.googleapis.com/books/v1/volumes/{{検索結果カルーセル.id}}
   
6. 『Response Map』に以下の例を参考に各項目を入力し、 “保存” ボタンをクリックしてください。
   
   [入力例]
   

   変換元	変換先
   volumeInfo.description	書籍の説明
   volumeInfo.authors	著者

   

手順（シナリオ作成）

1. チャットボット画面に戻り、『シナリオ一覧』タブから”新規作成”ボタンをクリックしてください。
   
2. 『シナリオ名』を入力してください。
3. 『ユーザー発言例（発言例タブ）』を入力してください。
   
4. 『シナリオの流れ』エリアの中にあるリストから「ヒアリング」を選択し、 “アクションを追加” ボタンをクリックしてください。
   
   
   1. 『ヒアリング項目』に以下例を参考に各項目を入力してください。
      
      [入力例]
      

      No	ヒアリング項目名	タイプ		項目ごとの質問文
      1	検索ワード	テキスト全体	@text	検索する書籍に関するキーワードを入力してください。（著者、タイトルなど）

      
5. 『シナリオの流れ』エリアの中にあるリストから「外部システム連携」アクションを追加し、『連携先』に「手順（外部システム連携 書籍検索）」で作成した、「書籍検索」を選択してください。
   
6. カルーセル選択肢の各項目が選択された時に表示する書籍の詳細情報を取得します。
   『シナリオの流れ』エリアから「外部連携結果をカルーセル表示」を選択し、 “アクションを追加” ボタンをクリックしてください。
   『外部連携結果をカルーセル表示』の各項目を設定します。
   1. 『タイトル』を入力してください。選択された要素を代入する変数名になります。
   2. 『リスト変数名』を入力してください。外部連携結果をリスト形式で表示するデータが格納された変数名になります。
      今回は、「手順（外部システム連携 書籍検索）」の『Response Map』の変換先に指定した「検索結果」を利用します。
      
   3. 『カルーセルアイテム』に、以下の例を参考に各項目を入力してください。
      リスト変数名「検索結果」に格納されているデータ要素を設定しています。
      
      [入力例]
      

      アイテムID	{{id}}
      アイテムタイトル	{{volumeInfo.title}}
      本文	{{searchInfo.textSnippet}}
      画像URL	{{{volumeInfo.imageLinks.thumbnail}}}

      ※ 画像URLのように、HTMLでエスケープが必要な文字（&, <, >など）を含む文字列を使用する場合は、波括弧3つ {{{   }}} で囲んでください。
      
      
      [画像URL要件]
      

      対応画像形式	JPEG、PNG
      対応URL	httpsで始まる画像URLのみ登録できます。

   4. 『カルーセル選択肢』に、以下の例を参考に各項目を設定します。
      
      [入力例]
      

      タイプ	表示名	値
      変数に値をセット	詳細を見る	-
      変数に値をセット	著者を見る	-
      URLを開く	webページに飛ぶ	{{{volumeInfo.infoLink}}}

      
      
      [カルーセル選択肢]
      

      名称	説明
      タイプ	「変数に値をセット」または「URLを開く」を選択します。
      表示名	選択肢の表示名になります。
      値	「変数に値をセット」の場合は、変数にセットする値を設定します。（省略した場合は表示名と同一になります。） 「URLを開く」の場合は、対象URLを設定します。

   5. 選択肢ではなく、カルーセルアイテムの画像または本文がクリックされた時に、特定の処理を行いたい場合は、『画像または本文がクリックされた場合にも指定した処理を行う』にチェックを入れ、『タイプ』、『値』を設定してください。
      ※公開先がWeb、LINEのみ利用可能です。
      
7. カルーセル選択肢の各項目が選択された時に表示する書籍の詳細情報を取得します。
   『シナリオの流れ』エリアの中にあるリストから「外部システム連携」アクションを追加し、『連携先』に「手順（外部システム連携 書籍詳細）」で作成した、「書籍詳細」を選択してください。
   
8. カルーセル選択肢の『詳細を見る』が選択された場合は、取得した詳細情報に含まれる「書籍の説明」を表示します。
   『シナリオの流れ』エリアの中にあるリストから『テキスト発言』アクションを追加し、以下の例を参考に入力してください。
   
   [入力例]
   『発言内容』 　{{書籍の説明}}
   
   アクションの下側に表示される”“をクリックし、『実行条件』に以下の例を参考に各項目を入力してください。
   
   [実行条件]
   「検索結果カルーセル.label」= 「詳細を見る」
   ※カルーセルアクションの「タイトル」に「.label」を付けると、カルーセル選択肢で選択した項目の表示名が取得できます。
   
9. 『シナリオの流れ』エリアの中にあるリストから「テキスト発言」アクションを追加し、以下の例を参考に各項目を入力してください。
   
   [入力例]
   『発言内容』　　著者は下記になります
   
   [実行条件]
   「検索結果カルーセル.label」= 「著者を見る」
   
10. カルーセル選択肢の「著者を見る」が選択された場合は、取得した詳細情報に含まれる「著者」情報を表示します。
    書籍により複数著者である場合を想定し、著者をリストで表示できるようにします。
    『シナリオの流れ』エリアから「外部連携結果をリスト表示」アクションを追加し、以下の例を参考に入力してください。
    
    [入力例]
    『リスト変数名』　　　　著者
    『項目毎の表示内容』　　{{.}}
    ※ {{.}}と入力することで、外部システム連携で取得した「リスト変数名」の配列データの情報を全て取得することができます。
    
    [実行条件]
    「検索結果カルーセル.label」= 「著者を見る」
    
11. ”保存”ボタンをクリックしてください。
    
12. 「学習データが更新されています。反映するには学習ボタンを押してください。」というメッセージが表示されますので、 “保存してチャットボットを学習” ボタンをクリックしてください。
    
13. 『シミュレーター』機能で動作を確認してください。