Transport Controls

---

Alexa Transport Controlsレスポンシブ対応コンポーネント（AlexaTransportControls）は、ビデオプレーヤーコントロールのセットを表示します。ボタンの外観をカスタマイズし、ユーザーがボタンを選択したときに実行するコマンドを定義します。

互換性

AlexaTransportControlsは、次のビューポートプロファイルで動作するように設計されています。

• alexa-viewport-profilesパッケージの以下のウィジェットビューポートプロファイル：
  • ウィジェット、中（@hubWidgetMedium）
• alexa-viewport-profilesパッケージのすべての標準ビューポートプロファイル：
  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

サポートされていないビューポートでAlexaTransportControlsを使用すると、予期しない結果になることがあります。

ウィジェットでの相違点

ウィジェットでは、ビデオの再生はサポートされません。ウィジェットでは、AlexaTransportControlsを使用して、スキルを開いて全画面でビデオ再生するための「再生」ボタンを表示できます。

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

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

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

このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaTransportControlsドキュメントが表示されます。パラメーターの表には、それぞれのパラメーターが追加されたalexa-layoutsのバージョンが示されています。

AlexaTransportControlsのパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	Play pause button	再生／一時停止ボタンを説明する文字列です。ユーザーが再生／一時停止ボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。	中	1.2.0
autoplay	ブール値	false	再生／一時停止アイコンの開始状態を決定します。これは、メディア再生コンポーネントの自動再生状態と一致する必要があります。	サポートされません	1.0.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	中	1.2.0
mediaComponentId	文字列	—	メディアを再生しているコンポーネントのIDです。たとえば、制御するビデオを表示するVideoコンポーネントのIDです。	サポートされません	1.0.0
playPauseToggleButtonId	文字列	alexaPlayPauseToggleButton	再生／一時停止切り替えボタンの任意のIDです。このプロパティを使用して、VideoコンポーネントのonPlay/onPauseハンドラーなど、ほかのコマンドでトランスポートコントロールコンポーネントを識別します。AlexaTransportControlsの複数のインスタンスを同じ画面に表示する場合も、一意の識別子を設定する必要があります。	サポートされません	1.0.0
primaryControlPauseAction	コマンド	ControlMediaコマンド	ユーザーがプライマリ一時停止コントロールを選択したときに実行するコマンドです。 設定されていない場合、コントロールを選択すると、コントロールの再生／一時停止アイコンが切り替わり、pauseオプションとmediaComponentIdで指定されたメディアコンポーネントを使用してControlMediaコマンドが実行されます。ウィジェットで使用した場合、このコマンドは全画面表示のビデオエクスペリエンスを開始します。	中	1.2.0
primaryControlPlayAction	コマンド	ControlMediaコマンド	ユーザーがプライマリ再生コントロールを選択したときに実行するコマンドです。 設定されていない場合、コントロールを選択すると、コントロールの再生／一時停止アイコンが切り替わり、playオプションとmediaComponentIdで指定されたメディアコンポーネントを使用してControlMediaコマンドが実行されます。ウィジェットで使用した場合、このコマンドは全画面表示のビデオエクスペリエンスを開始します。	中	1.2.0
primaryControlSize	ディメンション	@transportPrimaryButtonSize	プライマリボタンの幅と高さです。ウィジェットで使用する場合は、デフォルトのサイズを使用します。	中	1.0.0
secondaryControlSize	ディメンション	@transportSecondaryButtonSize	セカンダリボタンの幅と高さです。	サポートされません	1.0.0
secondaryControls	文字列	skip	使用するセカンダリコントロールの種類です。有効なオプションは、skip、jump10、jump30、noneです。標準およびカスタムのセカンダリコントロールを参照してください。	サポートされません	1.2.0
secondaryControlsAVGLeft	文字列	—	カスタムの左セカンダリコントロールのAVGパス描画データです。定義されている場合、secondaryControlsLeftActionが必要です。これは、Alexa Vector GraphicのpathDataプロパティに含める値と同じです。ベクターグラフィックのパスデータの定義の詳細については、pathDataを参照してください。標準およびカスタムのセカンダリコントロールを参照してください。	サポートされません	1.2.0
secondaryControlsAVGRight	文字列	—	カスタムの右セカンダリコントロールのAVGパス描画データです。定義されている場合、secondaryControlsRightActionが必要です。これは、Alexa Vector GraphicのpathDataプロパティに含める値と同じです。ベクターグラフィックのパスデータの定義の詳細については、pathDataを参照してください。標準およびカスタムのセカンダリコントロールを参照してください。	サポートされません	1.2.0
secondaryControlsLeftAccessibilityLabel	文字列	—	左セカンダリコントロールを説明する文字列です。ユーザーが左セカンダリコントロールを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.2.0
secondaryControlsLeftAction	コマンド	—	ユーザーがカスタムの左セカンダリコントロールを選択したときに実行するコマンドです。secondaryControlsAVGLeftが設定されている場合に適用されます。標準およびカスタムのセカンダリコントロールを参照してください。	サポートされません	1.2.0
secondaryControlsRightAccessibilityLabel	文字列	—	右セカンダリコントロールを説明する文字列です。ユーザーが右セカンダリコントロールを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.2.0
secondaryControlsRightAction	コマンド	—	ユーザーがカスタムの右セカンダリコントロールを選択したときに実行するコマンドです。secondaryControlsAVGRightが設定されている場合に適用されます。標準およびカスタムのセカンダリコントロールを参照してください。	サポートされません	1.2.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	中	1.2.0
type	文字列	—	常にAlexaTransportControlsに設定されます。	中	1.2.0

