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

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

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

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

重要： onPress以外のすべてのタッチ可能なコンポーネントのプロパティには、APL 1.4以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。

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

タッチ可能なコンポーネントは、次のとおりです。

プロパティ

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

すべてのアクション可能なコンポーネントのプロパティ
すべての基本コンポーネントのプロパティ
以下は、タッチ可能なコンポーネント固有のプロパティの一覧です。列の意味については、こちらを参照してください。

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

gesture、gestures

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

ポインターイベントが発生すると、Alexaはジェスチャーハンドラーのリストを（順に）チェックし、イベントがサポートされているジェスチャーかどうかを判断します。該当するジェスチャーハンドラーがあった場合、AlexaはonCancelハンドラーを実行します。次に、適用されるジェスチャーハンドラーが、ポインターイベントを処理します。

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

onCancel

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

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

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

onCancelハンドラーはコマンドを高速モードで実行します。

onDown

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

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）     ,  
    "handler": "Down",
    ...                     // コンポーネントのソースプロパティ  
  },
  "component": {
    "x": Number,            // コンポーネントのdownイベントのX位置（dp）        
    "y": Number,            // コンポーネントのdownイベントの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,            // コンポーネントのmoveイベントのX位置（dp）        
    "y": Number,            // コンポーネントのmoveイベントの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,            // コンポーネントのupイベントのX位置（dp）        
    "y": Number,            // コンポーネントのupイベントのY位置（dp）        
    "width": Number,        // コンポーネントのdp単位での横幅     
    "height": Number,       // コンポーネントのdp単位での縦幅     
  }
  "inBounds": Boolean       // ポインターがコンポーネントの範囲内にある場合はTrue        
}

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

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

onUpハンドラーはコマンドを高速モードで実行します。

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

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

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

最上部のタッチ可能なコンポーネントの範囲内でdownポインターが発生すると、onDownハンドラーが実行されます。
downポインターがアクティブな間、元のdownイベントが同じコンポーネントで発生した場合には、ポインター位置の変更に応じてonMoveハンドラーが実行されます。

たとえば、componentA、componentBの2つのコンポーネントがあるとします。
- ユーザーがcomponentBをタッチして、ポインターを移動します。componentBのonMoveハンドラーが実行されます。
- ユーザーがcomponentAをタッチして、componentBの範囲内にポインターを移動します。componentBのonMoveハンドラーは実行されません。
downポインターが解放されると、元のdownイベントが同じコンポーネントで発生している場合にはonUpハンドラーが実行されます。
- ユーザーがcomponentBをタッチして、ポインターを放します。componentBのonUpハンドラーが実行されます。
- ユーザーがcomponentAをタッチし、ポインターをcomponentBの範囲内に移動してから、ポインターを放します。componentBのonUpハンドラーは実行されません。
downポインターがコンポーネントの範囲内で解放されると、元のdownイベントが同じコンポーネントで発生した場合はonPressハンドラーが実行されます。
- ユーザーがcomponentBをタッチし、ポインターをcomponentBの範囲内にとどめてから、ポインターを放します。componentBのonPressハンドラーが実行されます。
- ユーザーがcomponentBをタッチし、ポインターをcomponentBの範囲外に移動して、ポインターを放します。componentBのonPressハンドラーは実行されません。
onPressハンドラーは、常にonUpハンドラーの後に実行されます。

2つ以上のタッチ可能なコンポーネントが最初のポインターdownイベントの位置に重なっている場合、最上部のコンポーネントがdownイベント、および後続するすべてのmove、up、pressイベントを受け取ります。下部のコンポーネントはイベントを受け取りません。

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

onCancelハンドラーは、APLがポインターの制御を失った場合にも実行されます。これは、別のアプリが画面を引き継いだ場合に発生する可能性があります。

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

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

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

EnterとNumpadEnterのキーボードcodeイベントをキャプチャーし、イベントのプロパゲートをブロックすることにより、この動作を上書きできます。

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

フィードバックを送信

最終更新日: 2020 年 08 月 21 日

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

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

プロパティ

gesture、gestures

onCancel

onDown

onMove

onPress

onUp

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

関連トピック