Getting Started Alexa APL: Container

Alexa用ディスプレイマークアップ言語のAPLの覚書シリーズです。今回はContainerを中心にいろいろ触っていきましょう。

Container未使用状態

まずは画像とテキストを並べてみます。

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [],
    "styles": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [],
        "items": [
            {
                "type": "Text",
                "text": "Hello"
            },
            {
                "type": "Image",
                "source": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
            }
        ]
    }
}

レンダリング結果がこちら。

画像がありません。

Containerでラップする

Containerの子要素に移動させます。

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [],
    "styles": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [],
        "items": [
            {
                "type": "Container",
                "items": [
                    {
                        "type": "Text",
                        "text": "Hello"
                    },
                    {
                        "type": "Image",
                        "source": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
                    }
                ]
            }
        ]
    }
}

画像が表示されました。

Containerでスタイルを調整する

基本的にはflexboxの要領で調整できます。

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [],
    "styles": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [],
        "items": [
            {
                "type": "Container",
                "direction": "row",
                "alignItems": "center",
                "justifyContent": "spaceAround",
                "height": "100vh",
                "width": "100vw",
                "items": [
                    {
                        "type": "Text",
                        "text": "Hello"
                    },
                    {
                        "type": "Image",
                        "source": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
                    }
                ]
            }
        ]
    }
}

テキストと画像が対称的に配置されました。

Containerをネストする

Containerをネストさせることで、より柔軟なレイアウトを作ることができます。

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [],
    "styles": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [],
        "items": [
            {
                "type": "Container",
                "direction": "row",
                "alignItems": "center",
                "justifyContent": "spaceBetween",
                "height": "100vh",
                "width": "100vw",
                "items": [
                    {
                        "type": "Container",
                        "width": "50vw",
                        "alignItems": "center",
                        "items": [{
                            "type": "Text",
                            "text": "Hello",
                            "fontSize": "100dp"
                        }, {
                            "type": "Text",
                            "text": "World"
                        }]
                    }, {
                            "scale": "best-fill",
                            "width": "50vw",
                            "height": "100vh",
                            "type": "Image",
                            "source": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
                    }
                ]
            }
        ]
    }
}

Keynoteなどで作成されたスライドにでてきそうな表示になりました。

Frameを組み合わせる

Frameをここに入れることで、スタイルをより細かくつけることができます。

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [],
    "styles": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [],
        "items": [
            {
                "type": "Container",
                "direction": "row",
                "alignItems": "center",
                "justifyContent": "spaceBetween",
                "height": "100vh",
                "width": "100vw",
                "items": [
                    {
                        "type": "Container",
                        "width": "50vw",
                        "items": [
                        {
                            "type": "Container",
                            "width": "100%",
                            "alignItems": "center",
                            "justifyContent": "center",
                            "height": "85vh",
                            "items": [
                                {
                                    "type": "Text",
                                    "text": "Hello",
                                    "fontSize": "100dp"
                                }, {
                                    "type": "Text",
                                    "text": "World"
                                }
                            ]
                        }, {
                            "type": "Frame",
                            "backgroundColor": "#f5f5f5",
                            "height": "15vh",
                            "width": "100%",
                            "item": {
                                "type": "Text",
                                "color": "#000",
                                "text": "say hello",
                                "lineHeight": "2",
                                "textAlign": "center"
                            }
                        }]
                    }, {
                            "scale": "best-fill",
                            "width": "50vw",
                            "height": "100vh",
                            "type": "Image",
                            "source": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
                    }
                ]
            }
        ]
    }
}

ヒントや脚注を出す部分ができました。

Layout化する

