apl-suggesterでAlexa APLのバリデーション

AlexaのGitHub Orgにきになるリポジトリがあったので試してみました。

簡単な動かし方

TypeScriptでざっと書いたコードがこちらです。

import {StaticAplTemplateValidator} from 'apl-suggester'

const aplTemplate = {
    test: true
}

const validator = new StaticAplTemplateValidator();
validator.validate(aplTemplate)
.then(validationResults => {
    console.log(validationResults)
});

Promiseで結果が返りますが、バリデーションエラーだからThrowされるわけではないことに注意です。

動かしてみる。

今回は雑にts-nodeで動かしてみます。

% ./node_modules/.bin/ts-node apl.ts    
 [
   {
     path: '/',
     errorMessage: 'should NOT have additional properties : test',
     level: 'WARNING'
   }
 ]

WARNINGがでましたね。

成功させてみる

Alexa開発コンソールのAPLエディタからJSONをもってきました。

import {StaticAplTemplateValidator} from 'apl-suggester'

const aplTemplate = {
    "type": "APL",
    "version": "1.4",
    "settings": {},
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.2.0"
        }
    ],
    "resources": [],
    "styles": {},
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "item": [
            {
                "type": "Container",
                "height": "100vh",
                "items": [
                    {
                        "type": "AlexaBackground",
                        "backgroundImageSource": "${payload.longTextTemplateData.properties.backgroundImage.sources[0].url}",
                        "backgroundBlur": false,
                        "colorOverlay": true,
                        "backgroundScale": "best-fill"
                    },
                    {
                        "type": "Container",
                        "height": "100vh",
                        "width": "100vw",
                        "items": [
                            {
                                "type": "AlexaHeader",
                                "headerTitle": "${payload.longTextTemplateData.properties.title}",
                                "headerAttributionImage": "${payload.longTextTemplateData.properties.logoUrl}",
                                "headerDivider": false
                            },
                            {
                                "type": "ScrollView",
                                "grow": 1,
                                "paddingTop": "@spacingMedium",
                                "paddingBottom": "${@spacing3XLarge + @spacingXSmall}",
                                "paddingLeft": "@marginHorizontal",
                                "paddingRight": "@marginHorizontal",
                                "items": [
                                    {
                                        "type": "Text",
                                        "id": "CheeseContent",
                                        "style": "textStyleBody",
                                        "text": "${payload.longTextTemplateData.properties.textContent.primaryText.text}",
                                        "speech": "${payload.longTextTemplateData.properties.cheeseInfoSpeech}",
                                        "textAlign": "left"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    "onMount": [
        {
            "type": "SpeakItem",
            "componentId": "CheeseContent",
            "highlightMode": "line",
            "align": "center"
        }
    ]
}

const validator = new StaticAplTemplateValidator();
validator.validate(aplTemplate).then(validationResults => {
    console.log(validationResults)
});

ScrollViewまわりなどに何か言いたいことがあるみたいですが、WARNINGはでていません。

% ./node_modules/.bin/ts-node apl.ts
 No mixin for component : ScrollView
 No mixin for component : mainTemplate
 []

typeの入力ミスなどは拾わない様子

Lintツールとしても使えるかなと思ったのですが、typeの文字列をContaineraaaなどにしてもエラーは出ませんでした。

「何をsuggestしているのか」や「なにをLintできるのか」などがまだ不明ですが、ある程度のチェックには使えそうかなと思います。

追記: まだ開発進行中？かも

README.md読み直したのですが、「まだランタイムチェックはやってない」や「描画できないことを検知するわけではない」のようなことが書かれていました。

Currently it performs static instead of runtime checks. The output warnings are aimed for suggesting best practice of writing APL templates but don’t indicate that the template can’t be rendered.

https://github.com/alexa/apl-suggester#overview

もしかすると、今後のアップデートでいろいろと機能が増えるのかもですので、要チェックかなと思います。