この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
CX事業本部の平内(SIN)です。
Amazon AlexaのAPLを構成するPagerコンポーネントは、複数のコンポーネントを横一列に保持し、遷移させることができます。
今回は、Pagerコンポーネントの使い方について、確認してみたいと思います。
2 複数のコンポーネント
最初の動画のAPLドキュメントは、以下のようなっています。
Pagerコンポーネントのitemsに2つの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コンポーネントを操作するコマンドには、下記の2つがあります。
- AutoPage
- SetPage
(1) AutoPageコマンド
AutoPageコマンドは、Pagerコンポーネントのページを自動的に進めて表示できます。
指定できるパラメータは、以下のようなものがあります。
- componentId (対象となるンポーネントID)
- count (表示ページ数)
- duration (ページ間で待機する時間)
下記のコードは、全ページを自動で遷移させている例です。
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 (遷移するページ数)
発話するコマンドである、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では、一回のレスポンスに1ページの表示が基本ですが、Pagerを使用すると、1回のレスポンスで複数の発話と複数の画面を組み合わせることが可能になります。
PagerとSpeakItemを組み合わせることで、一気にAlexaの表現が広がるかも知れません。