Swipe to Action



Swipe to Action

Alexaスワイプアクションレスポンシブ対応コンポーネント(AlexaSwipeToAction)は、スワイプしてアクションを実行できる項目を表示します。このコンポーネントは、リスト項目のスワイプアクションを提供するAlexaTextListなどのリストで使用できます。項目の外観とユーザーが項目をスワイプしたときに実行するコマンドを制御できます。

alexa-layoutsパッケージを読み込む

AlexaSwipeToActionを使用するには、alexa-layoutsパッケージを読み込みます

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

AlexaSwipeToActionのパラメーター

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

名前 デフォルト 説明 追加または更新されたバージョン

actionIcon

文字列

スワイプ中に表示するカスタムアイコンのソースです。actionIconTypeAVGの場合、このプロパティにgraphicsプロパティまたは読み込まれたパッケージで定義されているグラフィックの名前を設定します。actionIconTypeimageの場合、表示する画像のURLを指定します。

1.2.0

actionIconBackground

ユーザーが項目をスワイプしたときにアクションアイコンの背後に表示する背景の色です。

1.2.0

actionIconForeground

ユーザーが項目をスワイプしたときに表示するアクションアイコンの色です。

1.2.0

actionIconType

文字列

カスタムactionIconに使用するグラフィックの種類です。AVGまたはimageに設定します。imageに設定した場合は、actionIconの画像のURLを指定します。AVGに設定した場合は、ドキュメントのgraphicsプロパティでAVGを定義するか、読み込まれたパッケージで定義されているグラフィックを使用し、actionIconにグラフィックの名前を設定します。

1.2.0

button1Command

任意

オプションリストの最初のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。

1.2.0

button1Text

文字列

オプションリストの最初のボタンのテキストです。テレビデバイスにのみ使用します。

1.2.0

button2Command

任意

オプションリストの2番目のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。

1.2.0

button2Text

文字列

オプションリストの2番目のボタンのテキストです。テレビデバイスにのみ使用します。

1.2.0

buttonsSpacingRight

ディメンション

@marginHorizontal

オプションコンポーネントの右位置です。テレビデバイスにのみ使用します。

1.2.0

buttonsSpacingTop

ディメンション

序数に揃えます。

オプションコンポーネントの上位置です。テレビデバイスにのみ使用します。

1.2.0

customLayoutName

任意

項目に使用するカスタムレイアウトの名前です。設定しない場合、コンポーネントはAlexaTextListItemレスポンシブ対応コンポーネントを使って項目の表示方法を決定します。

1.2.0

direction

文字列

left

スワイプジェスチャーの方向です。leftrightのいずれかを設定します。

emptyRatingGraphic

任意

empty

「空」のレーティングスロット(中が空の星など)を表すグラフィックです。ratingSlotModemultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

小さいviewport上では、スペースの制約でレーティングが表示されません。

AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

entities

配列

[]

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

1.2.0

fullRatingGraphic

任意

full

「満点」のレーティングスロット(完全な星など)を表すグラフィックです。ratingSlotModemultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

小さいviewport上では、スペースの制約でレーティングが表示されません。

AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

halfRatingGraphic

任意

half

「半分」のレーティングスロット(半分の星など)を表すグラフィックです。ratingSlotModemultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

小さいviewport上では、スペースの制約でレーティングが表示されません。

AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

hideDivider

ブール値

false

trueの場合、項目の下に表示される横方向の区切り線を非表示にします。

1.2.0

hideHorizontalMargin

ブール値

false

trueの場合、デフォルトの左右のパディングを非表示にします。

1.2.0

hideOrdinal

ブール値

false

trueの場合、項目の横に数字を表示しません。

1.2.0

imageAlignment

文字列

center

バウンディングボックス内での画像の位置を設定する方法を決定します。画像がバウンディングボックスより小さい場合に使用されます。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageAlignmentプロパティと同じように機能します。

1.2.0

imageBlurredBackground

ブール値

false

trueの場合、画像の背後にその画像のコピーをぼかして表示します。imageScalefillまたはbest-fillに設定されている場合は無視されます。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageBlurredBackgroundプロパティと同じように機能します。

1.2.0

imageScale

文字列

best-fit

バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageScaleプロパティと同じように機能します。

1.2.0

imageThumbnailSource

文字列

なし

サムネイルとして項目の横に表示する画像のURIです。

1.2.0

onButtonsHidden

任意

オプションリストが非表示の場合に実行するコマンドです。テレビデバイスにのみ使用します。

1.2.0

onButtonsShown

任意

オプションリストが表示される場合に実行するコマンドです。テレビデバイスにのみ使用します。

1.2.0

onSwipeDone

任意

ユーザーがスワイプアクションを完了した場合に実行するコマンドです。

1.2.0

onSwipeMove

任意

ユーザーが項目をスワイプしたときに実行するコマンドです。

1.2.0

primaryAction

コマンド

なし

