本記事のゴール
- 画像のURLを発行する方法を知ること
- オーサリングツールを用いて画像のレイアウトを作成できるようになること
前提
APLオーサリングツールドキュメント
APL v1.6
やること
Image コンポーネントを用いて画像を表示する
※やらないこと
画像表示のサンプルがあるが、このサンプルで用いられているコンポーネントはtypeがAlexaBackground, AlexaImage。
これらのコンポーネントがドキュメントに見当たらないので本記事では触れない。
オーサリングツールで画像のレイアウトをする。
オーサリングツールでプロジェクトを開く。(既存のがなければ空で作る)
Imageを追加する。すると、枠だけできる。
オーサリングツールで画像を表示するためには画像のURLが必要になる。つまり、画像をWebにアップロードする必要がある。
今回は以下の画像を使用する。
手っ取り早くURLを発行するなら右クリックして「画像アドレスをコピー」すればOK
そのコピーしたURLをImageコンポーネントのsourceにはると画像が表示される
他にはimgur等にアップロードして画像のアドレスをコピーでもOK
S3に画像をアップロード
APLトレーニングシリーズ第1回: 初めての Alexa Presentation Language (APL)
公式のチュートリアルではS3に画像をアップロードする方法が紹介されている。
コードエディタからS3 Storageを開く。
あとはアップロードするだけ。ただし、この画像はアクセス制限かかってるのでオーサリングツールでは使えないっぽい。
この画像のURLの取得の仕方はチュートリアルを参照。
レイアウト
文字と画像を配置するレイアウトを作る。
まず、複数のコンポーネントを描画するための Container というコンポーネントを使う。
左上に配置される
Containerの子要素を真ん中に表示する
Containerの設定を以下にする
alignItems > center
justifyContent > center
画像サイズ
コンポーネントの高さなどのプロパティは、可能な限り相対ディメンションで指定するようにしてください。相対ディメンションでサイズを指定したコンポーネントは、異なる画面のサイズに応じて調整できます。
相対ディメンションは「X%」形式の文字列として指定します。Xは、有効なJSON数値です。
とあるが、画像のサイズは割合よりも値のほうがやりやすいので今回は px で入力する。
width > 300px
height > 150px
画像に文字を重ねて表示する。
デフォルトだと要素は上から下に並ぶ。そこで、画像の設定を変更することで画像に文字を重ねることができる
Image > position > absolute
描画順は要素の並び順で決まる。下ほど手前。
三本線をドラッグできる
画像のURLをdatasourceに移動する
${payload.hello.backgroundImage.source}
こんな感じで指定すればOK
実機への反映
テキストと特に変わらない。