はじめに
Alexa Presentation Language(APL) が 2018/11 現在、 Public Beta です。
Now Available: Alexa Presentation Language (Public Beta) for Multimodal Experiences : Alexa Blogs
APL の情報がまだまだ少ないので残しておきます。
About APL
「Pager の自動スライド」といきなり言われても、
2018/11 時点では APL とは、という気もするので雑に APL のことを紹介します。
APL のことをすごくざっくり言うと、json で記述するレイアウトシステムです。
Alexa は、 ask-sdk で記述しない場合、レスポンスボディの json によって振る舞いを決めます。
ask-sdk はこれを wrap したものです。
※npm latest の ask-sdk で APL 利用できると思いますが未確認です。。。 addDirective 使うなら大丈夫だと思いますが・・・。
APL を使用するにはデベロッパーコンソールでスキルで APL を使用するように設定します。
↑
Alexa Presentation Language を ON にします。
その上で、コードで次のようにすると APL 上で画像が表示されます。
return handlerInput.responseBuilder
.speak('Hello APL.')
.reprompt('Hello APL.')
.addDirective({
"type" : "Alexa.Presentation.APL.RenderDocument",
"token" : "token",
"document" : {
"type" : "APL",
"version" : "1.0",
"theme" : "dark",
"import" : [],
"resources" : [],
"styles" : {},
"layouts" : {},
"mainTemplate": {
"item": [
{
"type" : "Container",
"alignItems" : "center",
"direction" : "column",
"justifyContent": "center",
"item" : [
{
"type" : "Image",
"source": "https://zono-img.appspot.com/480x480/00BFFF.jpg",
"width" : "480",
"height": "480"
}
]
}
]
}
}
}
)
.getResponse();
Pager の自動スライド
Pager はコンポーネントの一つで、スワイプして次のページに遷移するものです。
スライダーですね。
Pager についての詳しいドキュメントはこちら。
また、APL Commands | Alexa Presentation Language をつかって Pager を自動スライドします。
画面表示して３秒で次のスライド、そしてまた次のスライド、みたいなものです。
サンプルコード ↓
return handlerInput.responseBuilder
.speak('Hello APL.')
.reprompt('Hello APL.')
.addDirective(
{
"type" : "Alexa.Presentation.APL.RenderDocument",
"token" : "token",
"document": {
"type" : "APL",
"version" : "1.0",
"theme" : "dark",
"import" : [],
"resources" : [],
"styles" : {},
"layouts" : {},
"mainTemplate": {
"item": [
{
"type" : "Container",
"alignItems" : "center",
"direction" : "column",
"justifyContent": "center",
"item" : [
{
"type" : "Pager",
"width" : "480",
"height" : "480",
"textAlignVertical": "center",
"textAlign" : "center",
"navigation" : "normal",
"initialPage" : 0,
"id" : "foobar",
"item" : [
{
"type" : "Image",
"source": "https://zono-img.appspot.com/480x480/0033FF.jpg",
"width" : "480",
"height": "480"
},
{
"type" : "Image",
"source": "https://zono-img.appspot.com/480x480/00BFFF.jpg",
"width" : "480",
"height": "480"
},
{
"type" : "Image",
"source": "https://zono-img.appspot.com/480x480/FFBFFF.jpg",
"width" : "480",
"height": "480"
}
]
}
]
}
]
}
}
}
)
.addDirective(
{
"type" : "Alexa.Presentation.APL.ExecuteCommands",
"token" : "token",
"commands": [
{
"type" : "AutoPage",
"componentId": "foobar",
"duration" : 3000
}
]
}
)
.getResponse();
↑
Pager に id 属性を追加します。
これを ExecuteCommands の componentId で指定することで、
レイアウト上のどのコンポーネントに対するコマンドかを指定できます。
おわり。