APL RenderDocumentスキルディレクティブ

スキルは、Alexaサービスからリクエストを受信すると、Alexa.Presentation.APL.RenderDocumentディレクティブで応答できます。RenderDocumentディレクティブには、APLドキュメントと、そのドキュメントをAlexa搭載デバイスの画面上で表示するために必要なデータソースが含まれています。RenderDocumentスキルディレクティブは、以下のプロパティに対応しています。

RenderDocumentディレクティブは、AudioPlayer、VideoApp、Dialog、Displayインターフェースのディレクティブと組み合わせて使うことはできません。

RenderDocumentのプロパティ

以下は、RenderDocumentディレクティブのプロパティです。

プロパティ	型	必須	説明
`type`	ディレクティブ	◯	「Alexa.Presentation.APL.RenderDocument」に設定します。
`token`	文字列	◯	表示されたドキュメントを参照する後続のディレクティブを発行するために使用できる文字列です。たとえば、`ExecuteCommands`ディレクティブなどです。
`document`	APLドキュメント	◯	Alexaデバイスに送信されるAPLドキュメントを含むオブジェクトです。
`datasources`	データソースオブジェクトのマップ	✕	APLドキュメントにデータをバインドするために、ほかのオブジェクトを含むことができるオブジェクトです。

以下は、RenderDocumentディレクティブを含む最小限のスキル応答のサンプルです。APLドキュメント内のmainTemplateオブジェクトは、テキスト、グラフィックイメージ、単純なグラフィカルプリミティブ、スクロール領域、子コンポーネントを配置する複数のタイプのレイアウトコンポーネントを含むプリミティブAPLコンポーネントの階層にインフレートされます。プリミティブAPLコンポーネントのプロパティは、データバインディングの式を使って設定します。データバインディングの式は、APLドキュメントから参照されたデータとコンポーネント階層の構造を組み合わせます。

この例では、各Containerコンポーネント内にあるTextコンポーネントとImageコンポーネントが、APLバインディングの式によりtemplateDataデータソース内のプロパティにバインドされます。

{
    "version": "1.0",
    "response": {
        "outputSpeech": {
            "type": "SSML",
            "ssml": "<speak>最小限のAPLドキュメントです</speak>"
        },
        "directives": [{
            "type": "Alexa.Presentation.APL.RenderDocument",
            "token": "anydocument",
            "document": {
                "type": "APL",
                "version": "1.1",
                "theme": "dark",
                "mainTemplate": {
                    "description": "********* 最小限のAPLドキュメント **********",
                    "parameters": [
                        "payload"
                    ],
                    "items": [{
                        "type": "Container",
                        "width": "100%",
                        "height": "100%",
                        "alignItems": "center",
                        "justifyContent": "center",
                        "items": [{
                                "type": "Image",
                                "source": "${payload.templateData.backgroundImage}",
                                "position": "absolute",
                                "width": "100vw",
                                "height": "100vh",
                                "scale": "best-fill"
                            },
                            {
                                "type": "Text",
                                "color": "#FFFFFF",
                                "text": "${payload.templateData.title}"
                            }
                        ]
                    }]
                }
            },
            "datasources": {
                "templateData": {
                    "title": "最小限のAPLドキュメント",
                    "backgroundImage": "https://www.example.com/images/BT1_Background.png"
                }
            }
        }]
    },
    "sessionAttributes": {},
    "userAgent": "ask-node/2.0.7 Node/v6.10.3"
}