サイズ変更が可能なタブレットなどのデバイスをサポートする
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.widthおよびviewport.heightプロパティを使ってデバイスの向きを判断し、それに応じてレイアウトを調整します。横長のviewportでは画像とテキストが横並びに表示され、縦長のviewportでは画像とテキストが上下に表示されます。
{
"type": "APL",
"version": "1.6",
"import": [
{
"name": "alexa-styles",
"version": "1.2.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コマンドを実行してビデオを再開します。
関連トピック
最終更新日: 2021 年 05 月 17 日