Card

Note: Sign in to the developer console to build or publish your skill.

Card

Alexa Cardレスポンシブ対応コンポーネント（AlexaCard）は、コンテナー内に最小単位のコンテンツを表示します。このコンポーネントを使用すると、一目で読み取ることができる情報のスナップショットを表示できます。背景、メタデータ、ユーザーがカードを選択すると実行されるコマンドを設定できます。

互換性

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

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

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

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

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

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

AlexaCardコンポーネントでは、secondaryTextとtertiaryTextの横にアイコンを表示できます。Alexaアイコンライブラリからアイコンを使用するには、ドキュメントにalexa-iconパッケージもインポートする必要があります。次の例は、最新バージョンのalexa-layoutsとalexa-iconをインポートするimport配列を示しています。

{
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.7.0"
    },
    {
      "name": "alexa-icon",
      "version": "1.0.0"
    }
  ]
}

AlexaCardのパラメーター

以下の表は、AlexaCardで設定できるパラメーターを示しています。特に記載のない限り、標準viewportプロファイルはすべてのパラメーターをサポートします。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットviewportプロファイルを示しています。viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
`accessibilityLabel`	文字列	`Item: {imageAltText} {primaryText} {secondaryText} {tertiaryText} {ratings}`	カードを説明する文字列です。ユーザーがカードを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.7.0
`attributionImage`	文字列	—	アトリビューションの画像ソースのURLです。	サポートされません	1.7.0
`cardBackgroundColor`	色	—	カードの背景色です。	サポートされません	1.7.0
`cardId`	文字列	`cardId`	`Card`コンポーネントのこのインスタンスを表す一意の識別子です。`Sequence`などに複数の`Card`コンポーネントを同時に表示する場合は、各インスタンスの一意のIDを`cardId`に設定します。	サポートされません	1.7.0
`cardRoundedCorner`	ブール値	`true`	`true`の場合、カードの角を丸く表示します。	サポートされません	1.7.0
`cardShadow`	ブール値	`true`	`true`の場合、カードにドロップシャドウを表示します。	サポートされません	1.7.0
`disabled`	ブール値	`false`	`true`の場合、このコンポーネントはタッチやフォーカスに応答しません。	サポートされません	1.7.0
`emptyRatingGraphic`	任意	—	「空」の評価スロット（中が空の星など）を表すグラフィックです。`ratingSlotMode`が`multiple`の場合に使用されます。AVGへの参照または画像のURLを指定できます。小さいviewport上では、スペースの制約で評価が表示されません。 `AlexaRating`のプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.7.0
`entities`	任意	—	このレイアウトにバインドするエンティティデータの配列です。	サポートされません	1.7.0
`fullRatingGraphic`	任意	—	「満点」の評価スロット（完全な星など）を表すグラフィックです。`ratingSlotMode`が`multiple`の場合に使用されます。AVGへの参照または画像のURLを指定できます。小さいviewport上では、スペースの制約で評価が表示されません。 `AlexaRating`のプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.7.0
`halfRatingGraphic`	任意	—	「半分」の評価スロット（半分の星など）を表すグラフィックです。`ratingSlotMode`が`multiple`の場合に使用されます。AVGへの参照または画像のURLを指定できます。小さいviewport上では、スペースの制約で評価が表示されません。 `AlexaRating`のプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.7.0
`headerText`	文字列	—	カードの上部に表示するヘッダーテキストです。	サポートされません	1.7.0
`imageAltText`	文字列	—	画像の代替テキストです。ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.7.0
`imageCaption`	ブール値	`false`	`true`の場合、カードのテキストを画像の下に単色の背景で表示します。`false`の場合、テキストを画像に直接重ねて表示します。テキストを読みやすくするために、グラデーションスクリムが適用されます。	サポートされません	1.7.0
`imageHideScrim`	ブール値	`false`	`true`の場合、画像に重ねて表示されるスクリムオーバーレイを非表示にします。	サポートされません	1.7.0
`imageProgressBarPercentage`	数値	0	1～100の数値に設定すると、指定したパーセンテージに基づいて画像に進行状況バーが表示されます。これにより、ユーザーは項目のステータスをひとめで確認できます。進行状況バーは、`imageShowProgressBar`が`true`で、`imageProgressBarPercentage`パラメーターが0より大きい値に設定され、カードに`imageSource`がある場合に表示されます。	サポートされません	1.7.0
`imageShowProgressBar`	ブール値	`true`	`true`の場合、画像のオーバーレイに進行状況バーを表示します。進行状況バーは、`imageShowProgressBar`が`true`で、`imageProgressBarPercentage`パラメーターが0より大きい値に設定され、カードに`imageSource`がある場合に表示されます。	サポートされません	1.7.0
`imageSource`	文字列	—	表示する画像のURIです。	サポートされません	1.7.0
`primaryAction`	コマンドの配列	—	ユーザーがカードをタップしたときにトリガーするアクションです。	サポートされません	1.7.0
`primaryText`	文字列	—	表示する第1テキストです。	サポートされません	1.7.0
`ratingGraphicType`	文字列	AVG	評価に使用するグラフィックのタイプです。`AVG`または`image`に設定します。小さいviewport上では、スペースの制約で評価が表示されません。 `AlexaRating`のプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.7.0
`ratingNumber`	数値	—	0～5の数値の評価です。正の数を設定すると、数字が星評価として表示されます。負の数を設定するか、値を設定しない場合は評価が表示されません。	サポートされません	1.7.0
`ratingSlotMode`	文字列	multiple	評価用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。`single`に設定した場合は、`singleRatingGraphic`プロパティに単一のグラフィックアセットを指定します。`multiple`の場合は、`ratingNumber`に数値の評価を指定します。小さいviewport上では、スペースの制約で評価が表示されません。 `AlexaRating`のプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.7.0
`ratingText`	文字列	—	評価の横に表示するテキストです。`ratingNumber`が負の数または省略された場合は無視されます。	サポートされません	1.7.0
`secondaryIconName`	文字列	—	第2アイコンの名前です。Alexaアイコンライブラリのアイコンの名前を設定します。ドキュメントに`alexa-icon`パッケージをインポートする必要があります。	サポートされません	1.7.0
`secondaryIconSource`	文字列	—	第2アイコンとして表示するAVGのURLです。`secondaryIconName`が設定されていない場合に使用されます。	サポートされません	1.7.0
`secondaryText`	文字列	—	表示する第2テキストです。	サポートされません	1.7.0
`singleRatingGraphic`	任意	—	評価を表すために表示するグラフィックです。`ratingSlotMode`が`single`の場合に使用されます。AVGへの参照または画像のURLを指定できます。小さいviewport上では、スペースの制約で評価が表示されません。 `AlexaRating`のプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.7.0
`singleRatingGraphicWidth`	ディメンション	—	評価を表す1つのグラフィックのバウンディングボックスの幅です。`ratingSlotMode`が`single`の場合に使用されます。小さいviewport上では、スペースの制約で評価が表示されません。 `AlexaRating`のプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.7.0
`tertiaryIconName`	文字列	—	第3アイコンの名前です。Alexaアイコンライブラリのアイコンの名前を設定します。ドキュメントに`alexa-icon`パッケージをインポートする必要があります。	サポートされません	1.7.0
`tertiaryIconSource`	文字列	—	第3アイコンとして表示するAVGのURLです。`tertiaryIconName`が設定されていない場合に使用されます。	サポートされません	1.7.0
`tertiaryText`	文字列	—	表示する第3テキストです。	サポートされません	1.7.0
`theme`	文字列	`dark`	色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。	サポートされません	1.7.0
`type`	文字列	—	常に`AlexaCard`に設定されます。	サポートされません	1.7.0

AlexaCardの例

次の例は、水平方向のSequenceコンポーネント内に表示されるAlexaCardを示しています。カードをタップすると、ヘッダーが更新されてタップしたカードのIDが表示され、この情報を含むUserEventがAlexaからスキルに送信されます。SendEventコマンドをテストするには、この例をスキルにコピーしてください。

APL Sequence

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

フィードバックを送信

最終更新日: 2025 年 09 月 30 日

Card

互換性

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

AlexaCardのパラメーター

AlexaCardの例

関連トピック