APL (Alexa Presentation Language) で Hello World

概要
1. APL とは
2. APL 書き方
APL スキル作成
参考

概要

APL とは

Alexa Presentation Language（APL）を使用すると、ディスプレイを利用したスキルを作成できる。

Echo Show や Fire タブレットなどのディスプレイが付いた機器で利用を想定するスキルとなる。

ディスプレイを利用したスキルを、マルチモーダルスキルと呼ぶ。

APL 書き方

APL の実態は Json 。ほぼ CSS と同じイメーで書ける。

この JSON はコンソール内のオーサリングツール ( APL エディタ )を利用して作成できる。

実際の操作は動画見るのが良い。

AAJUG meetup APL workshop DAY1 (2021.03.26)

APL スキル作成

ハローとよんだら、HelloWorld と画面表示するスキルを作成する。

プロジェクト作成

今回は Alexa-hosted ( Node.js ) を選択する。

Custom
Alexa-hosted ( Node.js )
Provision your own

スキルの呼び出し名

ハロー

テスト

ステージを「開発中」に変更
「ハロー」と入力し、「ハロー」が返ってくること確認

画面（マルチモーダル）作成

APL 有効化

インターフェース → 「Alexa Presentation Language」を有効化

APL オーサリングツールから作成する。左メニューのマルチモーダルよりHeadline 作成する。

Visual → Create Visual Response → Headline

下記のように、コンテナ、フレーム、テキストを作成。

Json を確認したい場合 Code View を選択。この Json は後ほど利用するのでコピーしておく。

{
    "type": "APL",
    "version": "1.8",
    "license": "Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.\nSPDX-License-Identifier: LicenseRef-.amazon.com.-AmznSL-1.0\nLicensed under the Amazon Software License  http://aws.amazon.com/asl/",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "item": [
            {
                "type": "Container",
                "height": "100%",
                "width": "100%",
                "paddingTop": "16dp",
                "paddingLeft": "16dp",
                "paddingRight": "16dp",
                "paddingBottom": "16dp",
                "items": [
                    {
                        "item": [
                            {
                                "text": "HelloWorld",
                                "textAlign": "center",
                                "textAlignVertical": "center",
                                "layoutDirection": "inherit",
                                "fontSize": "50dp",
                                "type": "Text",
                                "width": "100%",
                                "height": "100%",
                                "paddingTop": "12dp",
                                "paddingBottom": "50dp"
                            }
                        ],
                        "type": "Frame",
                        "width": "100%",
                        "height": "100%"
                    }
                ]
            }
        ]
    },
    "onMount": [
        {
            "type": "SpeakItem",
            "componentId": "PlantHeadline"
        }
    ]
}

デプロイ

コードデプロイより、デフォルトで用意されているコードを改造する。

新規 jsonを lambda フォルダ配下に作成し、↑のテンプレートを貼り付ける。

lambda/apl_template.json

ハローと呼ぶと、↑の APL テンプレートが呼ぶよう修正する。デフォルトの index.js に addDirective を追加。

const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
    },
    handle(handlerInput) {
        const speakOutput = 'Welcome, you can say Hello or Help. Which would you like to try?';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .addDirective({
                type : 'Alexa.Presentation.APL.RenderDocument',
                version: '1.1',
                token: "token",
                document: require('./apl_template.json'),
                datasources: {
                    "hello": {
                        "text": "ハローAPL"
                    }
                }
            })
            .getResponse();
    }
};

最後に保存し、デプロイ。