APL TouchWrapper

APL TouchWrapper

TouchWrapperは、1つの子コンポーネントをラップし、タッチイベントに応答します。

プロパティ

TouchWrapperコンポーネントには、次のプロパティがあります。

プロパティ 型 デフォルト スタイル設定 動的 説明
item、items コンポーネント [ ] × × 表示する子項目です。

TouchWrapperがソースまたはイベントのターゲットである場合、event.sourceまたはevent.targetに以下の値が報告されます。

{
  // TouchWrapper固有の値
  "type": "TouchWrapper",

  // 一般的なコンポーネントの値
  "bind": Map,         // コンポーネントのデータバインディングコンテキストへのアクセス
  "checked": Boolean,  // チェック状態
  "disabled": Boolean, // 無効化の状態
  "focused": Boolean,  // フォーカス状態
  "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
  "id": ID,            // コンポーネントのID
  "opacity": Number,   // コンポーネントの不透明度[0～1]
  "pressed": Boolean,  // 押下状態
  "uid": UID,          // ランタイムで生成されたコンポーネントの一意のID
  "width": Number      // コンポーネントのdp単位の幅（パディングを含む）
}

item、items

表示する子コンポーネントまたはレイアウトです。ユーザーは画面上のコンポーネントをタップまたは選択して、アクション可能なイベントハンドラーとタッチ可能なイベントハンドラーを呼び出すことができます。複数の項目を提供した場合、TouchWrapperは、APLコンポーネントの条件付きインフレートで説明されている単一の子のロジックを使用して、項目を1つ選択して表示します。itemで複数のコンポーネントを組み合わせるには、ContainerまたはLayoutを使用します。

アクション可能なプロパティ

TouchWrapperはアクション可能なコンポーネントです。TouchWrapperは、すべてのアクション可能なプロパティを継承します。

タッチ可能なプロパティ

TouchWrapperはタッチ可能なコンポーネントです。TouchWrapperは、すべてのタッチ可能なプロパティを継承します。

TouchWrapperによって生成されるソースイベントの詳細については、タッチ可能なコンポーネントのプロパティを参照してください。TouchWrapperで使用される固有の値は次のとおりです。

event.source.type = "TouchWrapper"
event.source.value = Boolean    // TouchWrapperのチェック状態

タッチ可能なコンポーネントにはgestures配列があり、DoublePressやLongPressなどのジェスチャーハンドラーの配列を指定できます。ジェスチャーの詳細については、ジェスチャーを参照してください。例については、次の各ジェスチャーハンドラーのトピックを参照してください。

TouchWrapperの例

単独のコンポーネント

以下の例では、TouchWrapperはTextコンポーネントをラップしています。ユーザーがテキストを押すと、コンポーネントは次の2つのコマンドを実行します。

  • SendEventコマンド。SendEventコマンドは、スキルサービスにAlexa.Presentation.APL.UserEventリクエストを送信します。スキルサービスにUserEventリクエストを処理するハンドラーが実装されている必要があります。
  • SetValueコマンド。Textコンポーネントのtextプロパティを更新します。

この例のSetValueコマンドの結果を確認するには、テキストをクリックしてください。

SendEventコマンドを試すには、このAPLドキュメントを完全なスキルにコピーしてください。次の例は、SendEventコマンドによって生成されるUserEventリクエストを示しています。

{
  "type": "Alexa.Presentation.APL.UserEvent",
  "requestId": "amzn1.echo-api.request.1",
  "timestamp": "2023-02-21T18:09:14Z",
  "locale": "ja-JP",
  "arguments": [
    "peasinapod"
  ],
  "components": {},
  "source": {
    "type": "TouchWrapper",
    "handler": "Press",
    "id": "fivePeasInAPodTouchWrapper",
    "value": false
  },
  "token": "token-provided-in-the-RenderDocument-directive"
}

UserEventハンドラーの例については、UserEventリクエストを処理するを参照してください。

Sequenceのリスト項目

以下は、SequenceのitemプロパティにTouchWrapperを使用する例を示しています。TouchWrapperはTextコンポーネントをラップします。

Sequenceは、提供されたデータ配列（touchWrapperInSequenceData.listItems）の項目ごとにTouchWrapperを1回ずつ表示します。各リスト項目はTouchWrapperであるため、ユーザーはリストから任意の項目を選択できます。TouchWrapperは、SetValueコマンドを実行して、選択された項目に関する情報でTextコンポーネントを更新し、SendEventコマンドを使用してスキルにUserRequestを送信します。

SendEventコマンドを試すには、このAPLドキュメントを完全なスキルにコピーしてください。以下は、この例のSendEventコマンドによって生成されるUserEventリクエストの例です。

{
  "type": "Alexa.Presentation.APL.UserEvent",
  "requestId": "amzn1.echo-api.request.1",
  "timestamp": "2023-02-21T20:26:53Z",
  "locale": "ja-JP",
  "arguments": [
    {
      "itemOrdinal": 17,
      "itemIndex": 16,
      "action": "ItemSelected",
      "itemId": "item_16"
    }
  ],
  "components": {},
  "source": {
    "type": "TouchWrapper",
    "handler": "Press",
    "id": "item_16",
    "value": false
  },
  "token": "token-provided-in-the-RenderDocument-directive"
}

Sequenceプロパティの詳細については、Sequenceを参照してください。

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

最終更新日: 2025 年 11 月 26 日