そして出来上がった構成をlayoutsにまとめましょう。これで再利用性が高まります。

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [],
    "styles": {},
    "layouts": {
        "myFirstLayout": {
            "parameters": [],
            "item": [
                {
                    "type": "Container",
                    "direction": "row",
                    "alignItems": "center",
                    "justifyContent": "spaceBetween",
                    "height": "100vh",
                    "width": "100vw",
                    "items": [
                        {
                            "type": "Container",
                            "width": "50vw",
                            "items": [
                                {
                                    "type": "Container",
                                    "width": "100%",
                                    "alignItems": "center",
                                    "justifyContent": "center",
                                    "height": "85vh",
                                    "items": [
                                        {
                                            "type": "Text",
                                            "text": "Hello",
                                            "fontSize": "100dp"
                                        }, {
                                            "type": "Text",
                                            "text": "World"
                                        }
                                    ]
                                }, {
                                    "type": "Frame",
                                    "backgroundColor": "#f5f5f5",
                                    "height": "15vh",
                                    "width": "100%",
                                    "item": {
                                        "type": "Text",
                                        "color": "#000",
                                        "text": "say hello",
                                        "lineHeight": "2",
                                        "textAlign": "center"
                                    }
                                }
                            ]
                        }, {
                                "scale": "best-fill",
                                "width": "50vw",
                                "height": "100vh",
                                "type": "Image",
                                "source": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
                        }
                    ]
                }
            ]
        }
    },
    "mainTemplate": {
        "parameters": [],
        "items": [
            {
              "type": "myFirstLayout"  
            }
        ]
    }
}

mainTemplate.itemsがすっきりしました。が、このままでは値を変更できませんのでparametersを使います。

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [],
    "styles": {},
    "layouts": {
        "myFirstLayout": {
            "parameters": [
                {
                    "name": "title",
                    "type": "string"
                },{
                    "name": "subTitle",
                    "type": "string"
                },{
                    "name": "imageUrl",
                    "type": "string"
                },{
                    "name": "hint",
                    "type": "string"
                }
            ],
            "item": [
                {
                    "type": "Container",
                    "direction": "row",
                    "alignItems": "center",
                    "justifyContent": "spaceBetween",
                    "height": "100vh",
                    "width": "100vw",
                    "items": [
                        {
                            "type": "Container",
                            "width": "50vw",
                            "items": [
                                {
                                    "type": "Container",
                                    "width": "100%",
                                    "alignItems": "center",
                                    "justifyContent": "center",
                                    "height": "85vh",
                                    "items": [
                                        {
                                            "type": "Text",
                                            "text": "${title}",
                                            "fontSize": "100dp"
                                        }, {
                                            "type": "Text",
                                            "text": "${subTitle}"
                                        }
                                    ]
                                }, {
                                    "type": "Frame",
                                    "backgroundColor": "#f5f5f5",
                                    "height": "15vh",
                                    "width": "100%",
                                    "item": {
                                        "type": "Text",
                                        "color": "#000",
                                        "text": "${hint}",
                                        "lineHeight": "2",
                                        "textAlign": "center"
                                    }
                                }
                            ]
                        }, {
                                "scale": "best-fill",
                                "width": "50vw",
                                "height": "100vh",
                                "type": "Image",
                                "source": "${imageUrl}"
                        }
                    ]
                }
            ]
        }
    },
    "mainTemplate": {
        "parameters": [],
        "items": [
            {
              "type": "myFirstLayout",
              "title": "Hello",
              "subTitle": "Alexa",
              "hint": "Alexa, hello world",
              "imageUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
            }
        ]
    }
}

いい感じです。最後に.mainTemplate.parametersとつなぎこんで外から触れるようにしておきましょう。

{
    // 略,
    "mainTemplate": {
        "parameters": ["payload"],
        "items": [
            {
              "type": "myFirstLayout",
              "title": "${payload.examplePayload.title}",
              "subTitle": "${payload.examplePayload.subTitle}",
              "hint": "${payload.examplePayload.hint}",
              "imageUrl": "${payload.examplePayload.imageUrl}"
            }
        ]
    }
}

JSONですが、考え方はHTML / JSXライクです。怖がらずに触っていきましょう。