はじめに

Alexaを搭載した画面付きデバイスの画面レイアウトを作成します。
画面の画像、もしくは商品名をタッチすると、その商品の詳細が画面の下側に表示されるレイアウトを作成します。
TouchWrapperコンポーネントを使って、タッチを検出し、SetValueで値を変更します。

今回実施する内容

画面の画像、もしくは商品名をタッチすると、その商品の詳細が画面の下側に表示されるレイアウトを作成します。
中型デバイス（Echo Show用）

環境

OS:Windows 10 JP
Alexaスキル言語：Node.js
Editor：Visual Studio Code
APLバージョン：1.0, 1.1

参考

・Alexa ハローAPL、Alexaスキルの画面への対応
第1回のAlexa APLの記事です。タイトル通り、ハローAPLを表示させるだけのAPLです。

・Alexa APL, 第6回　シーケンス(Sequence)を使ったレイアウト
第6回のAlexa APLの記事です。Sequenceを使って画面レイアウトを作成するAPLの紹介です。

・APLコマンド
AmazonのAPLドキュメントにあるAPLコマンドの説明です。

・標準コマンド
AmazonのAPLドキュメントにあるコマンドの説明です。SendEventやSpeakItemの説明があります。

用語

APL

Alexa Presentation Language
amazonの画面つきのAlexaの画面表示用の言語。
JSONを使用した記載方法です。
インターネットのホームページはHTMLとCSSで作成しますが、AlexaはAPLで作成するということです。

APLオーサリングツール

APL作成を視覚的に見ながらAPLのJSONファイルを作成するツール。
サンプルテンプレートも準備されており、その中から選択していくだけで、だいたいの画面は作成できる。

前提条件

前提条件はとくにないといえばないですが、本まとめを読むにあたり、以下がわかっていることが前提です。
・alexa developer consoleのアカウントがある
・Alexaスキルを開発したことがある
・JSONの記載方法を知っている
・「Alexa ハローAPL、Alexaスキルの画面への対応」、および「Alexa APL, 第6回　シーケンス(Sequence)を使ったレイアウト」の記事をみている

SetValueを使ってみる

画面上半分にある商品名をクリックすると、画面下半分にその商品の画像と、詳細が表示されるレイアウトを作成します。

中型デバイス

SetValueを使ったレイアウトの作成

これから作成する「レイアウト画面」はこんな感じです。

APLオーサリングツールを起動して「最初から作成」を選択する。
「レイアウト画面」の「mainTemplate」を選択し、「Container」を追加する。
「レイアウト画面」で、「Container」を選択し、「Sequence」を追加する。
「レイアウト画面」の「Sequence」を選択し、「詳細設定画面」で、以下をそれぞれ設定する。
・ data：${payload.sample.sampleArray}
・ height：50vh
「レイアウト画面」で、「Sequence」を選択し、「Container」を追加する。
「レイアウト画面」の「Container」を選択し、「TouchWrapper」を追加する。
「レイアウト画面」の「Container」を選択し、「詳細設定画面」で、以下を設定する。
・ direction：row
「レイアウト画面」で、「Container」を選択し、「Image」を追加する。
「レイアウト画面」の「Image」を選択し、以下をそれぞれ設定する。
・ source：${data.imageURL}
・ width：20vw
・ height：20vh
「レイアウト画面」で、「Container」を選択し、「Text」を追加する。
「レイアウト画面」の「Text」を選択し、「詳細設定画面」で、以下を設定する。
・ text：${data.text}
「レイアウト画面」の一番上の「Container」を選択し、「Container」を追加する。
「レイアウト画面」の上で作成した「Container」を選択し、「詳細設定画面」で、以下を設定する。
・ direction：row
・ height：50vh
「レイアウト画面」の上で作成した「Container」を選択し、「Image」を追加する。
「レイアウト画面」の「Image」を選択し、「詳細設定画面」で、以下を設定する。
・ id：imageId
・ width：40vw
・ height：40vh
「レイアウト画面」の上で作成した「Container」を選択し、「Text」を追加する。
「レイアウト画面」の「Text」を選択し、「詳細設定画面」で、以下を設定する。
・ id：textId
・ width：50vw
APL JSONの画面を開いて、「TouchWrapper」の記載を以下の通り、onPressのtypeにSetValueを設定し、以下の通りにする。

APL

...
"type": "TouchWrapper",
"onPress": [
    {
        "type": "SetValue",
        "componentId": "imageId",
        "property": "source",
        "value": "${data.imageURL}" 
    },
    {
        "type": "SetValue",
        "componentId": "textId",
        "property": "text",
        "value": "${data.detail}"
    }
],
...

JSONデータの作成

以下の通り、JSONデータを作成する。

JSONデータ

{
    "sample": {
        "sampleArray": [
            {
                "text": "コーヒー",
                "detail": "コーヒーです。",
                "imageURL": "https://coffee_480x480.jpg"
            },
            {
                "text": "カプチーノ",
                "detail": "カプチーノです。<br>ミルク入りのコーヒーです。スチームミルク入りが一般的？",
                "imageURL": "https://cappuccino_480x480.jpg"
            },
            {
                "text": "カフェラテ",
                "detail": "カフェラテです。<br>ミルク入りのコーヒーです。スチームミルク入りが一般的？<br>カプチーノとはミルクの量が違う？",
                "imageURL": "https://latte_480x480.jpg"
            },
            {
                "text": "エスプレッソ",
                "detail": "エスプレッソです。<br>加圧して抽出したもので、コーヒーよりもかなり濃いです。",
                "imageURL": "https://espresso_480x480.jpg"
            }
        ]
    }
}

