[日本語Alexa] APLにおけるアイテム配置の勘所　〜Containerの主要プロパティについて〜

1 はじめに

CX事業本部の平内（SIN）です。

APLドキュメントで、mainTemplateに各種のアイテムを配置する際に、パートごとにアイテムの配置を定義する事ができるConteinerは、非常に便利です。

しかし、Containerによる配置は、動作を理解していないと、画面設計の作業が、ちょっと混乱してしまうことになるでしょう。

今回は、Containerのプロパティの中で、内部に包括するアイテムの配置に比較的重要なものを、個人的な忘備録として纏めさせて頂きました。

2 動作確認用のTextコンポーネント

はじめに、動作確認のために、基準となるTextコンポーネントを作成しました。

オーサリングツールで、「最初から作成」を選択し、mainTemplateのしたに、Containerを置き、その中に、Textコンポーネントを配置しました。

この後の確認作業で、認識しやすいように、取り合えずtextAlignと、textAlignVerticalを、両方Centerにしています。

同じ要領で、３つのTextコンポーネントを配置して準備完了です。

jsonは、以下のとおりです。

{
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "items": [
                    {
                        "type": "Text",
                        "textAlign": "center",
                        "textAlignVertical": "center",
                        "text": "Test001"
                    },
                    {
                        "type": "Text",
                        "textAlign": "center",
                        "textAlignVertical": "center",
                        "text": "Test002"
                    },
                    {
                        "type": "Text",
                        "textAlign": "center",
                        "textAlignVertical": "center",
                        "text": "Test003"
                    }
                ]
            }
        ]
    }
}

3 Container

それでは、Containerのプロパティの確認を進めます。

(1) direction

子コンポーネントを配置する方向です。これにより、Container内の主軸と交差軸が決定します。

• column 主軸（配置の方向）が縦 (デフォルト)
• row 主軸（配置の方向）が横

column (デフォルト)

row

(2) alignItems

交差軸方向で、子を配置する方法です。

• stretch (デフォルト)
• center
• start
• end
• baseline

stretch (デフォルト) / center

start / baseline

end

(3) justifyContent

子を配置し終わった後、主軸方向にスペースが余っている場合に、そのスペースを何処にもっていくかの指定です 。

• start (デフォルト)
• end
• center
• spaceBetween
• spaceAround

start (デフォルト)

end

center

spaceBetween

spaceAround

(4) Width / minWidth / maxWidth

Container自身の横幅の指定です。

下記は、widthを100に設定したため、含まれてTextが折り返している様子です。

(5) Height / minHeight / maxHeight

Container自身の縦幅の指定です。

下記は、heightを130に設定したため、含まれてTextが、一部見切れている様子です。

4 最後に

簡単ですが、Containerで、含まれるアイテムの配置に比較的重要なものを列挙しました。

Containerの中に、Containerを入れたり、Frameを挿入することで、APLのドキュメントは、どんどん複雑にはなりますが、1つ1つのContainerを分けて考えることで、少しは、アイテムの配置作業が、やりやすくなるかも知れません。