Image Caption（ウィジェット）

Alexa Image Captionテンプレート（AlexaImageCaption）は、画像にヘッダーとキャプションを付けて表示します。キャプションテキストは、第1テキストと第2テキストとして指定できます。このテンプレートでは、キャプションを画像の上に重ねて表示したり、画像の下の単色のボックスに表示したりできます。

互換性

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

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

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

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

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

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

AlexaImageCaptionのパラメーター

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

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	—	フッターアクションボタンを説明する文字列です。ユーザーがボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。buttonTextに値が指定されている場合に適用されます。	中	1.5.0
attributionImage	文字列	—	アトリビューションの画像ソースのURLです。この画像はprimaryTextの下に表示されます。attributionImageとsecondaryTextの両方を指定した場合、attributionImageが表示され、secondaryTextは表示されません。	中	1.5.0
buttonStyle	文字列	contained	フッターアクションボタンのスタイルです。buttonTextに値が指定されている場合に適用されます。containedまたはingressに設定します。どのスタイルを使用すればよいかの詳細については、ボタンの外観を参照してください。ボタンの色はthemeによって決まります。	中	1.5.0
buttonText	文字列	—	設定した場合、指定したテキストを含むフッターアクションボタンが表示されます。このテキストはボタンの目的を示している必要があります。設定しない場合、AlexaImageCaptionにフッターアクションボタンは追加されません。	中	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
imageScrim	ブール値	true	trueの場合、キャプションテキストを画像に直接重ねて表示します。テキストを読みやすくするために、グラデーションスクリムが適用されます。falseの場合、テキストを画像の後に単色の背景で表示します。	中	1.5.0
imageSource	文字列	—	表示する画像のUniform Resource Identifier（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.5.0
secondaryText	文字列	—	primaryTextの下に表示する第2テキストです。secondaryTextとattributionImageの両方を指定した場合、secondaryTextは表示されません。	中	1.5.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	中	1.5.0
touchForward	ブール値	false	trueの場合、フッターアクションボタンのテキストに「タッチ前提」テキストスタイルが適用されます。このスタイルは、ボタンテキストを斜体にせずに表示します。falseの場合、デフォルトのテキストスタイルを使用します。ボタンのスタイルを設定する方法の詳細については、ボタンの外観を参照してください。	中	1.5.0
type	文字列	—	常にAlexaImageCaptionに設定します。	中	1.5.0

AlexaImageCaptionの例

次の例は、imageScrimがtrueに設定されたAlexaImageCaptionを示しています。この例には、attributionImageも含まれています。したがって、secondaryTextは表示されません。

---

次の例は、imageScrimがfalseに設定されたAlexaImageCaptionを示しています。テキストは画像の下の単色のボックスに表示されます。この例には、attributionImageは含まれていません。したがって、1行のsecondaryTextが表示されます。

---

関連トピック

• Photo
• レスポンシブ対応テンプレート

---

---

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