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

끝.

좋은 웹페이지 즐겨찾기