APL Image



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

• プロパティ
  • align
  • borderRadius
  • filter（filters）
  • overlayColor
  • overlayGradient
  • scale
  • source
• 画像の配置、倍率、サイズの管理
• 画像のサンプル

プロパティ

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

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

すべての画像に、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内の画像の位置を指定します。

borderRadius

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

filter（filters）

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

overlayColor

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

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

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

overlayGradient

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

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

scale

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

source

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

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

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

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

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

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

画像のサンプル

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

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