Edited at

Alexa Presentation Language で Pager を自動スライドする


はじめに

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 を使用するように設定します。

スクリーンショット 2018-11-19 19.41.55.png



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 を自動スライドします。

画面表示して3秒で次のスライド、そしてまた次のスライド、みたいなものです。

サンプルコード ↓

    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 で指定することで、

レイアウト上のどのコンポーネントに対するコマンドかを指定できます。

おわり。