APL Image

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

プロパティ
画像の配置、倍率、サイズの管理
画像のサンプル

プロパティ

Imageコンポーネントには、コンポーネントプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください。

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

プロパティ	型	デフォルト	スタイル設定	動的	説明
`align`	配置	`center`	◯	✕	ボックス内での画像の配置を指定します。
`borderRadius`	絶対ディメンション	0	◯	✕	画像を切り抜く円の半径です。
`filter（filters）`	フィルターの配列	[ ]	✕	✕	画像に適用するフィルターを指定します。
`overlayColor`	色	none	◯	◯	設定すると、画像の上にテーマに合ったレイヤーが重ねて表示されます。これにより、画像上に配置したテキストを読みやすくできます。
`overlayGradient`	グラデーション	none	◯	✕	画像にオーバーレイするカラーグラデーションです。
`scale`	スケール	`best-fit`	◯	✕	バウンディングボックスに収まるように、画像のサイズを調整する方法を指定します。
`source`	URL	none	✕	◯	画像のダウンロード元のURLです。

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

Imageコンポーネントがイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
  "target": {
    "disabled": Boolean, // 画像が無効な場合はtrue
    "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
    "id": ID,            // コンポーネントのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "opacity": Number,   // コンポーネントの不透明度[0～1]
    "source": URL,       // 表示されている画像のソースURL
    "width": Number,     // コンポーネントの幅（dp単位）（パディングを含む）
  }
}

align

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

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

borderRadius

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

filter（filters）

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

overlayColor

画像上のレイヤーの色を指定します。色は、表示する画像の透過コンポーネントを持っている必要があります。たとえば、overlayColorをrgba(white,0.3)に設定して、不透明度30%の白色で画像をオーバーレイします。

overlayColorは、画像を単一カラーでオーバーレイするフィルターの便宜上の名前です。overlayColorフィルターは、filterプロパティで定義されたフィルターの後に適用されます。

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

overlayGradient

画像上のレイヤーのグラデーションを指定します。グラデーションは、表示する画像の透過コンポーネントを持っている必要があります。overlayGradientは、グラデーション名を指定して画像にオーバーレイするフィルターと同じです。overlayGradientフィルターは、filterプロパティで定義されたフィルターとoverlayColorプロパティの後に適用されます。

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

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
}

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