タッチ可能なコンポーネントのプロパティ

タッチ可能なコンポーネントのプロパティ

タッチ可能なコンポーネントは、タッチイベントまたはポインターイベントから入力を受け取り、カスタムのタッチ操作をサポートするハンドラーを呼び出します。

タッチ可能なコンポーネント

タッチ可能なコンポーネントには以下があります。

プロパティ

すべてのタッチ可能なコンポーネントには、次のプロパティがあります。

プロパティ 型 デフォルト スタイル設定 動的 説明
gesture、gestures ジェスチャーハンドラーの配列 [] × × 実行するジェスチャーハンドラーの配列です。
onCancel コマンドの配列 [] × × ジェスチャーがポインターを引き継ぐときに実行するコマンドです。
onDown コマンドの配列 [] × × ポインターのダウンイベントが発生したときに実行するコマンドです。
onMove コマンドの配列 [] × × ポインターの移動時に実行するコマンドです。
onPress コマンドの配列 [] × × ポインターダウンに続けてアップが発生したときに実行するコマンドです。
onUp コマンドの配列 [] × × ポインターを放したときに実行するコマンドです。

スキルにAlexa.Presentation.APL.UserEventリクエストを送信するには、SendEventコマンドを使用します。UserEventハンドラーの例については、UserEventリクエストを処理するを参照してください。

layoutDirectionコンポーネントプロパティ

タッチ可能なコンポーネントのlayoutDirectionプロパティは、SwipeAwayジェスチャーのdirectionプロパティがどのように機能するかを決定します。

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

gesture、gestures

ジェスチャーハンドラーの配列です。

ポインターイベントが発生すると、Alexaはジェスチャーハンドラーのリストを順番にチェックして、そのイベントがサポート対象のジェスチャーを表しているかどうかを判断します。適用されるジェスチャーハンドラーがあった場合、AlexaはonCancelハンドラーを実行します。次に、適用されるジェスチャーハンドラーが、ポインターイベントを処理します。ジェスチャーの例には、ダブルタップ（DoublePress）や長押し（LongPress）などがあります。

ポインターイベントに適用されるジェスチャーハンドラーがない場合、Alexaは、そのイベントを適用可能なonDown、onMove、onUpのハンドラーに渡します。

ジェスチャーの詳細については、ジェスチャーを参照してください。例については、次の各ジェスチャーハンドラーのトピックを参照してください。

onCancel

ジェスチャーハンドラーがポインターの制御を引き継ぐときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapperやVectorGraphicなど）
    "handler": "Cancel",
    ...                     // コンポーネントのソースのプロパティ
  },
  "component": {
    "x": Number,            // コンポーネント内でのダウンイベントのX位置（dp）
    "y": Number,            // コンポーネント内でのダウンイベントのY位置（dp）
    "width": Number,        // コンポーネントの幅（dp）
    "height": Number,       // コンポーネントの高さ（dp）
  }
}

event.sourceのプロパティの詳細については、イベントソースを参照してください。

onCancelイベントハンドラーは、コンポーネントのデータバインディングコンテキストで高速モードで実行されます。

onDown

ポインターのダウンイベントが発生したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）
    "handler": "Down",
    ...                     // コンポーネントのソースのプロパティ
  },
  "component": {
    "x": Number,            // コンポーネント内でのダウンイベントのX位置（dp）
    "y": Number,            // コンポーネント内でのダウンイベントのY位置（dp）
    "width": Number,        // コンポーネントの幅（dp）
    "height": Number,       // コンポーネントの高さ（dp）
  }
}

event.sourceのプロパティの詳細については、イベントソースを参照してください。

onDownハンドラーは、コマンドをコンポーネントのデータバインディングコンテキストで高速モードで実行します。

VectorGraphicコンポーネントでは、このイベントにviewportプロパティが追加されます。

onMove

ポインターの位置が移動したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）
    "handler": "Move",
    ...                     // コンポーネントのソースのプロパティ
  },
  "component": {
    "x": Number,            // コンポーネント内での移動イベントのX位置（dp）
    "y": Number,            // コンポーネント内での移動イベントのY位置（dp）
    "width": Number,        // コンポーネントの幅（dp）
    "height": Number,       // コンポーネントの高さ（dp）
  },
  "inBounds": Boolean       // ポインターがコンポーネントの境界内にある場合はtrue        
}

ポインター位置のinBoundsの計算では、重なり合うコンポーネントは考慮されません。

event.sourceのプロパティの詳細については、イベントソースを参照してください。

onMoveハンドラーは、コマンドをコンポーネントのデータバインディングコンテキストで高速モードで実行します。

VectorGraphicコンポーネントでは、このイベントにviewportプロパティが追加されます。

onPress

押下イベントが発生したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）
    "handler": "Press",
    ...                     // コンポーネントのソースのプロパティ
  }
}

