この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
CX事業本部の平内(SIN)です。
Amazon AlexaのAPLを構成するFrameコンポーネントは、1つの子コンポーネントを保持し、境界線と背景の色を持つコンポーネントです。 このコンポーネントの主な使い所は、以下の2つだと思います。
- 背景を持たないコンポーネントの装飾
- 絶対位置指定でのコンポーネント配置
今回は、このようなFrameコンポーネントの使い方について、確認してみたいと思います。
1 背景を持たないコンポーネントの装飾
Frameコンポーネントは、背景色や、ボーダーの指定が可能であることから、これに含まれるコンポーネントの装飾に利用することが可能です。 背景が無いコンポーネントの代表例として、Textコンポーネントを使用して確認してみました。
下の図は、Containerの中にTextコンポーネントを均等に3つ配置したものです。 そして、2番目のTextコンポーネントをFrameコンポーネントでつつみ、背景色やボーター(角丸)を指定したものです。
ちょっと注意が必要なのは、図を見ると分かるように、ボーダーの幅分だけ、内部のコンポーネントが相対的にズレるところです。センターリングなどが、思い通り行かなくなった時、この事を思い返す必要がありそうです。
(1) 背景色
背景色は、backgroundColorで設定します。デフォルトはtransparentとなっています。
(2) ボーダー
ボーダーは、borderColor及び、borderWidthで設定します。よくある、ドットなどのスタイル指定はありません。
(3) 角丸
角丸については、下記で設定します。 なお、すべての値は絶対値のディメンションとなりあす。
- borderRadius
- borderBottomLeftRadius
- borderBottomRightRadius
- borderTopLeftRadius
- borderTopRightRadius
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"paddingLeft": "0",
"paddingTop": "0",
"paddingRight": "0",
"paddingBottom": "0",
"items": [
{
"type": "Text",
"width": "auto",
"height": "33vh",
"textAlign": "center",
"textAlignVertical": "center",
"fontSize": "16dp",
"text": "Type in the text for your layout..."
},
{
"type": "Frame",
"width": "auto",
"height": "33vh",
"item": [
{
"type": "Text",
"width": "100vw",
"height": "33vh",
"textAlign": "center",
"textAlignVertical": "center",
"color": "black",
"fontSize": "16dp",
"text": "Type in the text for your layout..."
}
],
"backgroundColor": "cyan",
"borderColor": "red",
"borderRadius": "100px",
"borderWidth": "10px",
"position": "relativee"
},
{
"type": "Text",
"width": "auto",
"height": "33vh",
"textAlign": "center",
"textAlignVertical": "center",
"fontSize": "16dp",
"text": "Type in the text for your layout..."
}
]
}
]
}
}
3 絶対位置指定でのコンポーネント配置
各コンポーネントは、デフォルトで、親や上位に位置するコンポーネントからの相対位置で配置されます。しかし、Frameには、positionというプロパティがあり、これをabsoluteに設定することで絶対位置で指定が可能になります。
positionは、FrameコンポーネントとContainerコンポーネントにしか存在しないため、軽易に1つの画像などを重ねて置きたい場合は、重宝するかも知れません。
下記の図は、以下のように設定されています。
- position: absolute
- top: 10vh
- left: 15vw
{
"type": "APL",
"version": "1.1",
"settings": {},
"theme": "dark",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"commands": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"items": [
{
"type": "Image",
"width": "100vw",
"height": "100vh",
"source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg"
},
{
"type": "Frame",
"width": "20vw",
"height": "50vh",
"item": [
{
"type": "Image",
"width": "20vw",
"height": "50vh",
"source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg"
}
],
"position": "absolute",
"left": "15vw",
"top": "10vh"
}
]
}
]
}
}
4 最後に
今回は、Frameコンポーネントについて確認してみました。個人的には、Borderのスタイルや、クリッピングができるようになると、もっと重宝するのでは・・・と勝手な希望を抱いてます。
なんだかんだ、言っても、Alexa Presentation Language(APL)は、まだパブリックベータ版です。今日も、オーサリングツールのUIが大きく更新されていて、ちょっとびっくりしました。
今後に大期待です。