Alexa APL, 第14回　フッターの追加

#はじめに
Alexaを搭載した画面付きデバイスの画面レイアウトを作成します。
今回は、フッターを追加します。
フッターは、レスポンシブ対応コンポーネントと呼ばれ、コンポーネントをまとめて使いやすくしたモジュールのようなものです。
フッターと聞くと、Copyrightやページ番号など入るスペースのイメージなのですが、Alexaのフッターはそうではなく、ユーザーへのアクションを補助するためのヒント（例えば、「〇〇といってください。」というヒント）を表示するためのものです。

#今回実施する内容
AlexaFooterを使って、フッターを追加する。

中型デバイス（Echo Show用）
![中型デバイス2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/745bce97-4c0e-6179-5bf2-b10e161372f2.jpeg)

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

#参考
・[Alexa ハローAPL、Alexaスキルの画面への対応](https://qiita.com/Mount/items/72d9928ff2c0ae5de737)
第1回のAlexa APLの記事です。タイトル通り、ハローAPLを表示させるだけのAPLです。

・[Alexa APL, 第5回　ヘッダーの追加](https://qiita.com/Mount/items/2f915eada1596db9c08e)
第5回のAlexa APLの記事です。AlexaHeaderを使ってヘッダーを追加する記事です。

・[Alexa APL, 第8回　タッチ対応　その2（SpeakItem）](https://qiita.com/Mount/items/6572a3d8181c060d09a1)
第8回のAlexa APLの記事です。タッチ対応の記事ですが、トランスフォーマーの記載をしています。

・[APLデータソースとトランスフォーマー](https://developer.amazon.com/ja/docs/alexa-presentation-language/apl-data-source.html)
ヒントに「アレクサ」といった正しい「ウェイクワード」を追加する仕組みの説明があります。

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

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

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

#フッターを追加してみる
画面の下にフッターを追加します。
フッターだからと言って、画面の下である必要性はないのですが。

##「alexa-layouts」パッケージの読み込み
フッターを追加するには、「alexa-layouts」パッケージを読み込む必要があります。
まずはAPLオーサリングツールを起動し、「最初から作成」を選択する。
APLオーサリングツールでは、「Document」ボタンを押すと、JSONが表示されますが、「"import"」は空です。そこに以下を書き込みます。

```json:APL
    ...
    "import": [
        {
            "name": "alexa-layouts",
            "version" : "1.0.0"
        }
    ],
    ...

```

これを記載するだけで、「Container」、「Text」などと同じようにAPLオーサリングツールで、フッター（AlexaFooter）のコンポーネントを使えるようになります。
この記載は、alexa-layoutsパッケージを読み込んで、このAPLで利用するという意味であり、versionも更新されていきます。APL 1.0ではalexa-layoutsパッケージのversionは1.0.0だったのですが、APL 1.1では1.1.0に更新されました。

現時点では、APLオーサリングツールは、APL 1.1には完全には対応していないようで、APL 1.1で追加されたプロパティは設定できません。しかし、APL画面で自分で直接JSONコードを記載すればAPLオーサリングツールの画面レイアウトイメージは更新されます。

「AlexaHeader」、「AlexaFooter」は、他のコンポーネントと違い、「APLコンポーネント」を継承しないため、「when」とか「width」など使えないような気がします。
APLオーサリングツールにテンプレートが用意されていますが、その中での「AlexaFooter」の使い方をみてみると、「Container」で利用可能なプロパティである
    - top
    - position
などが使われていました。上位に親Containerが存在すれば、子Containerのプロパティは設定可能と理解しました。

#レイアウトの作成
これから作成する「レイアウト画面」はこんな感じです。
![レイアウト.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/ac447706-d882-f649-f7d2-f553064f7c81.jpeg)

1. APLオーサリングツールを起動して「最初から作成」を選択する。（上記で実施済み）
2. 「レイアウト画面」の「mainTemplate」を選択し、「Container」を追加する。
「レイアウト画面」で、「Container」を選択し、「AlexaFooter」を追加する。
3. 「レイアウト画面」の「AlexaFooter」を選択し、「詳細設定画面」で、以下をそれぞれ設定する。

    ・ hintText：${payload.sample.properties.hintText}
4. 「APL JSON」ボタンを押して、「AlexaFooter」に以下のプロパティを追加する。
    ・ top：85vh
    ・ position：absolute

##データJSONの作成
続いてデータJSONを以下の通り作成する。
上記のレイアウト作成では、FooterのプロパティのhintTextに変数で設定しました。この部分の元データを作成します。
これは、textToHintトランスフォーマーを使って、ヒントに「ウェイクワード」を追加するために変数化しています。
説明は、次の章でまとめて説明します。

```json:APL
{
    "sample": {
        "properties" : {
            "hintText" : "ヒント"
        },
        "transformers": [
            {
                "inputPath": "hintText",
                "transformer": "textToHint"
            }
        ]
    }
}

```
以下のような画面がAPLオーサリングツールで表示されました。
![中型デバイス2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/745bce97-4c0e-6179-5bf2-b10e161372f2.jpeg)

なお、実機のEcho Show 5では、
**「"Alexa, ヒント"と言ってください」**
と表示されました。
ウェイクワードを「Amazon」に変更すると、上記の**「Alexa」**部分が**「Amazon」**に変わることを確認しました。
![hint.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/94b377a7-2388-14d8-5371-abf2b320e7c0.jpeg)

##textToHintトランスフォーマーの補足
第8回のタッチ操作の時に説明した**ssmlToSpeechトランスフォーマー**と実施する方法は同じです。
**textTohintトランスフォーマー**は、入力した文字列「〇〇」に対して、「"アレクサ、〇〇"と言ってみてください」のように、ウェイクワードと、「と言ってみてください」を追加します。
ウェイクワードの変数だけならばまだ他の機能で使い用がありそうですが、「と言ってみてください」までついてくると、ほとんどAlexaFooter専用のトランスフォーマーだなという印象です。
![textToHint.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/703af517-f5e0-cde9-0948-8f2436bae2d0.jpeg)

##利用可能なプロパティについて（alexa-layouts 1.1.0）
AlexaFooterで利用可能なプロパティは、alexa-layoutsの1.1.0になると以下です。

|プロパティ名 |説明 |追加されたバージョン |
|:--|:--|:--|
|hintText|フッターに記載するヒントの文字列。 |1.0.0|
|theme|設定するテーマ。デフォルトはdark。|1.1.0|
|type|AlexaFooter   |1.0.0|

試しに、alexa-layoutsを1.1.0にして、`theme`を`light`に設定したところ、文字は黒字になることを確認しました。

##APLソースコード
今回試したソースコードを載せます。実際にスキルで表示を試す場合は、[Alexa ハローAPL、Alexaスキルの画面への対応](https://qiita.com/Mount/items/72d9928ff2c0ae5de737)を参考しましょう。

```json:APL
{
    "document": {
        "type": "APL",
        "version": "1.1",
        "settings": {},
        "theme": "dark",
        "import": [
            {
                "name": "alexa-layouts",
                "version": "1.0.0"
            }
        ],
        "resources": [],
        "styles": {},
        "onMount": [],
        "graphics": {},
        "commands": {},
        "layouts": {},
        "mainTemplate": {
            "parameters": [
                "payload"
            ],
            "items": [
                {
                    "type": "Container",
                    "items": [
                        {
                            "hintText": "${payload.sample.properties.hintText}",
                            "type": "AlexaFooter",
                            "top": "85vh",
                            "position": "absolute"
                        }
                    ]
                }
            ]
        }
    },
    "datasources": {
        "sample": {
            "properties": {
                "hintText": "ヒント"
            },
            "transformers": [
                {
                    "inputPath": "hintText",
                    "transformer": "textToHint"
                }
            ]
        }
    }
}
```

#まとめ
今回は、AlexaFooterを使ってみました。
AlexaFooterは、ヒントを載せるためのものということで、あまり変わった用途では使えないかなという感触です。
また、ヒントは表示され続けますので、一時的にだして消すというような使い方でもなさそうで、追加する場合は、あらかじめこのスペースはフッター用として準備して他のレイアウトと被らないようにしておいたほうが良いのかなと思いました。