LoginSignup
5
1

More than 3 years have passed since last update.

@Mount(Build Mount)

Alexa APL, 第3回 背景に画像をつけてみる

Last updated at Posted at 2019-07-28

はじめに

画面付きのAlexa対応デバイスもだんだん増えてきました。
echo spot、echo show、Fire TVなど。
画面サイズに応じて、画面構成の変更も必要になることもあります。
そのための仕組みがAPLにも準備されています。
今回はその方法をまとめます。
Alexa APLの第2回で作成したスキルをベースに説明を記載しますが、内容は第1回がわかれば十分かと思います。

今回実施する内容

Echo Spot、Echo Show 5、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です。

・APLトレーニングシリーズ第1回: 初めての Alexa Presentation Language (APL)
AmazonのAlexa Blogsに画面非対応Echoへの対応の記載がありました。

用語

APL

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

APLオーサリングツール

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

前提条件

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

マルチデバイスへ対応

マルチデバイス対応では同じデザインが必要

画面付きのAlexa搭載デバイスの表示の違いによると、以下のように記載されています。

すべての画面表示で同一のデザインにしてください。画面表示をデザインする際は、以下の特定の表示動作に留意してください。これらのデバイスを直接テストできない場合は、Alexaシミュレーターを使用してEcho ShowまたはEcho Spotをテストできます。

文脈飛ばして抜粋しましたが、画面表示をEcho SpotでもEcho showでも同じにする必要があるように思いました。
同じというのが、どこまでのことを示しているのかは定かではないですけど。

画像を入れてみる

背景に方眼の画像をつけてみて、どういった見た目になるか確認します。
方眼のサイズは、以下の通りで、1024×600pxで、Echo showの解像度に合わせました。
また、マス目は、32×19マス目にしました。
echo_show5.jpg

Alexa ハローAPL、Alexaスキルの画面への対応で作成したJSONファイルとAPLオーサリングツールを使って、画像を追加してみます。

  1. APLオーサリングツールで画像の読み込みを実施する。「スキルの表示方法」を選択する画面では、コードをアップロードを選択して、前回保存した「ハローAPL」が表示されるだけのJSONファイルを読み込む。

  2. 「レイアウト画面」で、「Container」を選択し、「追加」ボタンを押して、「Add Component」ウィンドウで、「Image」を選択して、「{type}を追加」ボタンを押す。
    すると、「Text」のしたに「Image」が階層として追加される。

    imageレイアウト.jpg

    コードは、以下の通り。

    {
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "justifyContent": "center",
                "items": [
                    {
                        "type": "Text",
                        "textAlign": "center",
                        "text": "${payload.hello.text}"
                    },
                    {
                        "type": "Image",
                        "source": "https://方眼目1_1024x600.jpg"
                    }
                ]
            }
        ]
    }
}

  3. 「レイアウト画面」で「Image」を選択して、「詳細設定画面」の「source」に画像のリンクのURLを記載する。すると以下のようになりました。
    小型デバイス（Echo Spot用）
    show方眼目1.jpg
    中型デバイス（Echo Show用）
    spotの方眼目1.jpg
    解像度にあわせて画面表示するのかと思ったら、そうでもないようです。
    このサイズは何を基準にしているのか？
    amazonのドキュメントのどこかに記載があったような気がしますが、ちょっと今は見つかりませんでした。
    また、ハローAPLの下に画像が入ってくるんですね。背景画像のイメージだったため、ちょっとイメージが違いました。デフォルトはコンポーネント順に縦に並ぶということなんですね。

画像を背景になるようにしてみる

  1. 幅と高さを調整するため、「レイアウト画面」で「Image」を選択して、「詳細設定画面」の「width」に「100vw」を、「height」に「100vh」を設定してみる。
    この「width」や「height」については、APLコンポーネントに説明があります。また、「100vw」や「100vh」は、絶対ディメンジョンに説明があります。
    要は、このImageの幅や高さを画面の幅や高さの100%に設定するということですね。
    実はこれを実施すると、画像の比率には影響を与えないようで、画面がゆがむことはありません。しかし、1024x600pxの画像をEcho Spotにあてると、上下が以下のようにあいてしまいました。
    また、ハローAPLの文字は、上のほうにいって切れてしまいました。
    小型デバイス
    spot方眼目2.jpg

  2. 「レイアウト画面」で「Image」を選択して、「position」に「absolute」を設定すると、「ハローAPL」は消えてしまいますが、画像は真ん中に位置するようになる。
    「レイアウト画面」でのコンポーネントの記載潤に従って並ぶようで、画面が被るような場合は、どんどん上書きされるようです。したがって、「ハローAPL」の「Text」と「Image」を「レイアウト画面」で、ドラッグ＆ドロップで入れ替えてあげると、「Image」が背景になり、その上に「Text」がきて、「ハローAPL」が表示される。が文字は非常に見づらい。

  3. 「レイアウト画面」で「Image」を選択して、「overlayColor」に「rgba(0,0,0, 0.6)」を設定すると、「Image」Imageが暗くなって、「ハローAPL」がよく見えるようになる。
    rgbaは関数（hsl関数というらしい）で、赤、緑、青、アルファ（透明度）で色を設定し、上記だと、RGBが0で黒を示し、透明度が0.6でオーバーレイするということですね。「rgba(black, 0.6)」でも同じように表示されるのを確認しました。
    色に説明があるのですが、わかりづらいかな。
    小型デバイス
    spot方眼目3.jpg
    縦方向が埋まらないのは想定と違います。

  4. 「レイアウト画面」で「Image」を選択して、「scale」に「fest-fill」を設定する。すると以下のようになります。
    小型デバイス
    spot方眼目4.jpg

    期待通りです。でも、どこか切り取っているんですよね。想像通りならば真ん中を切り取っているはず。
    ということで、画像の真ん中を少し赤くした画像ファイルを作って改めて表示してみると、以下のようになりました。
    赤い部分は、480×480pxよりは小さくしてあります。
    小型デバイス（Echo Spot）
    spot方眼目5.jpg
    小型デバイス（Echo Show 5）
    show2方眼目2.jpg
    中型デバイス
    show方眼目2.jpg

