サイズ変更が可能なタブレットなどのデバイスをサポートする
Alexa Presentation Language（APL）ドキュメントは、デバイス特性に応じて、条件付きでさまざまなサイズの画面にコンテンツを表示します。タブレットなどの一部のデバイスでは、ドキュメントの表示中に画面サイズなどの特性が変更される場合があります。たとえば、ユーザーが横向き状態のタブレットでスキルを起動した後、タブレットを縦向きにすることがあります。
デバイスがAPLドキュメントを表示している間に発生したデバイスの変更にも対応できるようなドキュメントを作成しましょう。
デバイス特性の変更について
AlexaにRenderDocumentディレクティブを使ってAPLドキュメントを送信すると、Alexaはデータバインディングコンテキストのenvironment定数とviewport定数を設定します。APLドキュメントでこれらのプロパティを使用して、横向き画面では特定のレイアウトを表示し、縦向き画面では別のレイアウトを表示するといった条件付きロジックを定義します。
デフォルトでは、ドキュメントで利用可能なviewport定数とenvironment定数は、デバイスがドキュメントを画面に表示した後は変更されません。ただし、一部のデバイスではドキュメントの表示中に画面サイズなどの特性が変更される場合があります。ユーザーがタブレットの向きを横から縦に変えると、画面のディメンションが変わります。
APLドキュメントの表示中に発生したデバイスの変更に対するドキュメントの対処方法を、次の中から選択できます。
- 何もしない - デフォルトでは、APLドキュメントは据え置き型デバイス向けのViewportに合わせて縮小表示され、縦長に固定されます。
- ドキュメントのサイズを変更する - コンテンツに同じレイアウトを使用しつつ、新しい画面に合うようにレイアウトのサイズを変更します。既存の
environment定数とviewport定数は更新されないため、元のデバイス特性が引き続き反映されます。 - ドキュメントを再インフレートする - 最初にドキュメントを画面に表示したときと同じプロセスに従い、ドキュメント全体を再作成します。Alexaは、新しい画面サイズに合った
environment定数とviewport定数を使って、更新された新しいデータバインディングコンテキストを作成します。このオプションでは、ドキュメントのコンポーネントレイアウトを新しい画面サイズに合わせて変更できます。
ドキュメントのサイズ変更は速やかにできますが、レイアウトの変更はできないため柔軟性は低くなります。このオプションは比較的シンプルなレイアウトに最適です。たとえば、画像のスライドショーを表示するPagerは、サイズ変更することで見栄え良く表示されます。また、サイズ変更を一度有効にすると、その後は自動的に実行されます。
ドキュメントの再インフレートでは、デバイスのサイズや形状に完全に対応できますが、処理に時間がかかります。再インフレートを選択する場合、ドキュメントの現在の状態を保持するかどうかも検討する必要があります。
supportsResizingプロパティを有効にしない限り、ドキュメントは縮小表示され、縦長に固定されたままとなります。AmazonタブレットでのAPLを使ったユーザーエクスペリエンス
ユーザーは、次の2つの方法でFireタブレットのAPLコンテンツを使用します。
- Showモード - タブレットをEcho Showデバイスのようなディスプレイとして使用します。APLコンテンツは横長で表示されます。タブレットをShowモードにすると、画面は横長に固定されるため、サイズ変更や再インフレートの概念は適用されません。Showモードを有効にする方法の詳細については、FireタブレットでShowモードに切り替えるを参照してください。
- Alexaハンズフリーのタブレットモード - 通常のタブレット機能を利用できます。ユーザーはタブレットのAlexaに話しかけてスキルを呼び出すことができます。タブレットのコンテンツ表示方法はスキルによって変わります。
- デフォルトでは、APLドキュメントは据え置き型デバイス向けのViewport向けのViewportに合わせて縮小表示され、縦長に固定されます。
- サイズ変更を選択した場合、タブレットは向きによって縦長、横長のいずれかでコンテンツを表示します。自動サイズ変更や再インフレートを使用すると、向きに応じたコンテンツの表示方法を制御できます。
サイズ変更と再インフレートの例
以下の例では、ドキュメントが画像とテキストを表示しています。ドキュメントはデータバインディングコンテキストのviewport.widthプロパティとviewport.heightプロパティを使ってデバイスの向きを判断し、それに応じてレイアウトを調整します。横長のViewportでは画像とテキストが横並びに表示され、縦長のViewportでは画像とテキストが上下に表示されます。
{
"type": "APL",
"version": "2024.3",
"import": [
{
"name": "alexa-styles",
"version": "1.6.0"
}
],
"resources": [
{
"booleans": {
"isLandscape": "${viewport.width > viewport.height}"
}
}
],
"mainTemplate": {
"parameters": [
"exampleData"
],
"item": {
"type": "Container",
"direction": "${@isLandscape ? 'row' : 'column'}",
"padding": "@marginHorizontal, @spacingMedium",
"items": [
{
"type": "Image",
"scale": "best-fit",
"width": "${@isLandscape ? 0 : '100%'}",
"height": "${@isLandscape ? '100%' : 0}",
"grow": 0.5,
"source": "${exampleData.image}"
},
{
"type": "ScrollView",
"width": "${@isLandscape ? 0 : '100%'}",
"height": "${@isLandscape ? '100%' : 0}",
"grow": 0.5,
"spacing": "@spacingMedium",
"item": {
"type": "Text",
"fontSize": 20,
"text": "${exampleData.text}"
}
}
]
}
},
"settings": {
"supportsResizing": true
}
}
ユーザーがタブレットを横向きにしてスキルを呼び出したとします。APLランタイムはisLandscapeブール値をtrueと算出し、画像を左、テキストを右に配置したレイアウトを表示します。
ドキュメントが画面に表示されている間に、ユーザーがタブレットの向きを変えたとします。このアクションの結果は、ドキュメントのサイズ変更と再インフレートのどちらを選択しているかによって異なります。
APLがコンテンツのサイズを自動で変更するように設定している場合、ドキュメントの構造はそのままになります。縦長のViewportで別のエクスペリエンスを提供するドキュメントの条件ステートメントは再評価されません。viewport.widthおよびviewport.heightの元の値は変更されず、引き続き横長デバイスを表します。isLandscapeブール値は「true」のままです。
このため、デバイスは、より狭い縦長の画面に合わせて2つのコンポーネントのサイズを変更します。
一方、再インフレートを選択すると、Alexaはviewport.widthおよびviewport.heightに新しい値を使用したデータバインディングコンテキストを新規作成してから、isLandscapeブール値を再計算します。このリソースがtrueと評価されるようになったため、デバイスは画像とテキストが縦の列に並んだレイアウトをレンダリングします。
APLが自動でドキュメントのサイズを変更するよう設定する
デバイス特性が変更されたときに、APLが自動でドキュメントのサイズを変更するように設定できます。このオプションは、シンプルなレイアウトで使用すると最も効果的です。ドキュメントをできる限りレスポンシブ対応にしましょう。
vh、vw、px、dp）を使用しないでください。自動サイズ変更を効果的に行うには、相対ディメンション（パーセンテージ）またはautoを使用します。詳細については、できるだけ相対ディメンションを使用するを参照してください。自動サイズ変更を有効にする
- 絶対ディメンションを使用しないレスポンシブ対応ドキュメントを作成します。
- ドキュメントの
settingsで、supportsResizingオプションを有効にします。{ "settings": { "supportsResizing": true } } - ドキュメントに
onConfigChangeハンドラーを設定することもできます。その場合、システムが画面の幅や高さの変更を検出したときに実行する任意のコマンドを指定します。 - タブレットを使ってサイズ変更をテストし、ドキュメントがサイズ変更されても問題なく表示されることを確認します。
画面サイズを変更できるデバイスでスキルが機能するかどうかを効果的にテストするには、タブレットでスキルを呼び出してから画面の向きの縦長と横長を切り替えてください。
オーサリングツールのモバイルデバイス向けのViewportとシミュレーターを使って、さまざまなタブレット用Viewportでのドキュメント表示を確認することもできますが、これらのツールでは画面に既に表示されたドキュメントのサイズ変更の結果を確認できません。
- オーサリングツールで別のViewportに切り替えると、ツールはドキュメントをインフレートし直して、
viewport.widthなどのプロパティをシミュレートされたデバイスの実際の幅に設定します。viewportプロパティを使用する条件ステートメントはすべて評価されます。 - 実際のタブレットでドキュメントを表示してから向きを変えると、デバイスは
viewportプロパティの更新や再評価を行うことなくドキュメントをサイズ変更します。viewportプロパティを使用する条件ステートメントは再評価されません。
デバイス特性が変更されたときにドキュメントを再インフレートする
デバイス特性が変更されたときにドキュメントを完全に再インフレートするよう、ドキュメントを設定できます。このオプションでは、最初にドキュメントを画面に表示したときと同じプロセスに従い、ドキュメント全体を再作成します。画面のサイズや向きの変更に合わせてレイアウトを変更したい場合はこのオプションを使用します。
再インフレートするようドキュメントを設定する
-
レスポンシブ対応ドキュメントを作成します。条件ステートメントを使用して、縦長と横長のViewport向けに別々のレイアウトを作成します。
viewportプロパティに直接アクセスするのではなく、alexa-viewport-profilesパッケージに指定された@viewportOrientationリソースを使ってViewportの向きを判断することをお勧めします。@viewportOrientationリソースは、viewport.heightプロパティとviewport.widthプロパティを使用してViewportの向きを判断します。{ "resources": [ { "booleans": { "isLandscape": "${@viewportOrientation == @viewportOrientationLandscape}" } } ] } - ドキュメントの
settingsで、supportsResizingオプションを有効にします。{ "settings": { "supportsResizing": true } } Reinflateコマンドを実行するようドキュメントのonConfigChangeハンドラーを設定します。{ "onConfigChange": { "type": "Reinflate" } }- ドキュメントに
onConfigChangeハンドラーを設定することもできます。その場合、システムが画面の幅や高さの変更を検出したときに実行するその他の任意のコマンドを指定します。 preserveプロパティを設定し、再インフレート中に状態を保持することもできます。詳細については、ドキュメントの再インフレート時にコンポーネントプロパティを保持するを参照してください。- タブレットを使ってドキュメントをテストし、再インフレートの結果を確認します。
オーサリングツールのモバイルデバイス向けのViewportとシミュレーターを使って、エクスペリエンスを部分的にテストすることもできます。
- オーサリングツールで別のViewportに切り替えると、ツールはドキュメントをインフレートし直して、
viewport.widthなどのプロパティをシミュレートされたデバイスの実際の幅に設定します。viewportプロパティを使用する条件ステートメントやリソースはすべて再評価されます。Reinflateコマンドもドキュメントをインフレートし直してviewportを更新するため、オーサリングツールでは再インフレートの結果は大まかなものとなります。 - オーサリングツールやシミュレーターの
preserveプロパティを使って状態の保持の結果をテストすることはできません。preserveのテストにはタブレットデバイスを使用してください。
ドキュメントの再インフレート時にコンポーネントプロパティを保持する
Reinflateコマンドでは、最初にドキュメントを画面に表示したときと同じプロセスに従い、ドキュメント全体を再作成します。デフォルトでは、Reinflateコマンドを実行すると、ドキュメントの状態を表すコンポーネントプロパティはリセットされます。たとえば、ScrollViewを表示するドキュメントでドキュメントを再インフレートすると、スクロール位置がコンポーネントの一番上にリセットされます。ユーザーがコンテンツをスクロールしてからタブレットの向きを変えた場合に、コンテンツ内での位置がわからなくなると、ユーザーエクスペリエンスが低下します。
エクスペリエンスを向上させるには、再インフレート中に状態情報を保持するpreserveプロパティを使用します。preserveプロパティは、再インフレート中に保持する動的なプロパティやバインドされたプロパティの配列を受け取る基本コンポーネントのプロパティです。
以下の例では、ScrollViewのscrollOffsetプロパティを保持します。
{
"type": "ScrollView",
"id": "textScrollViewId",
"preserve": [
"scrollOffset"
],
"width": "${@isLandscape ? 0 : '100%'}",
"height": "${@isLandscape ? '100%' : 0}",
"grow": 0.5,
"spacing": "@spacingMedium",
"item": {
"type": "Text",
"fontSize": 20,
"text": "${exampleData.text}"
}
}
preserveを設定する場合は、コンポーネントのidを設定する必要があります。Reinflateコマンドを実行すると、Alexaはidを使ってコンポーネントの元のドキュメント階層をチェックしてから、指定されたpreserveプロパティの値を再インフレートされたドキュメントの対応するコンポーネントにコピーします。前の例では、AlexaはID textScrollViewIdを使ってScrollViewのscrollOffset値を保持し、そのオフセットを新しいScrollViewにコピーしています。この結果、ドキュメントが新しい画面サイズでレンダリングされた後、ScrollViewが元のスクロール位置に調整されます。
特定のコンポーネントに設定可能な具体的な値は、コンポーネントタイプによって異なります。
bindプロパティで作成した、独自のバインドされたプロパティを保持することもできます。
以下のドキュメント例では、ドキュメントの状態を保持しながら完全に再インフレートして、縦長と横長の画面で異なるレイアウトを表示する方法を示しています。この例では、alexa-viewport-profilesパッケージに指定された@viewportOrientationリソースを使ってViewportの向きを判断しています。
ドキュメントおよびコンポーネントのonMountコマンドは、ドキュメントの再インフレート後に実行されます。これらのハンドラーを使ってメディアコンテンツの再生を再開できます。以下の例では、Viewportのサイズが変更された後にドキュメントがビデオの再生を再開しています。preserveプロパティは、現在再生しているsourceとplayingStateを保持します。ドキュメントのonMountハンドラーはControlMediaコマンドを実行してビデオを再開します。
関連トピック
最終更新日: 2025 年 12 月 02 日