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

音声アシスタント特集

#AWS

#APL

#Amazon Alexa

SIN

2019.07.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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"
                    }
                ]
            }
        ]
    }
}