SetValueの説明

TouchWrapperのonPressにSetValueを設定することで今回の機能を実現します。

・ onPressは配列を設定することができ（通常は配列らしい）、設定した順番で動作します。
今回は、SetValueを２つ設定していますが、ImageとTextの順に値を設定しました。
・ typeは、SetValueを記載します。
・ componentIdはプロパティを設定するIdを指定します。今回の場合は、imageIdとtextIdとしていますが、これはレイアウトで作成した「Imgae」と「Text」の「id」の値であり、これにより、値を設定するコンポーネントを指定しています。
・ propertyは、対象のコンポーネントのどのプロパティを設定するかであり、「Image」では、画像のURLを設定する「source」、「Text」では、textを指定します。
・ valueは変更する値を設定します。今回の場合、Sequenceの値であることから、dataプロパティからの値を設定しており、${data.imageURL}と${data.detail}にしました。
${data.detail}が動作するか不安でしたが、Echo Show 5では動作するようです。

ところで、SetValueですべてのプロパティを今回のように設定できる（変更できる）かといったら、そうではなく、一部のものに限られます。

APLのドキュメントで、プロパティの説明が記載されている箇所があります。例えば、Imageのプロパティで、プロパティの表で、動的が〇に設定されているプロパティが変更可能です。
詳しくは、コンポーネントのプロパティに記載があります。

APLソースコード

出来上がったAPLのフルソースコードとデータJSONを載せます。実際にスキルで表示を試す場合は、Alexa ハローAPL、Alexaスキルの画面への対応を参考しに実施します。

APL

{
    "document": {
        "type": "APL",
        "version": "1.1",
        "settings": {},
        "theme": "dark",
        "import": [],
        "resources": [],
        "styles": {},
        "onMount": [],
        "graphics": {},
        "commands": {},
        "layouts": {},
        "mainTemplate": {
            "parameters": [
                "payload"
            ],
            "items": [
                {
                    "type": "Container",
                    "items": [
                        {
                            "type": "Sequence",
                            "height": "50vh",
                            "data": "${payload.sample.sampleArray}",
                            "items": [
                                {
                                    "type": "TouchWrapper",
                                    "onPress": [
                                        {
                                            "type": "SetValue",
                                            "componentId": "imageId",
                                            "property": "source",
                                            "value": "${data.imageURL}"
                                        },
                                        {
                                            "type": "SetValue",
                                            "componentId": "textId",
                                            "property": "text",
                                            "value": "${data.detail}"
                                        }
                                    ],
                                    "items": [
                                        {
                                            "type": "Container",
                                            "direction": "row",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "width": "20vw",
                                                    "height": "20vh",
                                                    "source": "${data.imageURL}"
                                                },
                                                {
                                                    "type": "Text",
                                                    "text": "${data.text}"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "Container",
                            "height": "50vh",
                            "direction": "row",
                            "items": [
                                {
                                    "type": "Image",
                                    "id": "imageId",
                                    "width": "40vw",
                                    "height": "40vh"
                                },
                                {
                                    "type": "Text",
                                    "id": "textId",
                                    "text": "${data.text}"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    "datasources": {
        "sample": {
            "sampleArray": [
                {
                    "text": "コーヒー",
                    "detail": "コーヒーです。",
                    "imageURL": "https://coffee_480x480.jpg"
                },
                {
                    "text": "カプチーノ",
                    "detail": "カプチーノです。<br>ミルク入りのコーヒーです。スチームミルク入りが一般的？",
                    "imageURL": "https://cappuccino_480x480.jpg"
                },
                {
                    "text": "カフェラテ",
                    "detail": "カフェラテです。<br>ミルク入りのコーヒーです。スチームミルク入りが一般的？<br>カプチーノとはミルクの量が違う？",
                    "imageURL": "https://latte_480x480.jpg"
                },
                {
                    "text": "エスプレッソ",
                    "detail": "エスプレッソです。<br>加圧して抽出したもので、コーヒーよりもかなり濃いです。",
                    "imageURL": "https://espresso_480x480.jpg"
                }
            ]
        }
    }
}

おわりに

今回はSetValueを使った画面レイアウトを紹介しました。
この方法はなかなか他のサイトでは記載されておらず、だいたいPagerを使って別のページに移るというのが多かったのですが、試してみましたら動きました。
たしかに最初から詳細用のスペースを確保しておくのは、レイアウトとしてはスマートではなく、タッチした所の写真を入れ替えるくらいが無難かなと思いました。
フレームを否定するわけではないんですけどね。
画面付きデバイスでも、音声ファーストで、ちょっとだけ表示するくらいの使い方とは思いますが、有効なレイアウトはもう少し考えた方が良いかなと思いました。

SetFocusも試してみたのですが、動作しませんでした。理由は不明ですが、APL 1.1でしか動作しないため記載になにか誤りがあるのかなと思います。
今回やってみて、プロパティの値を設定することはできましたが、取得はどうするのかわからないなと思いました。
idでコンポーネントを取得して、そこからsourceやtextを取得できるのか？そのうち試してみたいと思います。