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로 지정하면,
레이아웃의 어떤 구성 요소에 대한 명령인지 지정할 수 있습니다.

끝.

좋은 웹페이지 즐겨찾기