APL 画像表示

# 本記事のゴール
- 画像のURLを発行する方法を知ること
- オーサリングツールを用いて画像のレイアウトを作成できるようになること

# 前提
[APL環境構築 & テキスト表示](https://qiita.com/Teach/items/a7702d060a1e3c875341)

[APLオーサリングツールドキュメント](https://developer.amazon.com/ja-JP/docs/alexa/alexa-presentation-language/apl-authoring-tool.html)
APL v1.6

# やること
[Image コンポーネント](https://developer.amazon.com/ja-JP/docs/alexa/alexa-presentation-language/apl-image.html)を用いて画像を表示する

※やらないこと
![スクリーンショット_2021-07-24_14_08_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/30ae92e1-a614-813a-f86e-deaf8c9d417e.png)

画像表示のサンプルがあるが、このサンプルで用いられているコンポーネントはtypeが`AlexaBackground`, `AlexaImage`。
これらのコンポーネントがドキュメントに見当たらないので本記事では触れない。

# オーサリングツールで画像のレイアウトをする。

[オーサリングツール](https://developer.amazon.com/alexa/console/ask/displays/?)でプロジェクトを開く。(既存のがなければ空で作る)

![スクリーンショット 2021-07-24 17.12.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/349ed1a9-0e4f-2cf8-5326-2bcde616e369.png)

Imageを追加する。すると、枠だけできる。

![スクリーンショット 2021-07-24 17.13.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/c0fc2b2a-9f4c-1411-a53a-f292c2ac552b.png)

オーサリングツールで画像を表示するためには画像のURLが必要になる。つまり、画像をWebにアップロードする必要がある。
![スクリーンショット_2021-07-24_17_31_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/abeb857f-0c86-acdb-b5c7-536367a08192.png)

今回は以下の画像を使用する。

![GradationR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/85a62135-7975-55a7-39b4-4496a688021c.png)

手っ取り早くURLを発行するなら右クリックして「画像アドレスをコピー」すればOK
![スクリーンショット 2021-07-24 17.30.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/ddaba412-3848-ecba-08a5-bd67a1e037fc.png)

そのコピーしたURLをImageコンポーネントのsourceにはると画像が表示される

![スクリーンショット 2021-07-24 17.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/36688424-c7cb-903c-9a3a-43e3674fad7a.png)

他には[imgur](https://imgur.com/)等にアップロードして画像のアドレスをコピーでもOK


# S3に画像をアップロード
[APLトレーニングシリーズ第1回: 初めての Alexa Presentation Language (APL)](https://developer.amazon.com/ja/blogs/alexa/post/a3712152-cd02-4fda-9d33-3b64ef3a13af/jp-alexa-presentation-language-part1)

公式のチュートリアルではS3に画像をアップロードする方法が紹介されている。

![CloudWatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/821639f2-4a83-bcef-7d67-501005833d20.png)

コードエディタからS3 Storageを開く。

あとはアップロードするだけ。ただし、この画像はアクセス制限かかってるのでオーサリングツールでは使えないっぽい。
この画像のURLの取得の仕方はチュートリアルを参照。

# レイアウト
文字と画像を配置するレイアウトを作る。

![スクリーンショット 2021-07-24 18.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/ff51e265-8193-753b-ef3f-5464853a20f6.png)





まず、複数のコンポーネントを描画するための Container というコンポーネントを使う。

[Container](https://developer.amazon.com/ja-JP/docs/alexa/alexa-presentation-language/apl-container.html)

![スクリーンショット 2021-07-24 17.53.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/7cd29f9d-e7b5-bdc9-9490-5c3d8937682a.png)

![スクリーンショット 2021-07-24 17.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/15b8f35d-b9be-806f-cabf-8011c2a5b30d.png)
左上に配置される

## Containerの子要素を真ん中に表示する
Containerの設定を以下にする

alignItems > center
justifyContent > center



## 画像サイズ
[hight and width](https://developer.amazon.com/ja-JP/docs/alexa/alexa-presentation-language/apl-component.html#height-and-width)

> コンポーネントの高さなどのプロパティは、可能な限り相対ディメンションで指定するようにしてください。相対ディメンションでサイズを指定したコンポーネントは、異なる画面のサイズに応じて調整できます。

[ディメンション](https://developer.amazon.com/ja-JP/docs/alexa/alexa-presentation-language/apl-data-types.html#dimension)

> 相対ディメンションは「X%」形式の文字列として指定します。Xは、有効なJSON数値です。

とあるが、画像のサイズは割合よりも値のほうがやりやすいので今回は px で入力する。
width > 300px
height > 150px


## 画像に文字を重ねて表示する。
デフォルトだと要素は上から下に並ぶ。そこで、画像の設定を変更することで画像に文字を重ねることができる

![スクリーンショット 2021-07-25 20.26.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/cac08c2b-3be6-12fc-52d7-2e60d72ba5d8.png)

![スクリーンショット 2021-07-25 20.26.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/333acbe8-9b0c-27a8-2323-a6205fbe11fd.png)

Image > position > absolute

描画順は要素の並び順で決まる。下ほど手前。

![Container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/e6db3b76-e93f-dbc3-38e0-c0d8a3363214.png)
三本線をドラッグできる

## 画像のURLをdatasourceに移動する

`${payload.hello.backgroundImage.source}`

こんな感じで指定すればOK

![スクリーンショット 2021-07-25 20.34.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/0926ecf2-a189-7951-28ca-7b5b5167567f.png)


![スクリーンショット 2021-07-25 20.33.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/fc4499f6-b125-abc5-c662-3760e3a8d100.png)

# 実機への反映
テキストと特に変わらない。


# 参考
[Alexa APL, 第3回 背景に画像をつけてみる](https://qiita.com/Mount/items/3332051b3ccf608f6093)