この記事は公開されてから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コンポーネントを操作するコマンドには、下記の2つがあります。
- Scroll
- ScrollToIndex
(1) Scrollコマンド
Scrollコマンドは、Sequenceを一定のページ数だけ前後にスクロールさせます。ここで、ページとは、Sequenceの高さ若しくは、幅が基準となります。
指定できるパラメータは、以下のようなものがあります。
- componentId (対象となるンポーネントID)
- distance (スクロールするページ数、デフォルトは1)
なお、スクロールは、ユーザーが画面にタッチしたり、別のコマンドを受信すると停止します。
下記のコードは、それぞれ、画面上部に配置されたScrollコンポーネントで、トップに スクロールさせたものと、1ページにスクロールさせている例です。
.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
}
]
})
(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からで動作しているように見えます。
4 最後に
今回は、Sequenceコンポーネントについて確認してみました。
Sequenceコンポーネントでできることは、すべて、Containerコンポーネントでも可能のようんです。個人的には、Sequenceコンポーネントは、完全にContainerコンポーネントのサブセットであると理解しています。