[日本語Alexa] APLにおけるSequenceコンポーネントの利用　〜Containerのサブセットとして縦・横のスクロールに活躍する〜

音声アシスタント特集

#AWS

#APL

#Amazon Alexa

SIN

2019.07.19

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

1 はじめに

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

Amazon AlexaのAPLを構成するSequenceコンポーネントは、複数のコンポーネントを保持し、縦若しくは、横一列に配置します。

Sequenceコンポーネントは、概ね、Containerコンポネントのサブセットと言えそうです。 ScrollViewコンポーネント内の長いリストでは、Containerコンポネントより簡単に利用できますが、レイアウトの自由度は下がります。

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

2 縦及び横の配置

スクロール方向は、scrollDirectionプロパティにより、縦又は、横が選択可能です。

vertical 縦スクロール（デフォルト）
horizontal 横スクロール

一般に、テキストは縦、画像は横スクロールが最適とされています。

以下に、dataプロパティを使用して、子コントロールを配置してみます。

(1) 縦スロール

下記は、Textコンポーネントを縦に配置したものです。コンポーネントの配列は7ですが、高さを超えるため、5個まで表示されいることが確認できます。

{
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Sequence",
                "height": "100vh",
                "data": [
                    {
                        "text": "Sample001"
                    },
                    {
                        "text": "Sample002"
                    },
                    {
                        "text": "Sample003"
                    },
                    {
                        "text": "Sample004"
                    },
                    {
                        "text": "Sample005"
                    },
                    {
                        "text": "Sample006"
                    },
                    {
                        "text": "Sample007"
                    }
                ],
                "items": [
                    {
                        "type": "Text",
                        "height": "120dp",
                        "textAlign": "center",
                        "textAlignVertical": "center",
                        "text": "${data.text}"
                    }
                ]
            }
        ]
    }
}

(2) 横スロール

次の例は、Imageコンコーネントを横スクロールで配置したものです。こちらも用意された5個のコンポーネントの一部が表示されています。

{
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Sequence",
                "width": "100vw",
                "data": [
                    {
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg"
                    },
                    {
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog2.jpg"
                    },
                    {
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog3.jpg"
                    },
                    {
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog4.jpg"
                    },
                    {
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog5.jpg"
                    }
                ],
                "scrollDirection": "horizontal",
                "items": [
                    {
                        "type": "Image",
                        "width": "400dp",
                        "height": "400dp",
                        "source": "${data.source}"
                    }
                ]
            }
        ]
    }
}

3 コマンド操作

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

Scroll
ScrollToIndex

(1) Scrollコマンド

Scrollコマンドは、Sequenceを一定のページ数だけ前後にスクロールさせます。ここで、ページとは、Sequenceの高さ若しくは、幅が基準となります。

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

componentId (対象となるンポーネントID）
distance (スクロールするページ数、デフォルトは1)

なお、スクロールは、ユーザーが画面にタッチしたり、別のコマンドを受信すると停止します。

下記のコードは、それぞれ、画面上部に配置されたScrollコンポーネントで、トップにスクロールさせたものと、１ページにスクロールさせている例です。

.addDirective({
    type : 'Alexa.Presentation.APL.ExecuteCommands',
    token: h.requestEnvelope.context.System.apiAccessToken!,
    commands: [
        {
            type: "Scroll",
            componentId: "list",
            distance   : 0
        }
    ]
})

.addDirective({
    type : 'Alexa.Presentation.APL.ExecuteCommands',
    token: h.requestEnvelope.context.System.apiAccessToken!,
    commands: [
        {
            type: "Scroll",
            componentId: "list",
            distance   : 1
        }
    ]
})

参考:Scrollコマンド

(2) ScrollToIndexコマンド

Sequenceコンポーネントで、特定のコンポーネントを指定してスクロールさせます。

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

componentId (対象となるンポーネントID）
index 指定するインデックス
align 項目の配置
- first 指定した項目が一番上に配置される
- center 指定した項目が中央に配置される
- last 指定した項目が一番下に配置される
- visible （デフォルト）指定した項目全体を表示

下記の例は、4番目のコンポーネントを画面の中央にスクロールさせるものです。

.addDirective({
    type : 'Alexa.Presentation.APL.ExecuteCommands',
    token: h.requestEnvelope.context.System.apiAccessToken!,
    commands: [
        {
            "type": "ScrollToIndex",
            "componentId": "list",
            "index": 3,
            "align": "center"
            }
    ]
})

※2019/7/19現在、ドキュメント上indexは、1から始まると記載されていますが、どうも、0からで動作しているように見えます。

参考:ScrollToIndexコマンド