Viewportプロファイル
Alexa viewportプロファイルパッケージは、条件付きロジックで使用できるviewportプロファイルのコレクションです。viewport特性で細かく設定するのではなくviewportプロファイルを使用することで、スムーズにレスポンシブ対応のAPLドキュメントを作成できます。
viewportプロファイルとは
画面付きのAlexa搭載デバイスでは、「Viewport」はユーザーに表示される画面領域のことを指します。それぞれのViewportには、形状、向き、サイズ、密度があります。viewportプロファイルは、viewport特性の範囲を表す名前付きのリソースです。プロファイルでは、viewportの各値(形状、サイズなど)を指定します。サイズと密度は、プロファイルが複数の物理デバイスを表すことができるように範囲として定義されます。たとえば、viewportプロファイルのhubLandscapeSmall
は、幅が960
〜1280
ピクセル、高さが600
ピクセル未満の横長の長方形デバイスを含みます。
APLドキュメントを作成する場合、Alexa viewportプロファイルパッケージで提供されているAlexa viewportプロファイルを条件付きロジックで使用して、レスポンシブ対応のドキュメントに変更できます。
Alexa viewportプロファイルパッケージを読み込む
Alexa viewportプロファイルパッケージのリソースを使用するには、alexa-viewport-profiles
パッケージをドキュメントのimport
配列に追加します。alexa-viewport-profiles
パッケージの最新バージョンは1.3.0
です。
次に例を示します:
{
"import": [
{
"name": "alexa-viewport-profiles",
"version": "1.3.0"
}
]
}
条件付きロジックでviewport情報を使用する
viewportプロファイルパッケージでは、プロファイル用の名前付きのリソースと、プロファイルに統合されるviewport特性を提供しています。viewportサイズなどの値をハードコーディングするのではなく、これらのリソースを使用してください。
条件付きロジックでパッケージのリソースを使用するには、リソース名に予約文字の「@」を使用します。
以下の例では、ユーザーのデバイスがhubRoundSmall
プロファイルの基準を満たすと、このwhen
句がtrueと評価されます。
"when": "${@viewportProfile == @hubRoundSmall}"
以下の例では、長方形のviewportであればwhen
句がtrueと評価されます。
"when": "${@viewportShape == @viewportShapeRectangle}"
APLドキュメントのデータバインディングの式と条件付きロジックの詳細については、データバインディングの構文とコンポーネントの条件付きインフレートを参照してください。APLでのリソースの動作については、APL Resourcesを参照してください。
さまざまなデバイスタイプのデザイン方法については、Device Modesを参照してください。
Viewportプロファイルリソース(@viewportProfile)
@viewportProfile
リソースでは、デバイスがさまざまなカテゴリーに分類されます。デバイスの特定をハードコーディングする代わりにこれらのカテゴリーの条件付きロジックに基づくことで、新しいデバイスが利用可能になったときのロジックの安定性が高まります。
以下は、ユーザーのデバイスがEcho ShowなどのhubLandscapeMedium
プロファイルの条件を満たす場合にtrue
と評価される条件ステートメントの例です。
"when": "${@viewportProfile == @hubLandscapeMedium}"
以下の表に、利用可能なviewportプロファイルをまとめています。この表では、widthとheightの値がdp
で表されています。
Viewportプロファイル | 形状/向き | モード | minWidth / maxWidth | minHeight / maxHeight |
---|---|---|---|---|
|
丸/等しい |
デバイス |
100 – 599 |
100 – 599 |
|
長方形/横長 |
デバイス |
960 – 1279 |
100 – 599 |
|
長方形/横長 |
デバイス |
960 – 1279 |
600 – 959 |
|
長方形/横長 |
デバイス |
1280 – 1920 |
600 – 1279 |
|
長方形/横長 |
デバイス |
1920 – 2560 |
960 – 1279 |
|
長方形/縦長 |
デバイス |
960 – 1279 |
1920 – 2560 |
|
長方形/横長 |
テレビ |
960 – 960 |
540 – 540 |
|
長方形/縦長 |
モバイル |
600 – 959 |
320 – 1920 |
|
長方形/横長 |
モバイル |
960 – 1279 |
320 – 1920 |
|
長方形/横長 |
モバイル |
1280– 1920 |
320 – 1920 |
viewportの特性のリソース
viewportプロファイルパッケージは、形状、サイズ、密度といったviewport特性のその他のリソースを定義します。
形状(@viewportShape)
@viewportShape
リソースにより、viewportのさまざまな形状を区別します。
"when": "${@viewportShape == @viewportShapeRectangle}"
リソース | 条件 |
---|---|
|
|
|
|
|
|
向き(@viewportOrientation)
@viewportOrientation
リソースにより、viewportのさまざまな向きを区別します。
"when": "${@viewportOrientation == @viewportOrientationLandscape}"
リソース | 条件 |
---|---|
|
|
|
|
|
|
サイズクラス
サイズとサイズクラスのリソースは、さまざまなサイズのviewportを区別します。
viewportの幅と高さ(dp)のviewportサイズのリソースグループ
条件付き句のサンプルです。
"when": "${@viewport.width == @viewportSizeMedium}"
リソース | viewport幅/viewport高さ(dp)の条件 |
---|---|
|
< 600 |
|
≥ 600 && <960 |
|
≥ 960 && <1280 |
|
≥ 1280 && <1920 |
|
≥ 1920 |
viewportの幅と高さの組み合わせのviewportサイズクラスのリソースグループ(@viewportSizeClass)
@viewportSizeClass
リソースは、幅と高さの組み合わせでさまざまなviewportサイズを区別します。
条件付き句のサンプルです。
"when": "${@viewportSizeClass == @viewportClassMediumLarge}"
リソース | 幅 | 高さ |
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
密度(@viewportDensity)
@viewportDensity
リソースは、さまざまな密度(dpi)を区別します。
条件付き句のサンプルです。
"when": "${@viewportDensity == @viewportDensityHigh}"
リソース | viewportの条件(dpi) |
---|---|
|
< 140 |
|
≥ 140 && < 200 |
|
≥ 200 && < 280 |
|
≥ 280 && < 400 |
|
≥ 400 && < 560 |
|
≥ 560 && < 720 |
関連トピック
最終更新日: 2021 年 10 月 11 日