event.sourceのプロパティの詳細については、イベントソースを参照してください。

onPressハンドラーは、コマンドをコンポーネントのデータバインディングコンテキストで通常モードで実行します。

onUp

ポインターのアップイベントが発生したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）
    "handler": "Up",
    ...                     // コンポーネントのソースのプロパティ
  },
  "component": {
    "x": Number,            // コンポーネント内でのアップイベントのX位置（dp）
    "y": Number,            // コンポーネント内でのアップイベントのY位置（dp）
    "width": Number,        // コンポーネントの幅（dp）
    "height": Number,       // コンポーネントの高さ（dp）
  }
  "inBounds": Boolean       // ポインターがコンポーネントの境界内にある場合はtrue        
}

ポインター位置のinBoundsの計算では、重なり合うコンポーネントは考慮されません。

event.sourceのプロパティの詳細については、イベントソースを参照してください。

onUpハンドラーは、コマンドをコンポーネントのデータバインディングコンテキストで高速モードで実行します。

VectorGraphicコンポーネントでは、このイベントにviewportプロパティが追加されます。

イベントハンドラーのルール

タッチ可能なコンポーネントの変換後の境界内でユーザーがマウスイベントやタップイベントを開始または実行すると、そのコンポーネントのポインターイベントハンドラーがトリガーされます。Alexaは、次のルールに従ってこれらのハンドラーを実行します。

  1. 最上位のタッチ可能なコンポーネントの変換後の境界内でポインターダウンが発生すると、onDownハンドラーが実行されます。

  2. ポインターダウンがアクティブな間、元のダウンイベントと同じコンポーネント内でポインターの位置が変更されると、onMoveハンドラーが実行されます。

    たとえば、componentAとcomponentBの2つのコンポーネントがあるとします。

    • ユーザーがcomponentBをタッチして、ポインターを移動します。この場合、componentBのonMoveハンドラーが実行されます。
    • ユーザーがcomponentAをタッチして、componentBの境界内にポインターを移動します。この場合、componentBのonMoveハンドラーは実行されません。

  3. コンポーネント内でポインターダウンが解除されると、元のダウンイベントが同じコンポーネント内で発生したものであれば、onUpハンドラーが実行されます。

    • ユーザーがcomponentBをタッチした後、ポインターを放します。この場合、componentBのonUpハンドラーが実行されます。
    • ユーザーがcomponentAをタッチし、ポインターをcomponentBの境界内に移動した後、ポインターを放します。この場合、componentBのonUpハンドラーは実行されません。

  4. コンポーネントの変換後の境界内でポインターダウンが解除されると、元のダウンイベントが同じコンポーネント内で発生したものであれば、onPressハンドラーが実行されます。

    • ユーザーがcomponentBをタッチし、ポインターをcomponentBの境界内にとどめたままポインターを放します。この場合、componentBのonPressハンドラーが実行されます。
    • ユーザーがcomponentBをタッチし、ポインターをcomponentBの境界外に移動してポインターを放します。この場合、componentBのonPressハンドラーは実行されません。
  5. onPressハンドラーは、常にonUpハンドラーの後に実行されます。

最初のポインターダウンイベントの位置に2つ以上のタッチ可能なコンポーネントが重なっている場合、最上位のコンポーネントが、ダウンイベントと後続のすべての移動、アップ、押下のイベントを受け取ります。下位のコンポーネントはイベントを一切受け取りません。

ジェスチャーは、スワイプやダブルタップなど、特定の動きやポインターアクションを解釈する特別な用途のハンドラーです。ジェスチャーハンドラーは、ジェスチャーの開始を認識するとonCancelハンドラーを実行します。onCancelハンドラーの完了後、ジェスチャーハンドラーはすべてのポインターイベントをキャプチャします。onUpハンドラーとonMoveハンドラーは無視されます。

onCancelハンドラーは、APLがポインターの制御を失った場合にも実行されます。これは、画面が別のアプリに切り替えられた場合に発生することがあります。

タッチ可能なコンポーネントはアクション可能なコンポーネントであり、コンポーネントにonPressハンドラーがあれば「Enter」キーの押下に応答します。コンポーネントにonPressハンドラーがない場合、コンポーネントは何もしません。

コンポーネントにonPressハンドラーがある場合、「Enter」キーを押すと次の処理が実行されます。

  1. ユーザーがEnterキーを押すと、pressedコンポーネント状態がtrueに設定されます。
  2. ユーザーがEnterキーを放すと、pressedコンポーネント状態がfalseに設定されます。
  3. onPressハンドラーが実行されます。

この動作は、EnterとNumpadEnterのcodeを持つキーボードイベントをキャプチャし、イベントの伝播をブロックすることでオーバーライドできます。

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

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