Image

Image

Alexa Imageレスポンシブ対応コンポーネント（AlexaImage）は、画像を表示します。標準的なアスペクト比（縦長や円形など）と、角丸などの効果を使用して画像を表示できます。

互換性

AlexaImageは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

サポートされていないViewportでAlexaImageを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaImageを使用するには、alexa-layoutsパッケージをインポートします。

alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaImageはバージョン1.1.0で導入されました。

このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaImageドキュメントが表示されます。パラメーターの表には、それぞれのパラメーターが追加されたalexa-layoutsのバージョンが示されています。

AlexaImageのパラメーター

type以外のパラメーターはすべてオプションです。imageHeightとimageWidthは、どちらか一方を指定する必要がありますが、両方を指定する必要はありません。

名前 型 デフォルト 説明 ウィジェットのサポート 追加されたバージョン

imageAlignment

文字列

center

バウンディングボックス内での画像の配置方法を決定します。画像がバウンディングボックスよりも小さい場合に使用されます。指定できる値は、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。

サポートされません

1.1.0

imageAspectRatio

文字列

square

画像のバウンディングボックスに使用するアスペクト比です。imageHeightとimageWidthのどちらか一方が指定され、両方は指定されていない場合に適用されます。指定できる値は、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。

サポートされません

1.1.0

imageBlurredBackground

ブール値

false

trueの場合、画像の背後にその画像のコピーをぼかして表示します。imageScaleがfillまたはbest-fillに設定されている場合は無視されます。

サポートされません

1.1.0

imageHeight

ディメンション

—

画像のバウンディングボックスの高さです。画像は、この高さに収まるようにimageScale設定を使用して拡大縮小されます。

サポートされません

1.1.0

imageScale

文字列

best-fit

バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。指定できる値は、none、fill、best-fit、best-fill、best-fit-downです。

サポートされません

1.1.0

imageWidth

ディメンション

—

画像のバウンディングボックスの幅です。画像は、この幅に収まるようにimageScale設定を使用して拡大縮小されます。

サポートされません

1.1.0

accessibilityLabel

文字列

画像を説明する文字列です。ユーザーがこのコンポーネントを選択すると、ボイスオーバーでこの文字列が読み上げられます。

サポートされません

1.7.0

entities

配列

—

このコンポーネントにバインドするentityデータの配列です。

サポートされません

1.2.0

gradientLowerInputRange

数値

0.3

グラデーションのinputRangeの終了値を指定します。overlayGradientがtrueの場合に適用されます。グラデーションのinputRangeプロパティの詳細については、グラデーションを参照してください。

サポートされません

1.6.0

imageRoundedCorner

ブール値

true

trueの場合、画像の角を丸くします。

サポートされません

1.1.0

imageShadow

ブール値

true

trueの場合、画像の背後にドロップシャドウを表示します。

サポートされません

1.3.0

imageSource

文字列

—

画像のURIです。

サポートされません

1.1.0

overlayGradient

ブール値

false

trueの場合、画像にグラデーションを適用します。

サポートされません

1.6.0

type

文字列

—

常にAlexaImageに設定します。

サポートされません

1.1.0

imageHeight、imageWidth

これらのパラメーターは、画像のバウンディングボックスの高さと幅を設定するディメンションです。AlexaImageは、imageScaleオプションに従って画像がボックス内に収まるように画像サイズを調整し、imageAlignmentオプションの指定に従って画像を配置します。

少なくとも、imageHeightとimageWidthのどちらか一方を指定する必要があります。

  • 両方を指定すると、画像のバウンディングボックスは指定されたディメンションになります。
  • 一方だけを指定すると、AlexaImageは指定されたimageAspectRatioに基づいてもう一方のディメンションを計算します。

imageAlignment

バウンディングボックス内での画像の配置方法を決定します。表示する画像がバウンディングボックスよりも小さい場合に使用されます。

imageAlignmentパラメーターには、次のオプションを指定できます。

名前 説明
bottom 下揃えで左右中央に配置します。
bottom-left 左下隅に配置します。
bottom-right 右下隅に配置します。
center 左右・上下の中央に配置します。
left 左揃えで上下中央に配置します。
right 右揃えで上下中央に配置します。
top 上揃えで左右中央に配置します。
top-left 左上隅に配置します。
top-right 右上隅に配置します。

imageAspectRatio

imageHeightかimageWidthの一方だけを設定した場合の、画像のバウンディングボックスのアスペクト比とサイズを決定します。

imageAspectRatioパラメーターには、次のオプションを指定できます。

名前 比率
square 1:1
round 1:1
standard_landscape 4:3
standard_portrait 3:4
poster_landscape 3:2
poster_portrait 2:3
widescreen 16:9

