Getting Started Alexa APL: Container
Alexa用ディスプレイマークアップ言語のAPLの覚書シリーズです。今回はContainerを中心にいろいろ触っていきましょう。 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ライクです。怖がらずに触っていきましょう。