Swipe to Action

---

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

AlexaSwipeToActionでは、SwipeAwayジェスチャーが使用されます。

互換性

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

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

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

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

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

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

AlexaSwipeToActionのパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
actionIcon	文字列	—	スワイプ中に表示するカスタムアイコンのソースです。actionIconTypeがAVGの場合、このプロパティには、graphicsプロパティまたはインポートされたパッケージで定義されているグラフィックの名前を設定します。actionIconTypeがimageの場合、表示する画像の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
componentSlot	コンポーネント	—	リスト項目の最後に表示する対話型のレスポンシブ対応コンポーネントです。使用できるオプションとして、AlexaButton、AlexaRadioButton、AlexaSwitch、AlexaCheckboxのいずれかが推奨されます。	サポートされません	1.7.0
customLayoutName	任意	—	項目に使用するカスタムレイアウトの名前です。設定しない場合、コンポーネントはAlexaTextListItemレスポンシブ対応コンポーネントを使用して項目の表示方法を決定します。	サポートされません	1.2.0
direction	文字列	backward	スワイプジェスチャーの方向です。backwardまたはforwardに設定します。下位互換性のために、このプロパティはleftまたはrightに設定することもできます。	サポートされません
emptyRatingGraphic	任意	empty	「空」のレーティングスロット（中が空の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいviewport上では、スペースの制約でレーティングが表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	サポートされません	1.2.0
fullRatingGraphic	任意	full	「満点」のレーティングスロット（完全な星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいviewport上では、スペースの制約でレーティングが表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
halfRatingGraphic	任意	half	「半分」のレーティングスロット（半分の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。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の場合、画像の背後にその画像のコピーをぼかして表示します。imageScaleがfillまたはbest-fillに設定されている場合は無視されます。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageBlurredBackgroundプロパティと同じように機能します。	サポートされません	1.2.0
imageScale	文字列	best-fit	バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageScaleプロパティと同じように機能します。	サポートされません	1.2.0
imageThumbnailShadow	ブール値	true	trueの場合、画像のサムネイルの背後にドロップシャドウを表示します。	サポートされません	1.3.0
imageThumbnailSource	文字列	—	項目の横にサムネイルとして表示する画像のURIです。	サポートされません	1.2.0
lang	文字列	${environment.lang}	Swipe to Actionコンポーネントに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAに設定すると、コンポーネントはデバイスでアラビア語フォントが利用可能であれば使用します。BCP-47文字列に設定します。 レスポンシブ対応コンポーネントの言語固有のフォントの詳細については、コンポーネントとテンプレートでの言語固有のフォントを参照してください。	サポートされません	1.4.0
layoutDirection	文字列	${environment.layoutDirection}	コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	1.4.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プロパティに単一のグラフィックアセットを指定します。multipleの場合は、ratingNumberに数値の評価を指定します。 小さいviewport上では、スペースの制約でレーティングが表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingText	文字列	—	レーティングの横に表示するテキストです。ratingNumberが負の数値または省略された場合は無視されます。	サポートされません	1.2.0
secondaryText	文字列	—	項目に表示する第2テキストです。	サポートされません	1.2.0
secondaryTextPosition	文字列	bottom	secondaryTextを表示する位置です。topまたはbottomに設定します。secondaryTextは、primaryTextの先頭に揃えられます。	サポートされません	1.2.0
singleRatingGraphic	任意	—	レーティングを表すために表示するグラフィックです。ratingSlotModeがsingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいviewport上では、スペースの制約でレーティングが表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
singleRatingGraphicWidth	ディメンション	—	レーティングを表す1つのグラフィックのバウンディングボックスの幅です。ratingSlotModeがsingleの場合に使用されます。 小さいviewport上では、スペースの制約でレーティングが表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
tertiaryText	文字列	—	項目に表示する第3テキストです。	サポートされません	1.2.0
tertiaryTextPosition	文字列	end	tertiaryTextを表示する位置です。bottomまたはendに設定します。endに設定した場合、tertiaryTextはprimaryTextの後に上揃えで表示されます。bottomに設定した場合、tertiaryTextはprimaryTextの下に表示され、primaryTextの先頭に揃えられます。componentSlotが設定されている場合、endの位置にある第3テキストはコンポーネントスロットによってオーバーライドされます。	サポートされません	1.2.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。	サポートされません	1.2.0
touchForward	ブール値	false	trueの場合、ユーザーが画面をタッチできるほど近くにいる（視聴距離が1m以内）と想定し、項目のフォントサイズを小さくします。falseの場合、ユーザーが画面をタッチできるほど近くにはいない（音声で操作する）と想定し、大きいフォントサイズを使用します。	サポートされません	1.2.0
type	文字列	—	常にAlexaSwipeToActionに設定されます。	サポートされません	1.2.0

AlexaTextList内のAlexaSwipeToAction

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

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

AlexaTextListでスワイプを有効にするには、swipeDirectionをleftまたはrightに設定します。

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

サンプルドキュメント： AlexaTextList内でスワイプする  

データソース： AlexaTextList内でスワイプする  

AlexaSwipeToActionの例

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

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

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

サンプルドキュメント： AlexaSwipeToAction  

関連トピック

• APL向けAlexa Design System
• レスポンシブ対応コンポーネントとテンプレート
• SwipeAwayジェスチャー

---

---

最終更新日: 2025 年 10 月 02 日