ユーザーが項目を選択したときに実行されるアクションです。customLayoutNameに値が設定されている場合は無視されます。

1.2.0

primaryText

文字列

なし

項目に表示する第1テキストです。

1.2.0

ratingGraphicType

文字列

AVG

レーティングに使用するグラフィックのタイプです。AVGまたはimageに設定します。

小さいviewport上では、スペースの制約でレーティングが表示されません。

AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

ratingNumber

数値

-1

0~5の数値のレーティングです。正の数を設定すると、数字が星評価として表示されます。負の数を設定するか、値を設定しない場合はレーティングが表示されません。

1.2.0

ratingSlotMode

文字列

なし

レーティング用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。singleに設定した場合、singleRatingGraphicプロパティに1つのグラフィックアセットを指定します。multipleの場合は、ratingNumberで数値のレーティングを指定します。

小さいviewport上では、スペースの制約でレーティングが表示されません。

AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

ratingText

文字列

なし

レーティングの横に表示するテキストです。ratingNumberが負の数または省略された場合は無視されます。

1.2.0

secondaryText

文字列

なし

項目に表示する第2テキストです。

1.2.0

secondaryTextPosition

文字列

bottom

secondaryTextを表示する位置です。topbottomのいずれかに設定します。secondaryTextは、常にprimaryTextに左揃えで表示されます。

1.2.0

singleRatingGraphic

任意

なし

レーティングを表すために表示するグラフィックです。ratingSlotModesingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

小さいviewport上では、スペースの制約でレーティングが表示されません。

AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

singleRatingGraphicWidth

ディメンション

なし

レーティングを表す1つのグラフィックのバウンディングボックスの幅です。ratingSlotModesingleの場合に使用されます。

小さいviewport上では、スペースの制約でレーティングが表示されません。

AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

tertiaryText

文字列

なし

項目に表示する第3テキストです。

1.2.0

tertiaryTextPosition

文字列

right

tertiaryTextを表示する位置です。bottomrightのいずれかに設定します。rightに設定した場合、tertiaryTextprimaryTextの右上に表示されます。bottomに設定した場合、tertiaryTextprimaryTextの下に、primaryTextに左揃えで表示されます。

1.2.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。

1.2.0

touchForward

ブール値

false

trueの場合、ユーザーが画面に触れられるほど近く(画面を見る距離が1m以内)にいると想定して、項目のフォントサイズを小さくします。falseの場合、ユーザーが画面に触れられるほど近づいていない(音声で操作する)と想定し、大きいフォントサイズを使用します。

1.2.0

type

文字列

なし

常にAlexaSwitchに設定されます。

1.2.0

AlexaTextList内のAlexaSwipeToAction

AlexaTextList内でAlexaSwipeToActionを使用することで、ユーザーがスワイプして項目のリストをスクロール表示することができます。テキストリスト内では、AlexaSwipeToActionプロパティに対応する次のAlexaTextListプロパティを使って、AlexaSwipeToAction項目のデフォルトを設定します。

  • swipeDirection
  • swipeActionIcon
  • swipeActionIconType
  • swipeActionIconForeground
  • swipeActionIconBackground
  • onSwipeMove
  • onSwipeDone
  • optionsButton1Text
  • optionsButton1Command
  • optionsButton2Text
  • optionsButton2Command

AlexaTextListでスワイプを有効にするには、swipeDirectionleftrightのいずれかに設定します。

たとえば、以下のAPLドキュメントとデータソースは、ユーザーが項目をスワイプできるAlexaTextListを示しています。onSwipeDoneプロパティは、個々の項目レベルではなく、リストレベルで定義されます。ユーザーがスワイプを完了すると、デバイスはユーザーがスワイプしたリスト項目に関する情報とともにUserEventリクエストをスキルに送信します。

リスト項目にスワイプアクションを使ったAlexaTextListの例。2番目の項目が部分的にスワイプされています
リスト項目にスワイプアクションを使ったAlexaTextListの例。2番目の項目が部分的にスワイプされています

AlexaSwipeToActionの例

以下は、Container内に配置されたAlexaSwipeToActionのバリエーション例です。AlexaSwipeToAction項目はボタンのテキストとアクションも設定しており、ユーザーはスワイプのほかにテレビリモコンを使ってテレビを操作することができます。

ハブデバイスで項目のスワイプを開始すると、ヘッダーが更新され、スワイプの進捗状況が表示されます。スワイプを完了すると、ヘッダーが更新され、スワイプが完了したことが表示されます。

テレビデバイスでリモコンを使って項目をハイライト表示すると、項目には2つのオプションボタンが表示されます。いずれかのボタンを選択すると、ヘッダーが更新され選択が終了したことが表示されます。

AlexaSwipeToActionの項目
AlexaSwipeToActionの項目
AlexaSwipeToAction項目をスワイプ中
AlexaSwipeToAction項目をスワイプ中
ハブではなくテレビでのSwipeToAction
ハブではなくテレビでのSwipeToAction