Swipe to Action

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

Swipe to Action

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

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

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

alexa-layoutsパッケージの最新バージョンは1.2.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
`customLayoutName`	任意		項目に使用するカスタムレイアウトの名前です。設定しない場合、コンポーネントは`AlexaTextListItem`レスポンシブ対応コンポーネントを使って項目の表示方法を決定します。	1.2.0
`direction`	文字列	left	スワイプジェスチャーの方向です。`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
`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`を表示する位置です。`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`	文字列	right	`tertiaryText`を表示する位置です。`bottom`、`right`のいずれかに設定します。`right`に設定した場合、`tertiaryText`は`primaryText`の右上に表示されます。`bottom`に設定した場合、`tertiaryText`は`primaryText`の下に、`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でスワイプを有効にするには、swipeDirectionをleftかrightのいずれかに設定します。

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

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

AlexaSwipeToActionの例

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

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

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

クリップボードにコピーされました。

オーサリングツールでAPLサンプルをテストする方法については、オーサリングツールでAPLサンプルをテストするを参照してください。

{
  "type": "APL",
  "version": "1.5",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.2.0"
    }
  ],
  "commands": {
    "ShowSwipeProgress": {
      "commands": [
        {
          "type": "SetValue",
          "componentId": "myHeaderId",
          "property": "headerSubtitle",
          "value": "スワイプ中：${(event.position * event.source.width)}"
        }
      ]
    },
    "ShowSwipeFinished": {
      "commands": [
        {
          "type": "SetValue",
          "componentId": "myHeaderId",
          "property": "headerSubtitle",
          "value": "@resultText"
        }
      ]
    },
    "ShowSelectionFinished": {
      "commands": [
        {
          "type": "SetValue",
          "componentId": "myHeaderId",
          "property": "headerSubtitle",
          "value": "@selectText"
        }
      ]
    }
  },
  "resources": [
    {
      "strings": {
        "headerSubtitleText": "項目を選択またはスワイプしてください",
        "resultText": "スワイプ完了",
        "selectText": "スワイプの代わりに項目を選択しました"
      }
    },
    {
      "when": "${@viewportProfile == @tvLandscapeXLarge}",
      "strings": {
        "headerSubtitleText": "リモコンを使って項目をハイライト表示してボタンをクリックしてください",
        "resultText": "ボタンの選択完了",
        "selectText": "1つのオプションボタンではなく項目全部を選択しました"
      }
    }
  ],
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Container",
        "width": "100%",
        "items": [
          {
            "type": "AlexaHeader",
            "id": "myHeaderId",
            "headerTitle": "スワイプアクションの例",
            "headerSubtitle": "@headerSubtitleText"
          },
          {
            "type": "AlexaSwipeToAction",
            "primaryText": "デフォルトのスワイプアクションの第1テキスト",
            "secondaryText": "第2テキスト",
            "tertiaryText": "第3テキスト",
            "touchForward": true,
            "button1Text": "ボタン1",
            "button1Command": {
              "type": "ShowSwipeFinished"
            },
            "button2Text": "ボタン2",
            "button2Command": {
              "type": "ShowSwipeFinished"
            },
            "onSwipeMove": {
              "type": "ShowSwipeProgress"
            },
            "onSwipeDone": {
              "type": "ShowSwipeFinished"
            },
            "primaryAction": {
              "type": "ShowSelectionFinished"
            }
          },
          {
            "type": "AlexaSwipeToAction",
            "primaryText": "カスタムアイコン色を使ったスワイプアクション",
            "actionIconForeground": "red",
            "touchForward": true,
            "button1Text": "ボタン1",
            "button1Command": {
              "type": "ShowSwipeFinished"
            },
            "button2Text": "ボタン2",
            "button2Command": {
              "type": "ShowSwipeFinished"
            },
            "onSwipeMove": {
              "type": "ShowSwipeProgress"
            },
            "onSwipeDone": {
              "type": "ShowSwipeFinished"
            },
            "primaryAction": {
              "type": "ShowSelectionFinished"
            }
          },
          {
            "type": "AlexaSwipeToAction",
            "primaryText": "カスタム背景色を使ったスワイプアクション",
            "actionIconForeground": "red",
            "actionIconBackground": "@colorSalmon800",
            "touchForward": true,
            "button1Text": "ボタン1",
            "button1Command": {
              "type": "ShowSwipeFinished"
            },
            "button2Text": "ボタン2",
            "button2Command": {
              "type": "ShowSwipeFinished"
            },
            "onSwipeMove": {
              "type": "ShowSwipeProgress"
            },
            "onSwipeDone": {
              "type": "ShowSwipeFinished"
            },
            "primaryAction": {
              "type": "ShowSelectionFinished"
            }
          }
        ]
      }
    ]
  }
}

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

フィードバックを送信

最終更新日: 2020 年 11 月 20 日

Swipe to Action

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

AlexaSwipeToActionのパラメーター

AlexaTextList内のAlexaSwipeToAction

AlexaSwipeToActionの例

関連トピック

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