なるほど、「画像の真ん中に設定している」ということですね。
これで、「Echo Spot」、「Echo Show 5」、「Echo Show」で画面いっぱいに表示されます。
「Echo Show」ではしっかり画面一杯画像を表示するのかと思ったら、若干端の画像が切れているような気がしました。
数pxは消えるのかもしれません。
また、背景画像はマルチデバイスで切り取られるのを理解したうえで、柄のようなどこをとってもいいようなものがいいのかなと思いました。

最後にAPLソースコードを載せます。

{
    "document": {
        "type": "APL",
        "version": "1.1",
        "theme": "dark",
        "import": [],
        "settings": {},
        "resources": [],
        "styles": {},
        "onMount": [],
        "graphics": {},
        "commands": {},
        "layouts": {},
        "mainTemplate": {
            "parameters": [
                "payload"
            ],
            "items": [
                {
                    "type": "Container",
                    "justifyContent": "center",
                    "items": [
                        {
                            "type": "Image",
                            "width": "100vw",
                            "height": "100vh",
                            "source": "https://方眼目1_1024x600.jpg",
                            "scale": "best-fill",
                            "overlayColor": "rgba(0,0,0, 0.6)",
                            "position": "absolute"
                        },
                        {
                            "type": "Text",
                            "textAlign": "center",
                            "text": "${payload.hello.text}"
                        }
                    ]
                }
            ]
        }
    },
    "datasources": {
        "hello": {
            "text": "ハローAPL"
        }
    }
}

設定値をもう少しいじってみる

ここからはおまけです。

scaleをいじる

amazonのAPLのscaleによると、scaleには、以下の5つの設定があるようです。

  • none
  • fill
  • best-fill　（デフォルト)
  • best-fit
  • best-fit-down

でも、APLオーサリングツール上で、「Image」の「scale」には、以下の通り8つの設定があります（適当な文字列をいれるとエラーになって以下のものをいれるように指示される）。

  • fill
  • best-fill
  • best-fit　（デフォルト）
  • best-fit-down
  • none
  • contain
  • cover
  • scale-down

この違いはなぜなのかわかりませんが、APLがv1.1になったせいなのかもしれません。
でも、Changes Introduced in APL Version 1.1にそれっぽいことは書いていないようで、不明です。
デフォルト値も変わっていますが、「best-fit」になっているように思います。
私の持っているEcho show 5の実機で、「scale」に何も入れないで試したところ、以下にようになりました。やはり「best-fit」のようです。
show2方眼目1.jpg

もしかすると、古いEcho showなどでは、新しい値を使えないかもしれないので注意する必要がありそうです。時間があれば少し調べようと思いますが、APLオーサリングツールだと動作してしまっているようなので、私の環境では調べきれないかもしれません。
また、上記の値についても説明読むだけではよくわからないことも多いため、設定値と表示サンプルを出すといいかなと思いました。
この辺は今回記載しませんが、そのうち記事を記載するかもしれません。

alignをいじる

「scale」の説明を読むと、さきほど「画像の真ん中に設定している」と書いた内容について説明があり、「align」で調整するようなのです。
amazonのAPLのalignによると、alignには、以下の9つの設定があるようです。

  • left
  • right
  • center
  • top
  • bottom
  • top-left
  • top-right
  • bottom-left
  • bottom-right

これは、APLオーサリングツールでも同じ内容でした。

では、「scale」に「best-fill」を設定して、「align」に「left」を設定すると、期待通り画像の左側が表示されるようになりました。
spot方眼目6.jpg

でも、「align」に「top-left」を設定すると、今回の場合ならば「left」と同様になるのかと思ったら、そうでもなく、「center」相当の動作と思いました。「bottom-left」にしたら、期待通り「left」と同じでした。
spot方眼目5.jpg

なんか、癖がありそうですね。開発時は画面の動きをよく把握しながらやっていかないとはまりそうですね。

おわりに

今回は、背景に画像をつけてみました。ポイントだけ簡潔に記載します。

  • 背景画像は、Containerの一番最初に設定するのがよい（レイアウトは上から順に設定されるため）
  • 背景画像は、「position」に「absolute」を設定し、他のContainerと位置関係を関連付けない。
  • 背景画像は、「width」と「height」に「100vw」、「100vh」を設定するのがよい。
  • 背景画像は、「overlayColor」を設定して文字を見やすくする。
  • 背景画像は、「scale」に「best-fill」を使って、画面一杯に設定する。
  • 背景画像は、繰り返しの柄のようなものがよく、どこをきりとってもよいものにする。

本当はマルチデバイス対応でデバイスに応じた画面レイアウトなどを記載しようと思ったのですが、思ったよりも長くなったため、いったん記事を切ります。
次回は、「マルチデバイス対応」か、「上記で期待とは違った動作」について記載していこうかと思います。

それにしても、画面開発は、ドキュメントに書いてある内容と動作が期待に反することもありますし、そもそもドキュメントと設定値が違うこともあるようです。
Alexaのスキル開発がまだまだ発展途上だということだと思います。
いったん、画面を作っても、その動作がずっと保証されるかどうかも疑わしいなとも思いましたので、動作が違うからと、その癖を悪用というか信じて、面倒な実装はしないように気をつけたほうがよさそうですね。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1