[日本語Alexa] APLにおけるPagerコンポーネントの利用　〜１回のレスポンスで複数の画面を返すことができます〜

音声アシスタント特集

#AWS

#APL

#Amazon Alexa

SIN

2019.07.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

CX事業本部の平内（SIN）です。

Amazon AlexaのAPLを構成するPagerコンポーネントは、複数のコンポーネントを横一列に保持し、遷移させることができます。

今回は、Pagerコンポーネントの使い方について、確認してみたいと思います。

2 複数のコンポーネント

最初の動画のAPLドキュメントは、以下のようなっています。

Pagerコンポーネントのitemsに２つのImageコンポーネントを含んでいます。Pager内の各コンポーネントは、スクロールのように同時に存在できず、切り替わることになります。

{
  "type": "APL",
  "version": "1.0",
  "mainTemplate": {
    "item": {
      "type": "Container",
      "width": "100vw",
      "height": "100vh",
      "item": [
        {
          "type": "Pager",
          "width": "100vw",
          "height": "100vh",
          "items": [
            {
              "type": "Image",
              "source": "https://d1eju4ngjniac3.cloudfront.net/dog2.jpg",
              "width": "100vw",
              "height": "100vh"
            },
            {
              "type": "Image",
              "source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg",
              "width": "100vw",
              "height": "100vh"
            }
          ]
        }
      ]
    }
  }
}

含まれるコンポーネントの遷移方法の指定は、navigationプロパティで行います。

normal スワイプで遷移可能（デフォルト）
none スワイプでの遷移不能（コマンドでは遷移可能）
wrap スワイプで遷移可能。最後まで行くと最初に戻る
forward-only スワイプで後方への遷移のみ可能

4 部分適用

Pagerの領域は、画面全体である必要はありません。下記は、Containerコンポーネントの上部80%にPagerコンポーネント、下部20%にTextコンポーネントを配置しています。

5 コマンド操作

Pagerコンポーネントを操作するコマンドには、下記の２つがあります。

AutoPage
SetPage

(1) AutoPageコマンド

AutoPageコマンドは、Pagerコンポーネントのページを自動的に進めて表示できます。

指定できるパラメータは、以下のようなものがあります。

componentId (対象となるンポーネントID）
count (表示ページ数)
duration （ページ間で待機する時間）

参考:AutoPageコマンド

下記のコードは、全ページを自動で遷移させている例です。

return h.responseBuilder
    .speak(speech)
    .reprompt(speech)
    .addDirective({
        type: 'Alexa.Presentation.APL.RenderDocument',
        token: h.requestEnvelope.context.System.apiAccessToken,
        document: require('./apl/main.json'),
        datasources: {}
    })
    .addDirective({
        type : 'Alexa.Presentation.APL.ExecuteCommands',
        token: h.requestEnvelope.context.System.apiAccessToken!,
        commands: [
            {
                type: "AutoPage",
                componentId: "dogs",
                duration   : 1000
            }
        ]
    })  
    .getResponse();

(2) SetPageコマンド

SetPageコマンドは、表示ページを変更します。

指定できるパラメータは、以下のようなものがあります。

componentId （対象コンポーネントID）
position（relative|absolute）
value （遷移するページ数）

参考:SetPageコマンド

発話するコマンドである、SpeakItemと組み合わせると、「最初の発話をして、画面遷移し、続きを発話する」というようなUXを実現できます。

return h.responseBuilder
    .speak(speech)
    .reprompt(speech)
    .addDirective({
        type: 'Alexa.Presentation.APL.RenderDocument',
        token: h.requestEnvelope.context.System.apiAccessToken,
        document: require('./apl/main.json'),
        datasources: {}
    })
    .addDirective({
        type : 'Alexa.Presentation.APL.ExecuteCommands',
        token: h.requestEnvelope.context.System.apiAccessToken!,
        commands: [
            {
               type: "SpeakItem",
               componentId: "speechComponent0"
            },
            {
               type: "SetPage", 
               componentId: "dogs",
               position: "relative",
               value: 1
            },
            {
               type: "SpeakItem",
               componentId: "SpeechComponent1"
            }
        ]
    })  
    .getResponse();