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

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"
            }
          ]
        }
      ]
    }
  }
}

3 navigation

含まれるコンポーネントの遷移方法の指定は、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();

6 最後に

今回は、Pagerコンポーネントについて確認してみました。

Alexaでは、一回のレスポンスに１ページの表示が基本ですが、Pagerを使用すると、１回のレスポンスで複数の発話と複数の画面を組み合わせることが可能になります。

PagerとSpeakItemを組み合わせることで、一気にAlexaの表現が広がるかも知れません。