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

# はじめに
Alexa Presentation Language(APL) が 2018/11 現在、 Public Beta です。
[Now Available: Alexa Presentation Language (Public Beta) for Multimodal Experiences : Alexa Blogs](https://developer.amazon.com/ja/blogs/alexa/post/0d2ad283-b7c3-48ba-8313-40f2b5fdc19d/alexa-presentation-language-now-available)

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](https://qiita-image-store.s3.amazonaws.com/0/34022/0e113bad-c231-624d-498c-dea1bb7e8c3d.png)

↑
Alexa Presentation Language を ON にします。
その上で、コードで次のようにすると APL 上で画像が表示されます。

```js
    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 についての詳しいドキュメントは[こちら](https://developer.amazon.com/ja/docs/alexa-presentation-language/apl-pager.html)。

また、[APL Commands | Alexa Presentation Language](https://developer.amazon.com/ja/docs/alexa-presentation-language/apl-commands.html) をつかって Pager を自動スライドします。
画面表示して３秒で次のスライド、そしてまた次のスライド、みたいなものです。

サンプルコード ↓

```js
    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 で指定することで、
レイアウト上のどのコンポーネントに対するコマンドかを指定できます。


おわり。