APL Image



APL Image

画像は画面上にビットマップ画像を描くコンポーネントです。Alexaスキルで良好なユーザーエクスペリエンスを実現するための画像の選択方法については、Alexaデザインガイド–Imageを参照してください。スキルではアニメーション.gifは使用しません。.gifのアニメーションはシミュレーターには表示できますが、画面付きのAlexa搭載デバイスでは動作が異なる場合があります。

プロパティ

Imageコンポーネントには、コンポーネントのプロパティのほかに次のプロパティがあります。ディメンション関連のプロパティでは、「auto」値は使用できません。この値を使用した場合、画像が表示されない可能性があります。

プロパティ スタイル設定 動的 説明
align 文字列 ボックス内での画像の配置を指定します。デフォルトはcenterです。
borderRadius 絶対ディメンション 画像を切り抜く円の半径です。デフォルトは0です。
filter(filters) フィルターの配列 画像に適用するフィルターを指定します。
height 絶対ディメンション 画像の高さです。絶対値のディメンションで指定する必要があります。画像ではpercentage値およびauto値は使用できません。
overlayColor 設定すると画像の上にテーマに合ったレイヤーが重ねて表示されます。これにより、画像上に配置したテキストを読みやすくできます。デフォルトはtransparentです。
overlayGradient グラデーション 画像にオーバーレイするカラーグラデーションです。
scale スケール バウンディングボックスに収まるように画像のサイズを調整する方法を指定します。デフォルトは「best-fit」です。
source URL 画像のダウンロード元のURLです。
width 絶対ディメンション 画像の幅です。絶対値のディメンションで指定する必要があります。画像ではpercentage値およびauto値は使用できません。

すべての画像に、width値とheight値を指定する必要があります。エラーを最小限に抑えるため、Imageコンポーネントの幅と高さはデフォルトで100dpになります。

align

Container内の画像の位置を指定します。

名前 説明
bottom 最下部に水平中央揃えで配置します。
bottom-left 左下隅に配置します。
bottom-right 右下隅に配置します。
center 水平方向および垂直方向の中央に配置します。
left 左側に垂直中央揃えで配置します。
right 右側に垂直中央揃えで配置します。
top 最上部に水平中央揃えで配置します。
top-left 左上隅に配置します。
top-right 右上隅に配置します。

borderRadius

画像の角を切り抜く円の半径を指定します。borderRadiusに設定する数値を大きくすると、円形に切り抜かれます。

filter(filters)

画像に適用する、1つ以上のフィルタリング操作です。APL Filterを参照してください。

overlayColor

画像上のレイヤーの色を指定します。色は透明成分を含むものである必要があります。overlayColorは、画像を単一カラーでオーバーレイするフィルターの便宜上の名前です。overlayColorフィルターは、filterプロパティで定義されたフィルターの後に適用されます。

scrimは、イメージの描画領域にのみ適用され、イメージのスケール調整と位置合わせの後に残ったパディングや空白スペースには適用されません。

overlayGradient

画像上のレイヤーのグラデーションを指定します。グラデーションは透明成分を含むものである必要があります。値は、リソース参照、またはインラインのグラデーション定義で指定します。overlayGradientは、グラデーション名を指定して画像にオーバーレイするフィルターと同じです。overlayGradientフィルターは、API Filterプロパティで定義されたフィルターとoverlayColorプロパティ(セクション12.2.4)の後に適用されます。

グラデーションは、画像の描画領域にのみ適用され、画像のスケール調整と位置合わせの後に残ったパディングや空白スペースには適用されません。

scale

Container内での画像のサイズを調整します。

名前 説明
none 画像のサイズは変更されません。バウンディングボックス内での画像の位置を設定するには、alignプロパティを使用します。バウンディングボックスからはみ出た画像は切り捨てられます。
fill 画像の幅がバウンディングボックスの幅に、高さがバウンディングボックスの高さに一致するように不均一にサイズを調整します。
best-fill これがデフォルトです。バウンディングボックスが完全に覆われるように、画像のサイズを均一に拡大または縮小します。バウンディングボックス内でのサイズ調整後の画像の位置を設定するには、alignプロパティを使用します。
best-fit バウンディングボックス内に画像全体が収まるように、画像のサイズを均一に拡大または縮小します。バウンディングボックス内でのサイズ調整後の画像の位置を設定するには、alignプロパティを使用します。
best-fit-down best-fitと同じように画像のサイズを調整します。ただし、縮小のみで拡大はされません。これにより、画像の表示が荒くならないようにできます。

source

ダウンロードして表示する画像のURLです。

画像の配置、倍率、サイズの管理

画像の配置と倍率の設定は複雑です。画像には、規定の高さと幅が設定されているからです。このため、実際の画像は切り抜き、サイズを変更して、Imageコンポーネントのバウンディングボックス内に配置しなければなりません。

バウンディングボックスに合わせて画像のサイズを調整する方法は、scaleモードで制御します。

ボックス内の(サイズ調整後の)画像の配置は、alignモードで制御します。

どのような場合でも、切り抜かれるのはサイズ調整後の画像ではなく、バウンディングボックスです。

画像のサンプル

{
  "type": "Image",
  "source": "http://images.example.com/image/foo.png",
  "scale": "fill",
  "width": 300,
  "height": 300
}

この場合、画像は画面上の300x300のボックスを埋め尽くすように表示されます。