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オプションの結果を示します。すべての例で次の横長の画像を使用しています。

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

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 日