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 |
関連トピック
Last updated: Oct 11, 2021