一方のディメンション（imageHeightまたはimageWidth）だけを設定した場合、AlexaImageは、結果のバウンディングボックスが指定されたアスペクト比に一致するようにもう一方のディメンションのサイズを計算します。たとえば、imageWidthが300dpでimageAspectRatioがstandard_landscapeの場合、結果の画像のバウンディングボックスは、幅が300dpで高さが400dpの4:3のアスペクト比になります。

imageWidthとimageHeightの両方を指定すると、AlexaImageは、指定されたディメンションを画像のバウンディングボックスのサイズとして使用します。この場合、imageAspectRatioは無視されます。

imageAspectRatioは、画像のバウンディングボックスのアスペクト比を決定するものであることに注意してください。バウンディングボックスのサイズとアスペクト比は、ソース画像の実際のアスペクト比と一致する必要はありません。たとえば、imageAspectRatioをsquareに設定し、横長の画像を参照するimageSourceを渡しても構いません。この場合、imageScaleによって、その画像をどのようにボックス内に収めるかが決定されます。例については、画像のアスペクト比と拡大縮小の例を参照してください。

imageBlurredBackground

trueの場合、画像の背後にその画像のコピーをぼかして表示します。背景は、画像のバウンディングボックスが、サイズ調整された実際の画像よりも大きい場合に表示されます。これは通常、imageScale設定にbest-fitまたはbest-fit-downを使用した場合が当てはまります。また、拡大縮小オプションがnoneで、画像がバウンディングボックスより小さい場合にも背景が表示されます。fillとbest-fillの場合は、画像がバウンディングボックス全体を覆うようにサイズ調整されるため、これらの拡大縮小オプションではimageBlurredBackgroundは無視されます。

imageBlurredBackgroundプロパティは、画像のリストなどで、サイズが異なるさまざまな画像を一定のサイズのボックスに表示する場合に便利です。ぼかした背景でスペースを埋めることができるため、同じサイズのボックスを任意のサイズの画像に使用できます。

best-fitとbest-fillの違いについては、画像のアスペクト比と拡大縮小の例を参照してください。

imageScale

バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。imageScaleプロパティには、次のオプションを指定できます。

名前 説明
none 画像のサイズは変更されません。AlexaImageは、imageAlignプロパティに従って画像をバウンディングボックス内に配置します。バウンディングボックスからはみ出た部分は切り取られます。
fill 画像の幅をバウンディングボックスの幅に合わせ、画像の高さをバウンディングボックスの高さに合わせるように不均等にサイズを調整します。
best-fill バウンディングボックスが完全に覆われるように、画像のサイズを均等に拡大または縮小します。AlexaImageは、サイズ調整した画像をimageAlignプロパティに従ってバウンディングボックス内に配置します。
best-fit 画像全体がバウンディングボックス内に収まるように、画像のサイズを均等に拡大または縮小します。AlexaImageは、サイズ調整した画像をimageAlignプロパティに従ってバウンディングボックス内に配置します。
best-fit-down best-fitと同じように画像のサイズを調整しますが、縮小のみを許可し、拡大は行いません。これにより、画像が粗く表示されるのを防ぐことができます。

best-fitとbest-fillの違いについては、画像のアスペクト比と拡大縮小の例を参照してください。

画像のアスペクト比と拡大縮小の例

以下の例では、同じソース画像を使用してさまざまなimageAspectRatioオプションの結果を示します。すべての例で次の横長の画像を使用しています。

横長の画像
imageAspectRatioの例で使用される横長の画像

それぞれの例には次の設定が適用されます。

  • imageWidth - 300dp（imageHeightは設定されません）
  • imageAlignment - center（best-fillでは無視されます）
  • imageBlurredBackground - true（best-fillでは無視されます）
  • imageRoundedCorner - false
  • imageAspectRatio - imageAspectRatioオプションのいずれか（表の行に記載）
  • imageScale - best-fitまたはbest-fill（表の列見出しに記載）

これらの画像を生成するAPLドキュメントについては、AlexaImageの例を参照してください。

imageAspectRatio best-fit best-fill

square

standard_portrait

standard_landscape

poster_landscape

widescreen

standard_landscape、poster_landscape、widescreenの例でも、それぞれのアスペクト比に合わせるには画像のサイズを調整する必要があることに注意してください。ソース画像は横長ですが、画像のアスペクト比は、imageAspectRatioで定義されている4:3（standard_landscape）、3:2（poster_landscape）、16:9（widescreen）のアスペクト比のいずれにも正確には一致しません。ソース画像はwidescreenオプションに最も近いため、その例で適用されるサイズ調整はわずかです。

AlexaImageの例

この例では、Viewportの中央に正方形を表示します。正方形はぼかした画像のコピーで塗りつぶされ、この正方形に収まるように画像全体のサイズが調整されます。imageAspectRatioプロパティとimageScaleプロパティを変更すると、画像のアスペクト比と拡大縮小の例と同様の効果を確認できます。

このページは役に立ちましたか？

最終更新日: 2025 年 11 月 04 日