Photo（ウィジェット）

Alexa Photoテンプレート（AlexaPhoto）は、画像にヘッダーとキャプションを付けて表示します。キャプションテキストは、第1テキストと第2テキストとして指定できます。

AlexaPhotoは、指定された2つのテキスト文字列をそれぞれ1行に切り詰め、そのキャプションテキストを画像に重ねて表示します。より長いキャプションを表示するには、Alexa Image Captionテンプレートを使用してください。その場合は、必要に応じて画像の下に単独のボックスを配置することもできます。

互換性

AlexaPhotoは、alexa-viewport-profilesパッケージの次のウィジェットビューポートプロファイルで動作するように設計されています。

• ウィジェット、中（@hubWidgetMedium）

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

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

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

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

AlexaPhotoのパラメーター

次の表は、ウィジェットビューポートプロファイルで機能するAlexaPhotoのプロパティの一覧です。すべてのパラメーターがすべてのビューポートプロファイルに適用されるわけではありません。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットビューポートプロファイルを示しています。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

type、imageSource、primaryText以外のパラメーターはすべてオプションです。

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	—	フッターアクションボタンを説明する文字列です。ユーザーがボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。buttonTextに値が指定されている場合に適用されます。	中	1.5.0
buttonStyle	文字列	contained	フッターアクションボタンのスタイルです。buttonTextに値が指定されている場合に適用されます。containedまたはingressに設定します。どのスタイルを使用すればよいかの詳細については、ボタンの外観を参照してください。ボタンの色はthemeによって決まります。	中	1.5.0
buttonText	文字列	—	設定した場合、指定したテキストを含むフッターアクションボタンが表示されます。このテキストはボタンの目的を示している必要があります。設定しない場合、AlexaPhotoにフッターアクションボタンは追加されません。	中	1.5.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	中	1.5.0
headerTitle	文字列	—	写真のヘッダーに表示する第1テキストです。	中	1.5.0
headerTitleCanUseTwoLines	ブール値	false	trueの場合、ウィジェット内の長いheaderTitleテキストを必要に応じて2行に折り返します。ウィジェットビューポートプロファイルにのみ適用されます。標準のAPLビューポートに表示されている場合は無視されます。	中	1.5.0
imageAccessibilityLabel	文字列	—	画像を説明する文字列です。ユーザーが画像コンポーネントを選択すると、ボイスオーバーでこの文字列が読み上げられます。	中	1.7.0
imageHideScrim	ブール値	false	trueの場合、テキストを読みやすくするために、画像の上にスクリム（オーバーレイ）を重ねて表示します。falseの場合、スクリムを表示しません。	中	1.5.0
imageSource	文字列	—	表示する画像のURIです。	中	1.5.0
lang	文字列	${environment.lang}	テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAに設定すると、コンポーネントはデバイスでアラビア語フォントが利用可能であれば使用します。この値はBCP-47文字列に設定します。 レスポンシブ対応コンポーネントの言語固有のフォントの詳細については、コンポーネントとテンプレートでの言語固有のフォントを参照してください。	中	1.5.0
layoutDirection	文字列	${environment.layoutDirection}	コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	中	1.5.0
primaryAction	コマンドの配列	—	ユーザーがフッターアクションボタンを選択したときにトリガーするアクションです。buttonTextに値が指定されている場合に適用されます。	中	1.5.0
primaryText	文字列	—	キャプションの第1テキストです。1行で表示されます。	中	1.5.0
secondaryText	文字列	—	キャプションの第2テキストです。primaryTextの下に1行で表示されます。	中	1.5.0
touchForward	ブール値	false	trueの場合、フッターアクションボタンのテキストに「タッチ前提」テキストスタイルが適用されます。このスタイルは、ボタンテキストを斜体にせずに表示します。falseの場合、デフォルトのテキストスタイルを使用します。ボタンのスタイル設定の詳細については、ボタンの外観を参照してください。	中	1.5.0
type	文字列	—	常にAlexaPhotoに設定します。	中	1.5.0

AlexaPhotoの例

以下は、ヘッダー、第1テキスト、第2テキストを設定したAlexaPhotoの例です。

---

関連トピック

• Image Caption（ウィジェット）
• レスポンシブ対応テンプレート

---

---

最終更新日: 2025 年 12 月 23 日