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을 사용하도록 구성합니다.
↑
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로 지정하면,
레이아웃의 어떤 구성 요소에 대한 명령인지 지정할 수 있습니다.
끝.
Reference
이 문제에 관하여(Alexa Presentation Language에서 Pager 자동 슬라이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/isann_tech/items/8ef507af808dff9fa22b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
"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을 자동으로 슬라이드합니다.
화면 표시하고 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로 지정하면,
레이아웃의 어떤 구성 요소에 대한 명령인지 지정할 수 있습니다.
끝.
Reference
이 문제에 관하여(Alexa Presentation Language에서 Pager 자동 슬라이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/isann_tech/items/8ef507af808dff9fa22b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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();
Reference
이 문제에 관하여(Alexa Presentation Language에서 Pager 자동 슬라이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/isann_tech/items/8ef507af808dff9fa22b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)