標準およびカスタムのセカンダリコントロール

AlexaTransportControlsには、セカンダリコントロールに3つのオプションがあります。または、独自のカスタムコントロールを提供することもできます。

標準のセカンダリコントロールを使用するには

secondaryControlsを次のいずれかに設定します。

• skip - セカンダリコントロールを左右の「スキップ」ボタンとして表示します。これらのボタンを選択すると、previous/nextオプションとmediaComponentIdで指定されたメディアコンポーネントを使用してControlMediaコマンドが実行されます。
• jump10 - セカンダリコントロールを、10秒後／前に移動するボタンとして表示します。これらのボタンを選択すると、10秒に設定されたseekオプションとmediaComponentIdで指定されたメディアコンポーネントを使用してControlMediaコマンドが実行されます。
• jump30 - セカンダリコントロールを、30秒後／前に移動するボタンとして表示します。これらのボタンを選択すると、30秒に設定されたseekオプションとmediaComponentIdで指定されたメディアコンポーネントを使用してControlMediaコマンドが実行されます。

次の例は、デフォルトのskipコントロールを示しています。

次の例は、デフォルトのjump10セカンダリコントロールを示しています。

カスタムのセカンダリコントロールを定義するには

1. secondaryControlsAVGLeftとsecondaryControlsAVGRightを、左右のコントロールに使用するカスタムイメージのベクターグラフィックのpathDataに設定します。
2. secondaryControlsLeftActionとsecondaryControlsRightActionを、ユーザーがボタンを選択したときに実行されるコマンドに設定します。これらのプロパティは、secondaryControlsAVGLeftとsecondaryControlsAVGRightを設定するときに必要です。

AlexaTransportControlsの例

次の例は、AlexaTransportControlsを使用してVideoコンポーネントを表示するAPLドキュメントを示しています。VideoコンポーネントのonPlayハンドラーとonPauseハンドラーで、AlexaTransportControlsのchecked状態が設定されることに注意してください。これにより、再生／一時停止アイコンがビデオの再生状態（再生中か一時停止中か）と同期されます。

---

次の例は、ウィジェットで使用されるAlexaTransportControlsコンポーネントを示しています。ユーザーが「再生」ボタンをタップすると、ウィジェットはSendEventコマンドを実行してスキルにリクエストを送信します。その後、スキルは全画面表示のビデオエクスペリエンスを開くことができます。SendEventコマンドをテストするには、この例をスキルにコピーしてください。

---

関連トピック

• APL向けAlexaデザインシステム
• レスポンシブ対応コンポーネントとテンプレート
• Videoコンポーネント
• Alexaデザインガイド： レスポンシブ対応コンポーネント（英語のみ）

---

---

最終更新日: 2025 年 12 月 12 日