APL RenderDocumentディレクティブ



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

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

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

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.0",
                "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"
}